"use client";

import { useEffect, useRef, useState } from "react";
import { Upload, Loader2 } from "lucide-react";
import Shell from "@/components/Shell";
import EditableTable, { Col } from "@/components/EditableTable";
import { TableSkeleton } from "@/components/Skeleton";
import Thumb from "@/components/Thumb";
import { api, getAuth, ASSET_BASE } from "@/lib/api";
import { toastError, toastSuccess } from "@/lib/toast";

type Row = Record<string, unknown>;

const COLS: Col[] = [
  { key: "id", label: "شناسه" },
  { key: "title", label: "عنوان" },
  { key: "price_coins", label: "قیمت (سکه)", type: "number" },
  { key: "vip", label: "VIP رایگان", type: "bool" },
  { key: "sort", label: "ترتیب", type: "number" },
];

const API =
  process.env.NEXT_PUBLIC_API_URL || "https://hakem.approagency.ir/admin/api";

export default function AvatarsPage() {
  const [rows, setRows] = useState<Row[]>([]);
  const [ver, setVer] = useState(1); // تازه‌سازیِ کشِ تصویر پس از آپلود
  const [loading, setLoading] = useState(true);

  async function load() {
    setLoading(true);
    try {
      const r = await api.get<{ avatars: Row[] }>("/avatars");
      setRows(r.avatars || []);
      setVer((v) => v + 1);
    } finally {
      setLoading(false);
    }
  }
  useEffect(() => {
    load();
  }, []);

  return (
    <Shell title="شخصیت‌ها" subtitle="آواتارهای قابلِ خریدِ بازیکن">
      <p className="text-sm text-[#8aa] mb-4">
        شخصیتِ آواتار که کاربر می‌خرد و در کلِ بازی (سرِ میز، پروفایل و لابی) دیده
        می‌شود. ابتدا ردیف را با شناسه و قیمت بسازید، سپس یک تصویرِ{" "}
        <code>png</code> یا <code>svg</code> (ترجیحاً مربع و با پس‌زمینه‌ی شفاف)
        آپلود کنید.
      </p>
      {loading ? (
        <TableSkeleton rows={5} cols={COLS.length} />
      ) : (
      <EditableTable
        cols={COLS}
        rows={rows}
        newTemplate={{ id: "", title: "", price_coins: 0, vip: false, sort: 0 }}
        onSave={async (row) => {
          await api.post("/avatars", row);
          await load();
        }}
        onDelete={async (id) => {
          if (!confirm("حذف شخصیت؟")) return;
          await api.del(`/avatars?id=${encodeURIComponent(id)}`);
          await load();
        }}
        preview={(row) => (
          <Thumb
            src={`${ASSET_BASE}/avatars/${row.id}.${row.img_ext || "png"}?v=${ver}`}
            size={48}
          />
        )}
        extra={(row) => <UploadBtn id={String(row.id)} onDone={load} />}
      />
      )}
    </Shell>
  );
}

function UploadBtn({ id, onDone }: { id: string; onDone: () => void }) {
  const ref = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);

  async function upload(file: File) {
    setBusy(true);
    try {
      const fd = new FormData();
      fd.append("image", file);
      const auth = getAuth();
      const res = await fetch(`${API}/avatars/${encodeURIComponent(id)}/upload`, {
        method: "POST",
        headers: auth ? { Authorization: `Basic ${auth}` } : {},
        body: fd,
      });
      if (!res.ok) throw new Error("آپلود ناموفق بود");
      toastSuccess("تصویر آپلود شد");
      onDone();
    } catch (e) {
      toastError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <>
      <button
        className="btn btn-ghost flex items-center gap-1"
        disabled={busy}
        onClick={() => ref.current?.click()}
        title="آپلود تصویر"
      >
        {busy ? (
          <>
            <Loader2 size={14} className="animate-spin" /> در حال آپلود…
          </>
        ) : (
          <Upload size={14} />
        )}
      </button>
      <input
        ref={ref}
        type="file"
        accept="image/png,image/svg+xml,.svg"
        hidden
        onChange={(e) => {
          const f = e.target.files?.[0];
          if (f) upload(f);
          e.target.value = "";
        }}
      />
    </>
  );
}