"use client";

import { useState, useEffect } from "react";
import { Plus, FileText, Star } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchPerformanceReviews,
  deletePerformanceReview,
} from "@/lib/supabase/performance-actions";
import type { PerformanceReview } from "@/lib/supabase/performance-types";
import PageSkeleton from "./PageSkeleton";

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

const REVIEW_STATUS_COLORS: Record<string, string> = {
  draft: "bg-gray-100 text-gray-600 border-gray-200",
  completed: "bg-emerald-100 text-emerald-700 border-emerald-200",
};

const RATING_LABELS: Record<number, string> = {
  1: "Below expectations",
  2: "Needs improvement",
  3: "Meets expectations",
  4: "Exceeds expectations",
  5: "Outstanding",
};

export default function PerformanceListPage({ onNew }: { onNew: () => void }) {
  const [reviews, setReviews] = useState<PerformanceReview[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetchPerformanceReviews()
      .then((r) => { if (!cancelled) setReviews(r); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const handleDelete = async (id: string) => {
    const result = await deletePerformanceReview(id);
    if (result.success) setReviews((prev) => prev.filter((r) => r.id !== id));
  };

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

  return (
    <div className="p-6 lg:p-8 space-y-6">
      <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">Performance</h1>
          <p className="text-gray-500 mt-1">Review cycles and employee feedback</p>
        </div>
        <Button onClick={onNew} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
          <Plus className="w-4 h-4" />
          New Review
        </Button>
      </div>

      {reviews.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">
            <Star className="w-8 h-8 text-gray-300" />
          </div>
          <p className="text-sm text-gray-500 font-medium">No performance reviews yet</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">Create your first review cycle to get started</p>
          <Button onClick={onNew} size="sm" className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Plus className="w-3.5 h-3.5" />
            New Review
          </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">Employee</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden sm:table-cell">Reviewer</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden md:table-cell">Period</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>
                <th className="w-10"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {reviews.map((r) => (
                <tr key={r.id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="py-3 px-4">
                    <p className="text-sm font-medium text-gray-900">{r.employee_name}</p>
                  </td>
                  <td className="py-3 px-4 text-sm text-gray-600 hidden sm:table-cell">{r.reviewer_name}</td>
                  <td className="py-3 px-4 text-sm text-gray-500 hidden md:table-cell">
                    {new Date(r.period_start + "T00:00:00").toLocaleDateString("en-AU", { month: "short", year: "numeric" })} — {new Date(r.period_end + "T00:00:00").toLocaleDateString("en-AU", { month: "short", year: "numeric" })}
                  </td>
                  <td className="py-3 px-4 text-center">
                    {r.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 <= r.overall_rating! ? "text-amber-400 fill-amber-400" : "text-gray-200"}`} />
                        ))}
                        <span className="text-xs text-gray-500 ml-1">{r.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 ${REVIEW_STATUS_COLORS[r.status] || REVIEW_STATUS_COLORS.draft}`}>
                      {REVIEW_STATUS_LABELS[r.status] || r.status}
                    </Badge>
                  </td>
                  <td className="py-3 px-4">
                    {r.status === "draft" && (
                      <button onClick={() => handleDelete(r.id)} className="text-xs text-red-500 hover:underline font-medium cursor-pointer">
                        Delete
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}