"use client";

import { useState, useRef, useEffect } from "react";
import { ArrowLeft, Upload, Loader2, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { uploadDocument } from "@/lib/supabase/documents-actions";
import { fetchEmployees } from "@/lib/supabase/employees-actions";

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

export default function DocumentsUploadPage({
  onBack,
  onSuccess,
}: {
  onBack: () => void;
  onSuccess: () => void;
}) {
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [employees, setEmployees] = useState<any[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [name, setName] = useState("");
  const [category, setCategory] = useState("general");
  const [employeeId, setEmployeeId] = useState("");
  const [file, setFile] = useState<File | null>(null);
  const [dragOver, setDragOver] = useState(false);

  useEffect(() => {
    fetchEmployees().then(setEmployees).catch(() => {});
  }, []);

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setDragOver(false);
    if (e.dataTransfer.files.length > 0) {
      setFile(e.dataTransfer.files[0]);
      if (!name) setName(e.dataTransfer.files[0].name);
    }
  };

  const handleSubmit = async () => {
    setError(null);
    if (!file) { setError("Select a file to upload"); return; }
    if (!name.trim()) { setError("Enter a document name"); return; }

    setSaving(true);
    try {
      const result = await uploadDocument({
        name: name.trim(),
        category,
        employee_id: employeeId || null,
        file,
      });
      if (!result.success) { setError(result.error || "Upload failed"); return; }
      onSuccess();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="p-6 lg:p-8 space-y-6">
      <div className="flex items-center gap-4">
        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
          <ArrowLeft className="w-5 h-5 text-gray-500" />
        </button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Upload Document</h1>
          <p className="text-gray-500 mt-1">Add a document to your organisation's library</p>
        </div>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      )}

      <Card className="border-0 shadow-sm">
        <CardContent className="p-6 space-y-5">
          {/* File drop zone */}
          <div
            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
            onDragLeave={() => setDragOver(false)}
            onDrop={handleDrop}
            onClick={() => fileInputRef.current?.click()}
            className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
              dragOver ? "border-[#1D9E75] bg-teal-50" : "border-gray-200 hover:border-gray-300"
            }`}
          >
            {file ? (
              <div className="flex flex-col items-center gap-2">
                <FileText className="w-8 h-8 text-[#1D9E75]" />
                <p className="text-sm font-medium text-gray-900">{file.name}</p>
                <p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
                <p className="text-xs text-teal-600">Click to change file</p>
              </div>
            ) : (
              <div className="flex flex-col items-center gap-2">
                <Upload className="w-8 h-8 text-gray-300" />
                <p className="text-sm text-gray-500">Drag & drop a file here, or click to browse</p>
                <p className="text-xs text-gray-400">Max 50 MB</p>
              </div>
            )}
            <input
              ref={fileInputRef}
              type="file"
              onChange={(e) => {
                if (e.target.files?.[0]) {
                  setFile(e.target.files[0]);
                  if (!name) setName(e.target.files[0].name);
                }
              }}
              className="hidden"
            />
          </div>

          <div>
            <Label htmlFor="docName">Document Name *</Label>
            <Input id="docName" value={name} onChange={(e) => setName(e.target.value)} className="mt-1" placeholder="e.g. Employment Contract — John Smith" />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="docCategory">Category</Label>
              <select
                id="docCategory"
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              >
                {Object.entries(CATEGORY_LABELS).map(([key, label]) => (
                  <option key={key} value={key}>{label}</option>
                ))}
              </select>
            </div>
            <div>
              <Label htmlFor="docEmployee">Employee (optional)</Label>
              <select
                id="docEmployee"
                value={employeeId}
                onChange={(e) => setEmployeeId(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              >
                <option value="">No employee link</option>
                {employees.map((emp) => (
                  <option key={emp.id} value={emp.id}>{emp.first_name} {emp.last_name}</option>
                ))}
              </select>
            </div>
          </div>

          <div className="flex justify-end pt-4 border-t border-gray-100">
            <Button onClick={handleSubmit} disabled={saving} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
              {saving ? "Uploading..." : "Upload"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}