"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import {
  ArrowRight,
  BriefcaseBusiness,
  CalendarDays,
  CheckCircle2,
  Clock3,
  Plus,
  Search,
  UserCheck,
  Users,
  X,
} from "lucide-react";

interface OnboardingCase {
  id: number;
  status: string;
  targetStartDate: string | null;
  welcomeMessage: string;
  candidate: { id: number; firstName: string; lastName: string; email: string };
  job: { id: number; title: string } | null;
  assignedRecruiter: { id: number; name: string } | null;
  totalTasks: number;
  completedTasks: number;
  progress: number;
}

interface Candidate {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  job: { id: number; title: string } | null;
}

export default function OnboardingPage() {
  const [cases, setCases] = useState<OnboardingCase[]>([]);
  const [candidates, setCandidates] = useState<Candidate[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [taskTemplates, setTaskTemplates] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("all");
  const [showStartModal, setShowStartModal] = useState(false);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");
  const [newCase, setNewCase] = useState({
    candidateId: "",
    assignedRecruiterId: "1",
    targetStartDate: "",
    welcomeMessage: "",
    templateId: "",
  });

  async function loadData() {
    setLoading(true);
    try {
      const [caseRes, candidateRes, userRes, templateRes] = await Promise.all([
        fetch("/api/onboarding"),
        fetch("/api/candidates"),
        fetch("/api/users"),
        fetch("/api/library?type=task"),
      ]);
      const [caseData, candidateData, userData, templateData] = await Promise.all([
        caseRes.json(),
        candidateRes.json(),
        userRes.json(),
        templateRes.json(),
      ]);
      setCases(Array.isArray(caseData) ? caseData : []);
      setCandidates(Array.isArray(candidateData) ? candidateData : []);
      setUsers(Array.isArray(userData) ? userData : []);
      setTaskTemplates(Array.isArray(templateData) ? templateData : []);
    } catch (loadError) {
      console.error(loadError);
      setError("Unable to load onboarding workspaces.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { loadData(); }, []);

  const onboardedIds = new Set(cases.map((item) => item.candidate.id));
  const availableCandidates = candidates.filter((candidate) => !onboardedIds.has(candidate.id));
  const filtered = cases.filter((item) => {
    const query = search.toLowerCase();
    const name = `${item.candidate.firstName} ${item.candidate.lastName}`.toLowerCase();
    return (
      (!query || name.includes(query) || item.job?.title.toLowerCase().includes(query)) &&
      (status === "all" || item.status === status)
    );
  });

  const stats = useMemo(() => ({
    total: cases.length,
    inProgress: cases.filter((item) => item.status === "in_progress").length,
    waiting: cases.filter((item) => item.status === "waiting_on_candidate").length,
    complete: cases.filter((item) => item.status === "completed" || item.progress === 100).length,
  }), [cases]);

  async function startOnboarding() {
    if (!newCase.candidateId) {
      setError("Select a candidate to begin onboarding.");
      return;
    }
    setSaving(true);
    setError("");
    const selectedTemplate = taskTemplates.find((template) => String(template.id) === newCase.templateId);
    const templateTasks = selectedTemplate?.content?.tasks?.map((task: any) => ({
      title: task.title,
      description: task.description || "",
      category: selectedTemplate.category || "Onboarding",
      assigneeType: "internal",
      required: task.required !== false,
      requiresUpload: false,
    }));

    try {
      const response = await fetch("/api/onboarding", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          candidateId: Number(newCase.candidateId),
          assignedRecruiterId: Number(newCase.assignedRecruiterId || 1),
          targetStartDate: newCase.targetStartDate || null,
          welcomeMessage: newCase.welcomeMessage,
          tasks: templateTasks,
        }),
      });
      const data = await response.json();
      if (!response.ok) {
        setError(data.error || "Unable to start onboarding.");
        return;
      }
      setShowStartModal(false);
      setNewCase({ candidateId: "", assignedRecruiterId: "1", targetStartDate: "", welcomeMessage: "", templateId: "" });
      await loadData();
    } catch {
      setError("Unable to start onboarding.");
    } finally {
      setSaving(false);
    }
  }

  const statusStyles: Record<string, string> = {
    not_started: "bg-gray-100 text-gray-700",
    in_progress: "bg-blue-100 text-blue-700",
    waiting_on_candidate: "bg-amber-100 text-amber-700",
    completed: "bg-emerald-100 text-emerald-700",
    cancelled: "bg-red-100 text-red-700",
  };

  return (
    <div className="p-6">
      <div className="flex items-start justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2">
            <div className="p-2 bg-emerald-100 rounded-lg"><UserCheck className="w-5 h-5 text-emerald-700" /></div>
            <h1 className="text-2xl font-bold text-gray-900">Onboarding</h1>
          </div>
          <p className="text-gray-500 mt-2">Move selected candidates from recruitment into a structured, document-ready onboarding process.</p>
        </div>
        <button onClick={() => { setError(""); setShowStartModal(true); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm">
          <Plus className="w-4 h-4" /> Start Onboarding
        </button>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {[
          { label: "New hires", value: stats.total, icon: Users, color: "bg-blue-500" },
          { label: "In progress", value: stats.inProgress, icon: Clock3, color: "bg-indigo-500" },
          { label: "Awaiting completion", value: Math.max(stats.total - stats.complete, 0), icon: CalendarDays, color: "bg-amber-500" },
          { label: "Completed", value: stats.complete, icon: CheckCircle2, color: "bg-emerald-500" },
        ].map((card) => (
          <div key={card.label} className="bg-white rounded-xl border border-gray-200 shadow-sm p-5">
            <div className={`w-9 h-9 rounded-lg ${card.color} flex items-center justify-center mb-3`}><card.icon className="w-4 h-4 text-white" /></div>
            <p className="text-2xl font-bold text-gray-900">{card.value}</p>
            <p className="text-sm text-gray-500">{card.label}</p>
          </div>
        ))}
      </div>

      <div className="flex items-center gap-3 mb-5">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search new hires or positions..." className="w-full pl-9 pr-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
        </div>
        <select value={status} onChange={(event) => setStatus(event.target.value)} className="px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">
          <option value="all">All statuses</option>
          <option value="in_progress">In progress</option>
          <option value="waiting_on_candidate">Waiting on candidate</option>
          <option value="completed">Completed</option>
        </select>
      </div>

      {error && !showStartModal && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>}

      {loading ? (
        <div className="py-16 flex justify-center"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" /></div>
      ) : filtered.length === 0 ? (
        <div className="bg-white border border-gray-200 rounded-xl p-12 text-center">
          <UserCheck className="w-12 h-12 text-gray-300 mx-auto mb-3" />
          <h2 className="font-semibold text-gray-900">No onboarding workspaces found</h2>
          <p className="text-sm text-gray-500 mt-1">Start onboarding after selecting a candidate for a position.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
          {filtered.map((item) => (
            <Link key={item.id} href={`/onboarding/${item.id}`} className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md hover:border-blue-300 transition-all group">
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-center gap-3 min-w-0">
                  <div className="w-11 h-11 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center font-semibold shrink-0">
                    {item.candidate.firstName[0]}{item.candidate.lastName[0]}
                  </div>
                  <div className="min-w-0">
                    <h3 className="font-semibold text-gray-900 truncate">{item.candidate.firstName} {item.candidate.lastName}</h3>
                    <p className="text-sm text-gray-500 truncate">{item.job?.title || "Position not assigned"}</p>
                  </div>
                </div>
                <span className={`text-xs px-2 py-1 rounded-full font-medium capitalize ${statusStyles[item.status] || statusStyles.not_started}`}>{item.status.replaceAll("_", " ")}</span>
              </div>

              <div className="mt-5">
                <div className="flex justify-between text-xs text-gray-500 mb-1.5"><span>{item.completedTasks} of {item.totalTasks} tasks complete</span><strong className="text-gray-700">{item.progress}%</strong></div>
                <div className="h-2 bg-gray-100 rounded-full overflow-hidden"><div className="h-full bg-emerald-500 rounded-full" style={{ width: `${item.progress}%` }} /></div>
              </div>

              <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-xs text-gray-500">
                <span>{item.targetStartDate ? `Start: ${new Date(`${item.targetStartDate}T00:00:00`).toLocaleDateString()}` : "Start date TBD"}</span>
                <span className="text-blue-600 font-medium flex items-center gap-1 group-hover:gap-2 transition-all">Open workspace <ArrowRight className="w-3 h-3" /></span>
              </div>
            </Link>
          ))}
        </div>
      )}

      {showStartModal && (
        <div className="fixed inset-0 bg-black/55 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="flex items-center justify-between p-5 border-b border-gray-200">
              <div><h2 className="text-lg font-semibold text-gray-900">Start candidate onboarding</h2><p className="text-sm text-gray-500">Create the post-selection workspace and initial tasks.</p></div>
              <button onClick={() => setShowStartModal(false)} className="p-2 hover:bg-gray-100 rounded-lg"><X className="w-5 h-5 text-gray-400" /></button>
            </div>
            <div className="p-5 space-y-4">
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Selected candidate *</label><select value={newCase.candidateId} onChange={(event) => setNewCase({ ...newCase, candidateId: event.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"><option value="">Choose candidate</option>{availableCandidates.map((candidate) => <option key={candidate.id} value={candidate.id}>{candidate.firstName} {candidate.lastName}{candidate.job ? ` — ${candidate.job.title}` : ""}</option>)}</select></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Assigned recruiter / administrator</label><select value={newCase.assignedRecruiterId} onChange={(event) => setNewCase({ ...newCase, assignedRecruiterId: event.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none">{users.filter((user) => ["super_admin", "admin", "recruiter"].includes(user.role)).map((user) => <option key={user.id} value={user.id}>{user.name} ({user.role.replaceAll("_", " ")})</option>)}</select></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Target start date</label><input type="date" value={newCase.targetStartDate} onChange={(event) => setNewCase({ ...newCase, targetStartDate: event.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" /></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Initial task workflow</label><select value={newCase.templateId} onChange={(event) => setNewCase({ ...newCase, templateId: event.target.value })} className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"><option value="">Standard candidate onboarding tasks</option>{taskTemplates.map((template) => <option key={template.id} value={template.id}>{template.name}</option>)}</select><p className="text-xs text-gray-500 mt-1">You can add candidate upload requests and internal tasks after creation.</p></div>
              <div><label className="block text-sm font-medium text-gray-700 mb-1">Welcome message</label><textarea value={newCase.welcomeMessage} onChange={(event) => setNewCase({ ...newCase, welcomeMessage: event.target.value })} rows={3} placeholder="Optional message shown in the candidate portal..." className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none" /></div>
              {error && <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>}
            </div>
            <div className="flex justify-end gap-3 p-5 border-t border-gray-200"><button onClick={() => setShowStartModal(false)} className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">Cancel</button><button onClick={startOnboarding} disabled={saving || !newCase.candidateId} className="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50">{saving ? "Starting..." : "Start Onboarding"}</button></div>
          </div>
        </div>
      )}
    </div>
  );
}