import Link from 'next/link';
import { CheckCircle2, Clock3, FileSignature, Lock, UploadCloud, Video, FileText, UserRound, ChevronRight, GraduationCap, BookOpen } from 'lucide-react';
import { OnboardingTask } from '@/lib/types';
import { StatusBadge } from './status-badge';

function TaskIcon({ category, status }: { category: string; status: string }) {
  if (status === 'Locked') return <Lock size={21} />;
  if (category === 'Training') return <GraduationCap size={21} />;
  if (category === 'Policy') return <BookOpen size={21} />;
  if (category === 'Video') return <Video size={21} />;
  if (category === 'Document') return <FileText size={21} />;
  if (category === 'Adobe') return <FileSignature size={21} />;
  if (category === 'Upload') return <UploadCloud size={21} />;
  if (category === 'Profile') return <UserRound size={21} />;
  if (status === 'Completed') return <CheckCircle2 size={21} />;
  return <Clock3 size={21} />;
}

export function TaskCard({ task }: { task: OnboardingTask }) {
  const disabled = task.status === 'Locked';

  if (disabled) {
    return (
      <div className="task-card task-card-locked">
        <div className="task-card-content">
          <div className="task-icon"><TaskIcon category={task.category} status={task.status} /></div>
          <div className="task-info">
            <p className="task-title">{task.taskName}</p>
            <p className="task-meta">{task.description}</p>
            <div className="task-badges">
              <StatusBadge status={task.status} />
            </div>
          </div>
        </div>
        <div className="task-chevron">
          <Lock size={18} className="lock-icon" />
        </div>
      </div>
    );
  }

  return (
    <Link href={task.href} className="task-card task-card-clickable task-card-interactive">
      <div className="task-card-content">
        <div className="task-icon"><TaskIcon category={task.category} status={task.status} /></div>
        <div className="task-info">
          <p className="task-title">{task.taskName}</p>
          <p className="task-meta">{task.description}</p>
          <div className="task-badges">
            <StatusBadge status={task.status} />
          </div>
        </div>
      </div>
      <div className="task-chevron">
        <ChevronRight size={20} className="chevron-icon" />
      </div>
    </Link>
  );
}