"use client";

import { useState, useEffect, useRef } from "react";
import { ArrowLeft, UserPlus, Download } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  fetchPosition,
  fetchApplicants,
  updateApplicantStage,
  updateApplicantNotes,
  createApplicant,
  uploadResume,
} from "@/lib/supabase/recruitment-actions";
import type {
  PositionWithRelations,
  Applicant,
  ApplicantStage,
} from "@/lib/supabase/recruitment-types";
import { STAGE_LABELS, getInitials } from "@/lib/supabase/recruitment-types";
import PageSkeleton from "./PageSkeleton";

const ALL_STAGES: ApplicantStage[] = ["applied", "screening", "interview", "offer", "hired", "rejected"];

const AVATAR_COLORS = [
  "bg-teal-500", "bg-blue-500", "bg-purple-500",
  "bg-orange-500", "bg-pink-500", "bg-indigo-500",
];

function ApplicantCard({
  applicant,
  index,
  onNotesChange,
  onDragStart,
}: {
  applicant: Applicant;
  index: number;
  onNotesChange: (id: string, notes: string) => void;
  onDragStart: (e: React.DragEvent, applicantId: string) => void;
}) {
  const [notes, setNotes] = useState(applicant.notes || "");
  const [notesSaving, setNotesSaving] = useState(false);
  const notesTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleNotesChange = (value: string) => {
    setNotes(value);
    if (notesTimeoutRef.current) clearTimeout(notesTimeoutRef.current);
    setNotesSaving(true);
    notesTimeoutRef.current = setTimeout(() => {
      onNotesChange(applicant.id, value);
      setNotesSaving(false);
    }, 800);
  };

  return (
    <div
      draggable
      onDragStart={(e) => onDragStart(e, applicant.id)}
      className="bg-white rounded-lg border border-gray-200 p-3 mb-2 shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
    >
      <div className="flex items-start gap-2.5">
        <div className={`w-8 h-8 rounded-full ${AVATAR_COLORS[index % AVATAR_COLORS.length]} flex items-center justify-center text-white text-xs font-semibold flex-shrink-0`}>
          {getInitials(applicant.first_name, applicant.last_name)}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-gray-900 truncate">
            {applicant.first_name} {applicant.last_name}
          </p>
          <p className="text-xs text-gray-500 truncate">{applicant.email}</p>
          {applicant.phone && (
            <p className="text-xs text-gray-400 mt-0.5">{applicant.phone}</p>
          )}
          <p className="text-[10px] text-gray-400 mt-1">
            {new Date(applicant.created_at).toLocaleDateString()}
          </p>
          {applicant.resume_url && (
            <a
              href={applicant.resume_url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-xs text-teal-600 hover:text-teal-700 mt-1"
            >
              <Download className="w-3 h-3" />
              Resume
            </a>
          )}
        </div>
      </div>
      <div className="mt-3">
        <Textarea
          value={notes}
          onChange={(e) => handleNotesChange(e.target.value)}
          placeholder="Add notes..."
          rows={2}
          className="text-xs resize-none"
        />
        {notesSaving && (
          <p className="text-[10px] text-gray-400 mt-1">Saving...</p>
        )}
      </div>
    </div>
  );
}

function AddApplicantModal({
  positionId,
  onClose,
  onAdded,
}: {
  positionId: string;
  onClose: () => void;
  onAdded: () => void;
}) {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [resumeFile, setResumeFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const modalRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
        onClose();
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [onClose]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!firstName.trim() || !lastName.trim() || !email.trim()) return;
    setLoading(true);
    setError(null);

    let resumeUrl: string | undefined;
    if (resumeFile) {
      const uploadResult = await uploadResume(resumeFile);
      if (!uploadResult.success) {
        setError(uploadResult.error || "Failed to upload resume");
        setLoading(false);
        return;
      }
      resumeUrl = uploadResult.url;
    }

    const result = await createApplicant({
      job_posting_id: positionId,
      first_name: firstName.trim(),
      last_name: lastName.trim(),
      email: email.trim(),
      phone: phone.trim() || undefined,
      resume_url: resumeUrl,
    });
    setLoading(false);
    if (!result.success) {
      setError(result.error || "Failed to add applicant");
      return;
    }
    onAdded();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div ref={modalRef} className="bg-white rounded-xl shadow-xl w-full max-w-md">
        <div className="px-6 py-4 border-b border-gray-100">
          <h2 className="text-lg font-semibold text-gray-900">Add applicant</h2>
          <p className="text-xs text-gray-400 mt-0.5">Manually add a candidate who applied via email, referral, or external job board</p>
        </div>
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          {error && (
            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-2 rounded-lg text-sm">
              {error}
            </div>
          )}
          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1.5">
              <Label htmlFor="firstName">First name *</Label>
              <Input
                id="firstName"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                required
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="lastName">Last name *</Label>
              <Input
                id="lastName"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                required
              />
            </div>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="email">Email *</Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="phone">Phone</Label>
            <Input
              id="phone"
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="resume">Resume</Label>
            <input
              id="resume"
              type="file"
              accept=".pdf,.doc,.docx"
              onChange={(e) => setResumeFile(e.target.files?.[0] || null)}
              className="w-full text-sm file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200"
            />
          </div>
          <div className="flex gap-3 pt-2">
            <Button
              type="button"
              variant="outline"
              onClick={onClose}
              className="flex-1 cursor-pointer"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={loading || !firstName.trim() || !lastName.trim() || !email.trim()}
              className="flex-1 bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer disabled:opacity-50"
            >
              {loading ? "Adding..." : "Add applicant"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default function RecruitmentDetailPage({
  positionId,
  onBack,
}: {
  positionId: string;
  onBack: () => void;
}) {
  const [position, setPosition] = useState<PositionWithRelations | null>(null);
  const [applicants, setApplicants] = useState<Applicant[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [dragOverStage, setDragOverStage] = useState<ApplicantStage | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      fetchPosition(positionId),
      fetchApplicants(positionId),
    ])
      .then(([pos, apps]) => {
        if (!cancelled) {
          setPosition(pos);
          setApplicants(apps || []);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [positionId]);

  const handleDragStart = (e: React.DragEvent, applicantId: string) => {
    e.dataTransfer.setData("applicantId", applicantId);
  };

  const handleDragOver = (e: React.DragEvent, stage: ApplicantStage) => {
    e.preventDefault();
    setDragOverStage(stage);
  };

  const handleDragLeave = () => {
    setDragOverStage(null);
  };

  const handleDrop = async (e: React.DragEvent, stage: ApplicantStage) => {
    e.preventDefault();
    setDragOverStage(null);
    const applicantId = e.dataTransfer.getData("applicantId");
    if (!applicantId) return;

    const result = await updateApplicantStage(applicantId, stage);
    if (result.success) {
      setApplicants((prev) =>
        prev.map((a) => (a.id === applicantId ? { ...a, stage } : a))
      );
    }
  };

  const handleNotesChange = async (id: string, notes: string) => {
    await updateApplicantNotes(id, notes);
    setApplicants((prev) =>
      prev.map((a) => (a.id === id ? { ...a, notes } : a))
    );
  };

  const handleApplicantAdded = () => {
    setShowAddModal(false);
    fetchPosition(positionId).then(setPosition).catch(() => {});
    fetchApplicants(positionId).then((apps) => setApplicants(apps || [])).catch(() => {});
  };

  if (loading) return <PageSkeleton />;
  if (!position) {
    return (
      <div className="p-6 lg:p-8">
        <div className="text-center py-16">
          <p className="text-gray-500">Position not found</p>
          <Button onClick={onBack} className="mt-4 cursor-pointer">
            Back to recruitment
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="sm"
            onClick={onBack}
            className="gap-1 text-gray-600 hover:text-gray-900 cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4" />
          </Button>
          <div>
            <h1 className="text-2xl font-serif font-bold text-gray-900">{position.title}</h1>
            <p className="text-gray-500 text-sm mt-0.5">
              {position.department?.name || "No department"} &middot; {position.employment_type.replace("_", " ")} &middot; {applicants.length} applicant{applicants.length !== 1 ? "s" : ""}
            </p>
          </div>
        </div>
        <Button
          onClick={() => setShowAddModal(true)}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
        >
          <UserPlus className="w-4 h-4" />
          Add applicant
        </Button>
      </div>

      {/* Kanban Board */}
      <div className="flex gap-4 overflow-x-auto pb-4">
        {ALL_STAGES.map((stage) => {
          const stageApplicants = applicants.filter((a) => a.stage === stage);
          const isDragOver = dragOverStage === stage;

          return (
            <div
              key={stage}
              className={`flex-shrink-0 w-64 rounded-xl border-2 transition-colors ${
                isDragOver ? "border-teal-400 bg-teal-50/30" : "border-gray-200 bg-gray-50/50"
              }`}
              onDragOver={(e) => handleDragOver(e, stage)}
              onDragLeave={handleDragLeave}
              onDrop={(e) => handleDrop(e, stage)}
            >
              {/* Column Header */}
              <div className="px-3 py-2.5 border-b border-gray-200/60 flex items-center justify-between">
                <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  {STAGE_LABELS[stage]}
                </h3>
                <span className="text-xs text-gray-400 bg-gray-100 rounded-full w-5 h-5 flex items-center justify-center">
                  {stageApplicants.length}
                </span>
              </div>

              {/* Cards */}
              <div className="p-2 min-h-[200px]">
                {stageApplicants.length === 0 ? (
                  <div className="flex items-center justify-center h-32 text-gray-300 text-xs">
                    Drop here
                  </div>
                ) : (
                  stageApplicants.map((app, idx) => (
                    <ApplicantCard
                      key={app.id}
                      applicant={app}
                      index={idx}
                      onNotesChange={handleNotesChange}
                      onDragStart={handleDragStart}
                    />
                  ))
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Add Applicant Modal */}
      {showAddModal && (
        <AddApplicantModal
          positionId={positionId}
          onClose={() => setShowAddModal(false)}
          onAdded={handleApplicantAdded}
        />
      )}
    </div>
  );
}