import React from 'react';
import { CheckCircle2, AlertCircle, Circle, HelpCircle, ArrowRight } from 'lucide-react';

interface OffboardingStepRowProps {
  step: string;
  label: string;
  status: 'pending' | 'completed' | 'skipped' | 'failed' | 'blocked';
  notes?: string | null;
  actionRequired?: boolean;
  onActionClick?: () => void;
  actionLabel?: string;
}

export const OffboardingStepRow: React.FC<OffboardingStepRowProps> = ({
  step,
  label,
  status,
  notes,
  actionRequired = false,
  onActionClick,
  actionLabel = 'Action',
}) => {
  const getStatusIcon = () => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="w-5 h-5 text-emerald-500 shrink-0" />;
      case 'skipped':
        return <CheckCircle2 className="w-5 h-5 text-slate-400 shrink-0" />;
      case 'failed':
      case 'blocked':
        return <AlertCircle className="w-5 h-5 text-rose-500 shrink-0 animate-pulse" />;
      case 'pending':
        return <Circle className="w-5 h-5 text-text-muted shrink-0" />;
      default:
        return <HelpCircle className="w-5 h-5 text-text-muted shrink-0" />;
    }
  };

  const getStatusBadge = () => {
    switch (status) {
      case 'completed':
        return 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/20 dark:text-emerald-400 dark:border-emerald-800/30';
      case 'skipped':
        return 'bg-muted text-text-muted border-border';
      case 'failed':
        return 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/20 dark:text-rose-400 dark:border-rose-800/30';
      case 'blocked':
        return 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/20 dark:text-rose-400 dark:border-rose-800/30';
      case 'pending':
        return 'bg-muted text-text-muted border-border';
      default:
        return 'bg-muted text-text-muted border-border';
    }
  };

  return (
    <div className={`p-5 rounded-2xl border transition-all flex flex-col sm:flex-row sm:items-center justify-between gap-4 ${
      status === 'blocked' || status === 'failed' 
        ? 'border-rose-200 bg-rose-500/5' 
        : 'border-border bg-card/40 hover:bg-card/80'
    }`}>
      <div className="flex items-start gap-4 min-w-0">
        <div className="pt-0.5">{getStatusIcon()}</div>
        <div className="min-w-0">
          <p className="font-extrabold text-sm text-text leading-tight">{label}</p>
          {notes && <p className="text-xs text-text-muted mt-1 leading-relaxed break-words">{notes}</p>}
        </div>
      </div>

      <div className="flex items-center gap-3 self-end sm:self-center shrink-0">
        <span className={`px-2.5 py-1 rounded-lg text-[0.6rem] font-black uppercase tracking-wider border ${getStatusBadge()}`}>
          {status}
        </span>

        {actionRequired && onActionClick && (
          <button
            type="button"
            onClick={onActionClick}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-primary hover:bg-primary-dark text-white text-xs font-black uppercase tracking-wider transition-all shadow-md active:scale-95"
          >
            <span>{actionLabel}</span>
            <ArrowRight size={12} />
          </button>
        )}
      </div>
    </div>
  );
};

export default OffboardingStepRow;
