/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { Loader2, AlertCircle, Inbox } from 'lucide-react';
import { cn } from '../../lib/utils';

export const LoadingState: React.FC<{ message?: string; className?: string }> = ({ message = 'Syncing data...', className }) => (
  <div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
    <div className="w-16 h-16 bg-slate-50 rounded-3xl flex items-center justify-center mb-4 border border-slate-100 shadow-sm">
      <Loader2 className="w-8 h-8 text-indigo-600 animate-spin" />
    </div>
    <h3 className="text-base font-bold text-slate-900 italic tracking-tight">{message}</h3>
    <p className="text-xs text-slate-500 mt-1">Please wait while the quantum cores stabilize.</p>
  </div>
);

export const EmptyState: React.FC<{ title: string; description: string; icon?: any; action?: React.ReactNode; className?: string }> = ({ 
  title, 
  description, 
  icon: Icon = Inbox, 
  action,
  className 
}) => (
  <div className={cn("flex flex-col items-center justify-center p-12 text-center", className)}>
    <div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mb-6 border border-slate-100/50 shadow-sm group">
      <Icon className="w-10 h-10 text-slate-300 group-hover:text-indigo-400 transition-colors duration-500" />
    </div>
    <h3 className="text-xl font-bold text-slate-900 italic tracking-tight mb-2">{title}</h3>
    <p className="text-sm text-slate-500 max-w-xs mx-auto italic mb-8">{description}</p>
    {action}
  </div>
);

export const ErrorState: React.FC<{ message: string; onRetry?: () => void; className?: string }> = ({ message, onRetry, className }) => (
  <div className={cn("flex flex-col items-center justify-center p-12 text-center bg-rose-50/30 rounded-3xl border border-rose-100", className)}>
    <div className="w-16 h-16 bg-rose-100 rounded-3xl flex items-center justify-center mb-4 border border-rose-200 shadow-sm">
      <AlertCircle className="w-8 h-8 text-rose-600" />
    </div>
    <h3 className="text-base font-bold text-rose-900 italic tracking-tight">System Fault Detected</h3>
    <p className="text-xs text-rose-600/70 mt-1 mb-6 max-w-xs">{message}</p>
    {onRetry && (
      <button 
        onClick={onRetry}
        className="px-6 py-2 bg-rose-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-rose-700 transition-all shadow-md active:scale-95"
      >
        Re-sync Module
      </button>
    )}
  </div>
);