"use client";

import { useState, useEffect, useCallback } from "react";
import { Plus, X, ChevronDown, ChevronUp, Trash2, Users, CalendarDays, FileText, Star, ArrowLeft, Check, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  fetchAppraisalCycles,
  createAppraisalCycle,
  fetchAppraisalTemplates,
  createAppraisalTemplate,
  deleteAppraisalTemplate,
  fetchCycleAppraisals,
  updateAppraisalCycleStatus,
} from "@/lib/supabase/appraisal-actions";
import PageSkeleton from "./PageSkeleton";

// ── Star Rating Component ──────────────────────────────────────

function StarRating({
  value,
  onChange,
  readonly = false,
  size = "sm",
}: {
  value: number;
  onChange?: (v: number) => void;
  readonly?: boolean;
  size?: "sm" | "md" | "lg";
}) {
  const [hover, setHover] = useState(0);
  const sizeClass = size === "lg" ? "w-7 h-7" : size === "md" ? "w-5 h-5" : "w-4 h-4";

  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((s) => (
        <button
          key={s}
          type="button"
          disabled={readonly}
          className={`${readonly ? "cursor-default" : "cursor-pointer"} transition-transform ${!readonly && "hover:scale-110"}`}
          onClick={() => onChange?.(s)}
          onMouseEnter={() => !readonly && setHover(s)}
          onMouseLeave={() => !readonly && setHover(0)}
        >
          <Star
            className={`${sizeClass} ${
              s <= (hover || value)
                ? "text-amber-400 fill-amber-400"
                : "text-gray-200"
            }`}
          />
        </button>
      ))}
    </div>
  );
}

// ── Status Badge Helpers ───────────────────────────────────────

const CYCLE_STATUS_LABELS: Record<string, string> = {
  draft: "Draft",
  active: "Active",
  completed: "Completed",
};

const CYCLE_STATUS_COLORS: Record<string, string> = {
  draft: "bg-gray-100 text-gray-600 border-gray-200",
  active: "bg-teal-100 text-teal-700 border-teal-200",
  completed: "bg-green-100 text-green-700 border-green-200",
};

// ── Template Builder Modal ─────────────────────────────────────

