"use client";

import { useState, useEffect } from "react";
import { Upload, FileText, Trash2, Download, Plus, Filter } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchDocuments,
  deleteDocument,
  getDocumentDownloadUrl,
} from "@/lib/supabase/documents-actions";
import PageSkeleton from "./PageSkeleton";

const CATEGORY_LABELS: Record<string, string> = {
  contract: "Contract",
  tax_form: "Tax Form",
  id_document: "ID Document",
  certificate: "Certificate",
  policy: "Policy",
  general: "General",
};

const CATEGORY_COLORS: Record<string, string> = {
  contract: "bg-blue-100 text-blue-700 border-blue-200",
  tax_form: "bg-amber-100 text-amber-700 border-amber-200",
  id_document: "bg-purple-100 text-purple-700 border-purple-200",
  certificate: "bg-emerald-100 text-emerald-700 border-emerald-200",
  policy: "bg-gray-100 text-gray-700 border-gray-200",
  general: "bg-teal-100 text-teal-700 border-teal-200",
};

function formatFileSize(bytes: number | null): string {
  if (!bytes) return "—";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function formatDateShort(dateStr: string): string {
  const d = new Date(dateStr);
  return d.toLocaleDateString("en-AU", { day: "numeric", month: "short", year: "numeric" });
}

const CATEGORY_TABS = [
  { label: "All", value: "all" },
  { label: "Contracts", value: "contract" },
  { label: "Tax Forms", value: "tax_form" },
  { label: "ID Documents", value: "id_document" },
  { label: "Certificates", value: "certificate" },
  { label: "Policies", value: "policy" },
  { label: "General", value: "general" },
];

export default function DocumentsListPage({ onUpload }: { onUpload: () => void }) {
  const [documents, setDocuments] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeCategory, setActiveCategory] = useState("all");
  const [downloadingId, setDownloadingId] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchDocuments(activeCategory === "all" ? undefined : activeCategory)
      .then((docs) => { if (!cancelled) setDocuments(docs); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [activeCategory]);

  const handleDelete = async (id: string) => {
    const result = await deleteDocument(id);
    if (result.success) setDocuments((prev) => prev.filter((d) => d.id !== id));
  };

  const handleDownload = async (id: string) => {
    setDownloadingId(id);
    const { url, error } = await getDocumentDownloadUrl(id);
    if (!error && url) {
      const a = document.createElement("a");
      a.href = url;
      a.download = "";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
    setDownloadingId(null);
  };

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

  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>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Documents</h1>
          <p className="text-gray-500 mt-1">Store contracts, tax forms, and HR documents</p>
        </div>
        <Button onClick={onUpload} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
          <Upload className="w-4 h-4" />
          Upload Document
        </Button>
      </div>

      {/* Category tabs */}
      <div className="flex items-center gap-1 overflow-x-auto border-b border-gray-200">
        {CATEGORY_TABS.map((tab) => (
          <button
            key={tab.value}
            onClick={() => setActiveCategory(tab.value)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap cursor-pointer ${
              activeCategory === tab.value
                ? "border-[#1D9E75] text-[#1D9E75]"
                : "border-transparent text-gray-500 hover:text-gray-700"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Document list */}
      {documents.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 documents yet</p>
          <p className="text-xs text-gray-400 mt-1 mb-4">Upload your first document to get started</p>
          <Button onClick={onUpload} size="sm" className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Plus className="w-3.5 h-3.5" />
            Upload Document
          </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">Name</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden md:table-cell">Category</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden lg:table-cell">Employee</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden sm:table-cell">Size</th>
                <th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider py-3 px-4 hidden sm:table-cell">Date</th>
                <th className="w-24"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {documents.map((doc) => (
                <tr key={doc.id} className="hover:bg-gray-50/50 transition-colors">
                  <td className="py-3 px-4">
                    <div className="flex items-center gap-2">
                      <FileText className="w-4 h-4 text-gray-400 flex-shrink-0" />
                      <span className="text-sm font-medium text-gray-900 truncate max-w-[200px]">{doc.name}</span>
                    </div>
                  </td>
                  <td className="py-3 px-4 hidden md:table-cell">
                    <Badge variant="outline" className={`text-xs border ${CATEGORY_COLORS[doc.category] || CATEGORY_COLORS.general}`}>
                      {CATEGORY_LABELS[doc.category] || doc.category}
                    </Badge>
                  </td>
                  <td className="py-3 px-4 text-sm text-gray-600 hidden lg:table-cell">{doc.employee_name || "—"}</td>
                  <td className="py-3 px-4 text-sm text-gray-500 hidden sm:table-cell">{formatFileSize(doc.file_size_bytes)}</td>
                  <td className="py-3 px-4 text-sm text-gray-500 hidden sm:table-cell">{formatDateShort(doc.created_at)}</td>
                  <td className="py-3 px-4">
                    <div className="flex items-center gap-1">
                      <button
                        onClick={() => handleDownload(doc.id)}
                        disabled={downloadingId === doc.id}
                        className="p-1.5 text-gray-400 hover:text-teal-600 hover:bg-teal-50 rounded transition-colors cursor-pointer disabled:opacity-50"
                        title="Download"
                      >
                        <Download className="w-4 h-4" />
                      </button>
                      <button
                        onClick={() => handleDelete(doc.id)}
                        className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors cursor-pointer"
                        title="Delete"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}