"use client";

import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { Loader2 as Loader, Trash2, Pencil } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";
import { Input, Label } from "@/components/ui/input";

type Tag = { id: string; name: string; color: string; _count?: { contacts?: number } };

export default function TagsPage() {
  const [tags, setTags] = useState<Tag[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [editing, setEditing] = useState<Tag | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch("/api/tags");
    const j = await res.json().catch(() => ({}));
    if (res.ok) setTags(j.tags ?? []);
    else toast.error(j.error ?? "Failed to load tags.");
    setLoading(false);
  }, []);

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

  async function create(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(e.currentTarget).entries()) data[k] = String(v);
    const res = await fetch("/api/tags", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    const j = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) return toast.error(j.error ?? "Create failed.");
    toast.success("Tag created.");
    e.currentTarget.reset();
    load();
  }

  async function saveEdit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!editing) return;
    setSaving(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(e.currentTarget).entries()) data[k] = String(v);
    const res = await fetch("/api/tags", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ tagId: editing.id, name: data.name, color: data.color }),
    });
    const j = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) return toast.error(j.error ?? "Update failed.");
    toast.success("Tag updated.");
    setEditing(null);
    load();
  }

  async function remove(t: Tag) {
    const res = await fetch("/api/tags", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ tagId: t.id }),
    });
    if (!res.ok) return toast.error("Delete failed.");
    toast.success("Tag deleted.");
    load();
  }

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>{editing ? "Edit tag" : "New tag"}</CardTitle>
        </CardHeader>
        <CardBody>
          {editing && (
            <p className="mb-3 text-xs text-muted-foreground">
              Editing <strong>{editing.name}</strong> —{" "}
              <button className="text-indigo-600 hover:underline" onClick={() => setEditing(null)}>
                cancel
              </button>
            </p>
          )}
          <form onSubmit={editing ? saveEdit : create} className="space-y-4">
            <div>
              <Label>Name</Label>
              <Input name="name" defaultValue={editing?.name ?? ""} placeholder="e.g. VIP customer" required />
            </div>
            <div>
              <Label>Color</Label>
              <input
                type="color"
                name="color"
                defaultValue={editing?.color ?? "#6366f1"}
                className="h-10 w-16 cursor-pointer rounded-lg border border-zinc-300"
              />
            </div>
            <div className="flex justify-end">
              <Button type="submit" loading={saving}>
                {editing ? "Save changes" : "Create tag"}
              </Button>
            </div>
          </form>
        </CardBody>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>All tags</CardTitle>
        </CardHeader>
        <CardBody>
          {loading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader className="h-4 w-4 animate-spin" /> Loading…
            </div>
          ) : tags.length === 0 ? (
            <p className="text-sm text-muted-foreground">No tags yet.</p>
          ) : (
            <div className="space-y-2">
              {tags.map((t) => (
                <div key={t.id} className="flex items-center gap-3 rounded-lg border border-border px-4 py-3">
                  <span
                    className="h-3.5 w-3.5 rounded-full"
                    style={{ backgroundColor: t.color }}
                  />
                  <span className="flex-1 text-sm font-medium text-foreground">{t.name}</span>
                  <span className="text-xs text-muted-foreground">{t._count?.contacts ?? 0} contacts</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-7 w-7 text-muted-foreground"
                    onClick={() => setEditing(t)}
                  >
                    <Pencil className="h-3.5 w-3.5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-7 w-7 text-muted-foreground hover:text-red-600"
                    onClick={() => remove(t)}
                  >
                    <Trash2 className="h-3.5 w-3.5" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </CardBody>
      </Card>
    </div>
  );
}