function TemplateBuilderModal({
  onClose,
  onSuccess,
}: {
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [name, setName] = useState("");
  const [questions, setQuestions] = useState<
    { id: string; question: string; type: string }[]
  >([]);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const addQuestion = () => {
    setQuestions((prev) => [
      ...prev,
      { id: crypto.randomUUID(), question: "", type: "rating" },
    ]);
  };

  const updateQuestion = (id: string, field: string, value: string) => {
    setQuestions((prev) =>
      prev.map((q) => (q.id === id ? { ...q, [field]: value } : q))
    );
  };

  const removeQuestion = (id: string) => {
    setQuestions((prev) => prev.filter((q) => q.id !== id));
  };

  const moveQuestion = (index: number, direction: "up" | "down") => {
    setQuestions((prev) => {
      const arr = [...prev];
      const target = direction === "up" ? index - 1 : index + 1;
      if (target < 0 || target >= arr.length) return prev;
      [arr[index], arr[target]] = [arr[target], arr[index]];
      return arr;
    });
  };

  const handleSave = async () => {
    if (!name.trim()) {
      setError("Template name is required");
      return;
    }
    if (questions.length === 0) {
      setError("Add at least one question");
      return;
    }
    if (questions.some((q) => !q.question.trim())) {
      setError("All questions must have text");
      return;
    }
    setSaving(true);
    setError("");
    const result = await createAppraisalTemplate(
      name.trim(),
      questions.map((q) => ({ ...q, question: q.question.trim() }))
    );
    setSaving(false);
    if (result.success) {
      onSuccess();
    } else {
      setError(result.error || "Failed to create template");
    }
  };

  return (
    <div
      className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">
              New Appraisal Template
            </h2>
            <p className="text-sm text-gray-500 mt-0.5">
              Define questions for this appraisal template
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
          <div>
            <label className="text-sm font-medium text-gray-700">
              Template Name
            </label>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Annual Performance Review 2026"
              className="mt-1"
            />
          </div>

          {/* Questions */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label className="text-sm font-medium text-gray-700">
                Questions ({questions.length})
              </label>
              <Button
                onClick={addQuestion}
                size="sm"
                className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                Add Question
              </Button>
            </div>

            {questions.length === 0 && (
              <div className="text-center py-8 bg-gray-50 rounded-lg border border-dashed border-gray-200">
                <FileText className="w-8 h-8 text-gray-300 mx-auto mb-2" />
                <p className="text-sm text-gray-400">No questions yet</p>
                <p className="text-xs text-gray-300 mt-1">
                  Click &quot;Add Question&quot; to start building your template
                </p>
              </div>
            )}

            <div className="space-y-3">
              {questions.map((q, i) => (
                <div
                  key={q.id}
                  className="p-3 bg-gray-50 rounded-lg border border-gray-100 space-y-2"
                >
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-semibold text-gray-400 w-6">
                      {i + 1}
                    </span>
                    <Input
                      value={q.question}
                      onChange={(e) =>
                        updateQuestion(q.id, "question", e.target.value)
                      }
                      placeholder="Enter question text"
                      className="flex-1"
                    />
                    <Select
                      value={q.type}
                      onChange={(e) =>
                        updateQuestion(q.id, "type", e.target.value)
                      }
                      className="w-28"
                    >
                      <option value="rating">Rating</option>
                      <option value="text">Text</option>
                      <option value="yes_no">Yes / No</option>
                    </Select>
                    <div className="flex flex-col gap-0.5">
                      <button
                        type="button"
                        disabled={i === 0}
                        onClick={() => moveQuestion(i, "up")}
                        className="p-0.5 hover:bg-gray-200 rounded disabled:opacity-30 cursor-pointer"
                      >
                        <ChevronUp className="w-3.5 h-3.5 text-gray-500" />
                      </button>
                      <button
                        type="button"
                        disabled={i === questions.length - 1}
                        onClick={() => moveQuestion(i, "down")}
                        className="p-0.5 hover:bg-gray-200 rounded disabled:opacity-30 cursor-pointer"
                      >
                        <ChevronDown className="w-3.5 h-3.5 text-gray-500" />
                      </button>
                    </div>
                    <button
                      type="button"
                      onClick={() => removeQuestion(q.id)}
                      className="p-1 hover:bg-red-50 rounded cursor-pointer"
                    >
                      <Trash2 className="w-4 h-4 text-red-400" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {error && (
            <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg">
              <AlertCircle className="w-4 h-4 flex-shrink-0" />
              {error}
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-100">
          <Button
            variant="outline"
            onClick={onClose}
            className="cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            onClick={handleSave}
            disabled={saving}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer"
          >
            {saving ? "Saving..." : "Save Template"}
          </Button>
        </div>
      </div>
    </div>
  );
}

// ── New Cycle Modal ────────────────────────────────────────────

function NewCycleModal({
  templates,
  onClose,
  onSuccess,
}: {
  templates: { id: string; name: string }[];
  onClose: () => void;
  onSuccess: () => void;
}) {
  const [name, setName] = useState("");
  const [templateId, setTemplateId] = useState("");
  const [periodStart, setPeriodStart] = useState("");
  const [periodEnd, setPeriodEnd] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  const handleSave = async () => {
    if (!name.trim()) {
      setError("Cycle name is required");
      return;
    }
    if (!periodStart || !periodEnd) {
      setError("Period dates are required");
      return;
    }
    if (periodEnd <= periodStart) {
      setError("End date must be after start date");
      return;
    }
    setSaving(true);
    setError("");
    const result = await createAppraisalCycle({
      name: name.trim(),
      template_id: templateId || undefined,
      period_start: periodStart,
      period_end: periodEnd,
    });
    setSaving(false);
    if (result.success) {
      onSuccess();
    } else {
      setError(result.error || "Failed to create cycle");
    }
  };

  return (
    <div
      className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl shadow-xl w-full max-w-md"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">
              New Appraisal Cycle
            </h2>
            <p className="text-sm text-gray-500 mt-0.5">
              Create a review period and auto-generate appraisals
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <X className="w-5 h-5 text-gray-400" />
          </button>
        </div>

        <div className="px-6 py-4 space-y-4">
          <div>
            <label className="text-sm font-medium text-gray-700">
              Cycle Name
            </label>
            <Input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Q1 2026 Reviews"
              className="mt-1"
            />
          </div>

          <div>
            <label className="text-sm font-medium text-gray-700">
              Template (optional)
            </label>
            <Select
              value={templateId}
              onChange={(e) => setTemplateId(e.target.value)}
              className="mt-1"
            >
              <option value="">No template — blank appraisals</option>
              {templates.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </Select>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-sm font-medium text-gray-700">
                Period Start
              </label>
              <Input
                type="date"
                value={periodStart}
                onChange={(e) => setPeriodStart(e.target.value)}
                className="mt-1"
              />
            </div>
            <div>
              <label className="text-sm font-medium text-gray-700">
                Period End
              </label>
              <Input
                type="date"
                value={periodEnd}
                onChange={(e) => setPeriodEnd(e.target.value)}
                className="mt-1"
              />
            </div>
          </div>

          {error && (
            <div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg">
              <AlertCircle className="w-4 h-4 flex-shrink-0" />
              {error}
            </div>
          )}
        </div>

        <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-gray-100">
          <Button
            variant="outline"
            onClick={onClose}
            className="cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            onClick={handleSave}
            disabled={saving}
            className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer"
          >
            {saving ? "Creating..." : "Create Cycle"}
          </Button>
        </div>
      </div>
    </div>
  );
}

// ── Cycle Detail View ──────────────────────────────────────────

function CycleDetailView({
  cycle,
  onBack,
}: {
  cycle: { id: string; name: string; status: string; period_start: string; period_end: string };
  onBack: () => void;
}) {
  const [appraisals, setAppraisals] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetchCycleAppraisals(cycle.id)
      .then((a) => {
        if (!cancelled) setAppraisals(a);
      })
      .catch(() => {})
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [cycle.id]);

  const handleActivate = async () => {
    const result = await updateAppraisalCycleStatus(cycle.id, "active");
    if (result.success) window.location.reload();
  };

  const handleComplete = async () => {
    const result = await updateAppraisalCycleStatus(cycle.id, "completed");
    if (result.success) window.location.reload();
  };

  if (loading) return <PageSkeleton name="Cycle Details" />;

  const totalAppraisals = appraisals.length;
  const submittedCount = appraisals.filter(
    (a) => a.status === "submitted"
  ).length;
  const completionPct =
    totalAppraisals > 0
      ? Math.round((submittedCount / totalAppraisals) * 100)
      : 0;

  return (
    <div className="space-y-6">
      {/* Back button + header */}
      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div className="flex items-start gap-3">
          <button
            onClick={onBack}
            className="mt-1 p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
          >
            <ArrowLeft className="w-4 h-4 text-gray-500" />
          </button>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-3xl font-serif font-bold text-gray-900">
                {cycle.name}
              </h1>
              <Badge
                variant="outline"
                className={`text-xs border ${
                  CYCLE_STATUS_COLORS[cycle.status] || CYCLE_STATUS_COLORS.draft
                }`}
              >
                {CYCLE_STATUS_LABELS[cycle.status] || cycle.status}
              </Badge>
            </div>
            <p className="text-gray-500 mt-1">
              {new Date(cycle.period_start + "T00:00:00").toLocaleDateString(
                "en-AU",
                { month: "long", day: "numeric", year: "numeric" }
              )}{" "}
              —{" "}
              {new Date(cycle.period_end + "T00:00:00").toLocaleDateString(
                "en-AU",
                { month: "long", day: "numeric", year: "numeric" }
              )}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          {cycle.status === "draft" && (
            <Button
              onClick={handleActivate}
              size="sm"
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
            >
              <Check className="w-3.5 h-3.5" />
              Activate Cycle
            </Button>
          )}
          {cycle.status === "active" && (
            <Button
              onClick={handleComplete}
              size="sm"
              className="bg-green-600 hover:bg-green-700 text-white gap-1.5 cursor-pointer"
            >
              <Check className="w-3.5 h-3.5" />
              Complete Cycle
            </Button>
          )}
        </div>
      </div>

      {/* Progress */}
      <div className="bg-white rounded-lg border border-gray-200 p-4">
        <div className="flex items-center justify-between text-sm mb-2">
          <span className="text-gray-600">
            {submittedCount} of {totalAppraisals} appraisals submitted
          </span>
          <span className="font-semibold text-gray-900">{completionPct}%</span>
        </div>
        <div className="w-full bg-gray-100 rounded-full h-2">
          <div
            className="bg-teal-500 h-2 rounded-full transition-all"
            style={{ width: `${completionPct}%` }}
          />
        </div>
      </div>

      {/* Appraisals Table */}
      {appraisals.length === 0 ? (
        <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
          <Users className="w-8 h-8 text-gray-200 mx-auto mb-3" />
          <p className="text-sm text-gray-400 font-medium">
            No appraisals in this cycle
          </p>
        </div>
      ) : (
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-100">
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                  Employee
                </th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                  Type
                </th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                  Reviewer
                </th>
                <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                  Rating
                </th>
                <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                  Status
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {appraisals.map((a) => (
                <tr
                  key={a.id}
                  className="hover:bg-gray-50/50 transition-colors"
                >
                  <td className="py-3 px-4">
                    <p className="text-sm font-medium text-gray-900">
                      {a.employee
                        ? `${a.employee.first_name} ${a.employee.last_name}`
                        : "Unknown"}
                    </p>
                  </td>
                  <td className="py-3 px-4">
                    <Badge
                      variant="outline"
                      className={`text-xs border ${
                        a.type === "self"
                          ? "bg-blue-50 text-blue-700 border-blue-200"
                          : a.type === "manager"
                          ? "bg-purple-50 text-purple-700 border-purple-200"
                          : "bg-gray-50 text-gray-600 border-gray-200"
                      }`}
                    >
                      {a.type === "self"
                        ? "Self"
                        : a.type === "manager"
                        ? "Manager"
                        : a.type || "Peer"}
                    </Badge>
                  </td>
                  <td className="py-3 px-4 text-sm text-gray-600">
                    {a.reviewer
                      ? `${a.reviewer.first_name} ${a.reviewer.last_name}`
                      : "—"}
                  </td>
                  <td className="py-3 px-4 text-center">
                    {a.overall_rating ? (
                      <div className="flex items-center justify-center gap-0.5">
                        {[1, 2, 3, 4, 5].map((s) => (
                          <Star
                            key={s}
                            className={`w-3.5 h-3.5 ${
                              s <= a.overall_rating
                                ? "text-amber-400 fill-amber-400"
                                : "text-gray-200"
                            }`}
                          />
                        ))}
                        <span className="text-xs text-gray-500 ml-1">
                          {a.overall_rating}/5
                        </span>
                      </div>
                    ) : (
                      <span className="text-xs text-gray-400">—</span>
                    )}
                  </td>
                  <td className="py-3 px-4 text-center">
                    <Badge
                      variant="outline"
                      className={`text-xs border ${
                        a.status === "submitted"
                          ? "bg-green-100 text-green-700 border-green-200"
                          : "bg-gray-100 text-gray-600 border-gray-200"
                      }`}
                    >
                      {a.status === "submitted" ? "Submitted" : "Pending"}
                    </Badge>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ── Main Performance Page ──────────────────────────────────────

export default function PerformancePage() {
  const [activeTab, setActiveTab] = useState<"cycles" | "templates">("cycles");
  const [cycles, setCycles] = useState<any[]>([]);
  const [templates, setTemplates] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [showNewCycleModal, setShowNewCycleModal] = useState(false);
  const [showNewTemplateModal, setShowNewTemplateModal] = useState(false);
  const [selectedCycle, setSelectedCycle] = useState<any>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [c, t] = await Promise.all([
        fetchAppraisalCycles(),
        fetchAppraisalTemplates(),
      ]);
      setCycles(c);
      setTemplates(t);
    } catch {
      // ignore
    }
    setLoading(false);
  }, []);

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

  if (loading) return <PageSkeleton name="360 Appraisals" />;

  // ── Cycle Detail View ──
  if (selectedCycle) {
    return (
      <div className="p-6 lg:p-8">
        <CycleDetailView
          cycle={selectedCycle}
          onBack={() => setSelectedCycle(null)}
        />
      </div>
    );
  }

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Tabs */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">
            360 Appraisals
          </h1>
          <p className="text-gray-500 mt-1">
            Manage appraisal cycles and templates
          </p>
        </div>
        <div className="flex items-center gap-2">
          <div className="inline-flex bg-gray-100 rounded-lg p-0.5">
            <button
              onClick={() => setActiveTab("cycles")}
              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors cursor-pointer ${
                activeTab === "cycles"
                  ? "bg-white text-gray-900 shadow-sm"
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              Cycles
            </button>
            <button
              onClick={() => setActiveTab("templates")}
              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors cursor-pointer ${
                activeTab === "templates"
                  ? "bg-white text-gray-900 shadow-sm"
                  : "text-gray-500 hover:text-gray-700"
              }`}
            >
              Templates
            </button>
          </div>
          {activeTab === "cycles" && (
            <Button
              onClick={() => setShowNewCycleModal(true)}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              New Cycle
            </Button>
          )}
          {activeTab === "templates" && (
            <Button
              onClick={() => setShowNewTemplateModal(true)}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
            >
              <Plus className="w-4 h-4" />
              New Template
            </Button>
          )}
        </div>
      </div>

      {/* ── Cycles Tab ── */}
      {activeTab === "cycles" && (
        <>
          {cycles.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
              <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
                <CalendarDays className="w-8 h-8 text-gray-300" />
              </div>
              <p className="text-sm text-gray-500 font-medium">
                No appraisal cycles yet
              </p>
              <p className="text-xs text-gray-400 mt-1 mb-4">
                Create your first cycle to start 360-degree reviews
              </p>
              <Button
                onClick={() => setShowNewCycleModal(true)}
                size="sm"
                className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                New Cycle
              </Button>
            </div>
          ) : (
            <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-100">
                    <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Cycle Name
                    </th>
                    <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden sm:table-cell">
                      Period
                    </th>
                    <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Appraisals
                    </th>
                    <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden md:table-cell">
                      Completion
                    </th>
                    <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {cycles.map((c) => {
                    const appraisalCount =
                      Array.isArray(c.appraisals) && c.appraisals.length > 0
                        ? c.appraisals[0]?.count || 0
                        : 0;
                    return (
                      <tr
                        key={c.id}
                        className="hover:bg-gray-50/50 transition-colors cursor-pointer"
                        onClick={() => setSelectedCycle(c)}
                      >
                        <td className="py-3 px-4">
                          <p className="text-sm font-medium text-gray-900">
                            {c.name}
                          </p>
                          {c.template && (
                            <p className="text-xs text-gray-400 mt-0.5">
                              {c.template.name}
                            </p>
                          )}
                        </td>
                        <td className="py-3 px-4 text-sm text-gray-500 hidden sm:table-cell">
                          {new Date(
                            c.period_start + "T00:00:00"
                          ).toLocaleDateString("en-AU", {
                            month: "short",
                            year: "numeric",
                          })}{" "}
                          —{" "}
                          {new Date(
                            c.period_end + "T00:00:00"
                          ).toLocaleDateString("en-AU", {
                            month: "short",
                            year: "numeric",
                          })}
                        </td>
                        <td className="py-3 px-4 text-center text-sm text-gray-600">
                          {appraisalCount}
                        </td>
                        <td className="py-3 px-4 hidden md:table-cell">
                          <div className="flex items-center gap-2">
                            <div className="flex-1 bg-gray-100 rounded-full h-1.5">
                              <div
                                className="bg-teal-500 h-1.5 rounded-full"
                                style={{
                                  width: `${
                                    appraisalCount > 0
                                      ? Math.min(
                                          (appraisalCount /
                                            Math.max(appraisalCount, 1)) *
                                            100,
                                          100
                                        )
                                      : 0
                                  }%`,
                                }}
                              />
                            </div>
                          </div>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <Badge
                            variant="outline"
                            className={`text-xs border ${
                              CYCLE_STATUS_COLORS[c.status] ||
                              CYCLE_STATUS_COLORS.draft
                            }`}
                          >
                            {CYCLE_STATUS_LABELS[c.status] || c.status}
                          </Badge>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}

      {/* ── Templates Tab ── */}
      {activeTab === "templates" && (
        <>
          {templates.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
              <div className="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4">
                <FileText className="w-8 h-8 text-gray-300" />
              </div>
              <p className="text-sm text-gray-500 font-medium">
                No appraisal templates yet
              </p>
              <p className="text-xs text-gray-400 mt-1 mb-4">
                Create a template with questions to reuse across cycles
              </p>
              <Button
                onClick={() => setShowNewTemplateModal(true)}
                size="sm"
                className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-1.5 cursor-pointer"
              >
                <Plus className="w-3.5 h-3.5" />
                New Template
              </Button>
            </div>
          ) : (
            <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-100">
                    <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Template Name
                    </th>
                    <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Questions
                    </th>
                    <th className="text-center text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4">
                      Created
                    </th>
                    <th className="w-10"></th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-50">
                  {templates.map((t) => {
                    const questionCount = t.questions
                      ? JSON.parse(t.questions).length
                      : 0;
                    return (
                      <tr
                        key={t.id}
                        className="hover:bg-gray-50/50 transition-colors"
                      >
                        <td className="py-3 px-4">
                          <p className="text-sm font-medium text-gray-900">
                            {t.name}
                          </p>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <span className="text-sm text-gray-600">
                            {questionCount}
                          </span>
                        </td>
                        <td className="py-3 px-4 text-center text-sm text-gray-400">
                          {new Date(t.created_at).toLocaleDateString("en-AU", {
                            month: "short",
                            day: "numeric",
                            year: "numeric",
                          })}
                        </td>
                        <td className="py-3 px-4">
                          <button
                            onClick={async () => {
                              const result = await deleteAppraisalTemplate(
                                t.id
                              );
                              if (result.success) {
                                setTemplates((prev) =>
                                  prev.filter((x) => x.id !== t.id)
                                );
                              }
                            }}
                            className="text-xs text-red-500 hover:underline font-medium cursor-pointer"
                          >
                            Delete
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </>
      )}

      {/* ── Modals ── */}
      {showNewCycleModal && (
        <NewCycleModal
          templates={templates}
          onClose={() => setShowNewCycleModal(false)}
          onSuccess={() => {
            setShowNewCycleModal(false);
            loadData();
          }}
        />
      )}
      {showNewTemplateModal && (
        <TemplateBuilderModal
          onClose={() => setShowNewTemplateModal(false)}
          onSuccess={() => {
            setShowNewTemplateModal(false);
            loadData();
          }}
        />
      )}
    </div>
  );
}