"use client";

import { useCallback, useEffect, useState } from "react";
import Image from "next/image";
import { ImageIcon, Plus, Trash2, ExternalLink } from "lucide-react";
import { api } from "@/lib/api";
import { PageHeader, Card, Button, Badge, FormField, Input, Select, EmptyState, Skeleton } from "@/components/ui";
import { Modal, useConfirm } from "@/components/modal";
import { useToast } from "@/components/toast";

type Asset = { id: string; type: string; title: string; url: string; category: string | null; date: string };
const emptyForm = { type: "IMAGE", title: "", url: "", category: "" };

export default function DigitalAssetsPage() {
  const toast = useToast();
  const confirm = useConfirm();
  const [rows, setRows] = useState<Asset[]>([]);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState(emptyForm);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setRows(await api.get("/admin/assets"));
    } finally {
      setLoading(false);
    }
  }, []);

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

  const create = async () => {
    const e: Record<string, string> = {};
    if (!form.title.trim()) e.title = "Title is required.";
    if (!/^https?:\/\//.test(form.url)) e.url = "Enter a full URL (https://…).";
    setErrors(e);
    if (Object.keys(e).length) return;
    setSaving(true);
    try {
      await api.post("/admin/assets", form);
      toast.success("Asset added.");
      setForm(emptyForm);
      setOpen(false);
      load();
    } catch (err) {
      toast.error((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const remove = async (a: Asset) => {
    if (!(await confirm({ title: `Delete “${a.title}”?`, tone: "danger", confirmText: "Delete" }))) return;
    try {
      await api.del(`/admin/assets/${a.id}`);
      toast.info("Asset deleted.");
      load();
    } catch (e) {
      toast.error((e as Error).message);
    }
  };

  const isImage = (a: Asset) => a.type === "IMAGE" || a.type === "BANNER";

  return (
    <div>
      <PageHeader
        title="Digital Assets"
        subtitle="Banners & images your affiliates can use"
        actions={<Button icon={<Plus className="h-4 w-4" />} onClick={() => setOpen(true)}>Add asset</Button>}
      />

      {loading ? (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><Skeleton className="h-48" /><Skeleton className="h-48" /><Skeleton className="h-48" /></div>
      ) : rows.length === 0 ? (
        <Card><EmptyState icon={<ImageIcon className="h-6 w-6" />} title="No assets yet" description="Add banners, images or links your affiliates can share." action={<Button size="sm" icon={<Plus className="h-4 w-4" />} onClick={() => setOpen(true)}>Add asset</Button>} /></Card>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {rows.map((a) => (
            <div key={a.id} className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
              <div className="flex h-36 items-center justify-center bg-gray-50">
                {isImage(a) ? (
                  <Image src={a.url} alt={a.title} width={320} height={144} className="h-full w-full object-cover" unoptimized />
                ) : (
                  <ExternalLink className="h-8 w-8 text-gray-300" />
                )}
              </div>
              <div className="p-3">
                <div className="flex items-start justify-between gap-2">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-gray-900">{a.title}</p>
                    <p className="text-xs text-gray-400">{a.category || a.type}</p>
                  </div>
                  <Badge tone="neutral">{a.type}</Badge>
                </div>
                <div className="mt-3 flex items-center justify-between">
                  <a href={a.url} target="_blank" className="text-xs text-[var(--brand)] hover:underline">Open ↗</a>
                  <button onClick={() => remove(a)} className="text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Add digital asset"
        footer={<><Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button><Button onClick={create} loading={saving}>Add asset</Button></>}
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <FormField label="Title" required error={errors.title}>
            <Input error={!!errors.title} value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} placeholder="Summer sale banner" />
          </FormField>
          <FormField label="Type">
            <Select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
              <option value="IMAGE">Image</option>
              <option value="BANNER">Banner</option>
              <option value="LINK">Link</option>
              <option value="FILE">File</option>
            </Select>
          </FormField>
          <div className="sm:col-span-2">
            <FormField label="URL" required error={errors.url} hint="Link to the image/file (hosted anywhere)">
              <Input error={!!errors.url} value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} placeholder="https://…/banner.jpg" />
            </FormField>
          </div>
          <div className="sm:col-span-2">
            <FormField label="Category (optional)">
              <Input value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder="Social media" />
            </FormField>
          </div>
        </div>
      </Modal>
    </div>
  );
}