"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import Image from "next/image";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { Upload, X, Loader2, Pencil, Check, LayoutTemplate } from "lucide-react";

interface SketchTemplate {
  id: string;
  name: string;
  fileUrl: string;
  fileName: string;
  sortOrder: number;
}

export function SketchTemplatesSection() {
  const { toast } = useToast();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [templates, setTemplates] = useState<SketchTemplate[]>([]);
  const [loading, setLoading] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [pendingName, setPendingName] = useState("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editName, setEditName] = useState("");

  const fetchTemplates = useCallback(async () => {
    try {
      const res = await fetch("/api/sketch-templates");
      if (res.ok) {
        const data = await res.json();
        setTemplates(data.templates);
      }
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    try {
      const fd = new FormData();
      fd.append("file", file);
      if (pendingName.trim()) fd.append("name", pendingName.trim());
      const res = await fetch("/api/sketch-templates", { method: "POST", body: fd });
      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.error ?? "Upload failed");
      }
      const { template } = await res.json();
      setTemplates((prev) => [...prev, template]);
      setPendingName("");
    } catch (err) {
      toast({ title: "Upload failed", description: err instanceof Error ? err.message : undefined, variant: "destructive" });
    } finally {
      setUploading(false);
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  };

  const handleDelete = async (id: string) => {
    try {
      const res = await fetch(`/api/sketch-templates/${id}`, { method: "DELETE" });
      if (!res.ok) throw new Error("Delete failed");
      setTemplates((prev) => prev.filter((t) => t.id !== id));
    } catch {
      toast({ title: "Failed to delete template", variant: "destructive" });
    }
  };

  const startEdit = (t: SketchTemplate) => {
    setEditingId(t.id);
    setEditName(t.name);
  };

  const saveEdit = async (id: string) => {
    if (!editName.trim()) return;
    try {
      const res = await fetch(`/api/sketch-templates/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: editName }),
      });
      if (!res.ok) throw new Error("Rename failed");
      setTemplates((prev) => prev.map((t) => t.id === id ? { ...t, name: editName.trim() } : t));
    } catch {
      toast({ title: "Failed to rename template", variant: "destructive" });
    } finally {
      setEditingId(null);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 text-sm font-semibold text-zinc-300">
        <LayoutTemplate className="h-4 w-4 text-amber-500" />
        Sketch Templates
      </div>
      <Separator />
      <p className="text-xs text-muted-foreground">
        Upload background images (body diagrams, scene layouts, storyboard frames, etc.) that artists can load as a canvas background when sketching on a take.
      </p>

      {loading ? (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading…
        </div>
      ) : (
        <>
          {/* Template grid */}
          {templates.length > 0 && (
            <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
              {templates.map((t) => (
                <div key={t.id} className="group relative rounded-lg border border-border overflow-hidden bg-zinc-900">
                  <div className="relative aspect-[4/3]">
                    <Image
                      src={t.fileUrl}
                      alt={t.name}
                      fill
                      className="object-cover"
                      sizes="180px"
                    />
                  </div>
                  <div className="px-2 py-1.5 flex items-center gap-1">
                    {editingId === t.id ? (
                      <>
                        <Input
                          value={editName}
                          onChange={(e) => setEditName(e.target.value)}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") saveEdit(t.id);
                            if (e.key === "Escape") setEditingId(null);
                          }}
                          className="h-6 text-xs px-1 bg-zinc-800 border-zinc-600"
                          autoFocus
                        />
                        <button onClick={() => saveEdit(t.id)} className="shrink-0 text-green-400 hover:text-green-300">
                          <Check className="h-3.5 w-3.5" />
                        </button>
                      </>
                    ) : (
                      <>
                        <span className="flex-1 text-[11px] text-zinc-300 truncate">{t.name}</span>
                        <button onClick={() => startEdit(t)} className="shrink-0 text-zinc-600 hover:text-zinc-300 opacity-0 group-hover:opacity-100 transition-opacity">
                          <Pencil className="h-3 w-3" />
                        </button>
                        <button onClick={() => handleDelete(t.id)} className="shrink-0 text-zinc-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity">
                          <X className="h-3 w-3" />
                        </button>
                      </>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* Upload */}
          <div className="flex items-center gap-2 flex-wrap">
            <Input
              placeholder="Template name (optional)"
              value={pendingName}
              onChange={(e) => setPendingName(e.target.value)}
              className="h-8 text-sm max-w-[200px]"
            />
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={uploading}
              onClick={() => fileInputRef.current?.click()}
            >
              {uploading ? <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> : <Upload className="h-3.5 w-3.5 mr-1.5" />}
              {uploading ? "Uploading…" : "Upload Template"}
            </Button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              className="hidden"
              onChange={handleUpload}
            />
          </div>

          {templates.length === 0 && (
            <p className="text-xs text-zinc-600">No templates yet.</p>
          )}
        </>
      )}
    </div>
  );
}