import {
  createCategory,
  createValue,
  deleteCategory,
  deleteValue,
} from "@/actions/admin-rare-values";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

const CURRENCY_TYPES = ["diamonds", "credits", "duckets", "points"];

export default async function AdminRareValues() {
  let categories: Awaited<ReturnType<typeof prisma.websiteRareValueCategories.findMany>> = [];
  try {
    categories = await prisma.websiteRareValueCategories.findMany({
      orderBy: [{ priority: "asc" }, { name: "asc" }],
    });
  } catch {
    categories = [];
  }

  let values: Awaited<ReturnType<typeof prisma.websiteRareValues.findMany>> = [];
  try {
    values = await prisma.websiteRareValues.findMany({
      orderBy: { name: "asc" },
    });
  } catch {
    values = [];
  }

  const valuesByCategory = new Map<string, typeof values>();
  for (const v of values) {
    const key = String(v.categoryId);
    const list = valuesByCategory.get(key);
    if (list) list.push(v);
    else valuesByCategory.set(key, [v]);
  }

  return (
    <main>
      <h1>Rare Values</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Catalog of rare furni and their trade values, grouped by category. Each category is
        rendered as a tab on the public rare values page.
      </p>

      <div className="admin-stats">
        <StatusCard label="Categories" value={categories.length} icon="🗂️" />
        <StatusCard label="Rare items" value={values.length} icon="💎" />
      </div>

      <form action={createCategory} className="card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>New category</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="name" placeholder="Category name" required style={{ flex: 1, minWidth: 160 }} />
          <input name="badge" placeholder="Badge code" required />
          <input name="priority" type="number" min={1} defaultValue={1} placeholder="Priority" style={{ width: 110 }} />
          <button type="submit" className="btn btn-primary">Add category</button>
        </div>
      </form>

      {categories.length === 0 ? (
        <p className="muted">No categories yet. Add one above to start.</p>
      ) : null}

      <div className="grid">
        {categories.map((cat) => {
          const catId = String(cat.id);
          const rows = valuesByCategory.get(catId) ?? [];
          return (
            <div key={catId} className="card">
              <div
                style={{
                  display: "flex",
                  gap: "0.75rem",
                  alignItems: "baseline",
                  justifyContent: "space-between",
                  flexWrap: "wrap",
                }}
              >
                <div style={{ display: "flex", gap: "0.6rem", alignItems: "baseline", flexWrap: "wrap" }}>
                  <strong>{cat.name}</strong>
                  <span className="admin-badge">badge {cat.badge}</span>
                  <span className="admin-badge">priority {cat.priority}</span>
                  <span className="muted">{rows.length} item{rows.length === 1 ? "" : "s"}</span>
                </div>
                <form action={deleteCategory}>
                  <input type="hidden" name="id" value={catId} />
                  <button type="submit" className="btn btn-danger">Delete category</button>
                </form>
              </div>

              <table style={{ marginTop: "0.75rem" }}>
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Item ID</th>
                    <th>Credit value</th>
                    <th>Currency value</th>
                    <th>Currency</th>
                    <th>Icon</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {rows.map((v) => (
                    <tr key={String(v.id)}>
                      <td>{v.name}</td>
                      <td className="muted">{v.itemId ?? "—"}</td>
                      <td>{v.creditValue ?? "—"}</td>
                      <td>{v.currencyValue ?? "—"}</td>
                      <td>
                        <span className="admin-badge">{v.currencyType}</span>
                      </td>
                      <td className="muted">{v.furnitureIcon}</td>
                      <td>
                        <form action={deleteValue}>
                          <input type="hidden" name="id" value={String(v.id)} />
                          <button type="submit" className="btn btn-danger">✕</button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {rows.length === 0 ? (
                <p className="muted" style={{ margin: "0.5rem 0 0" }}>
                  No values in this category yet.
                </p>
              ) : null}

              <form action={createValue} style={{ marginTop: "0.75rem" }}>
                <input type="hidden" name="categoryId" value={catId} />
                <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
                  <input name="name" placeholder="Item name" required style={{ flex: 1, minWidth: 140 }} />
                  <input name="itemId" type="number" min={1} placeholder="Item ID" style={{ width: 110 }} />
                  <input name="furnitureIcon" placeholder="Furniture icon" required style={{ minWidth: 140 }} />
                  <input name="creditValue" placeholder="Credit value" style={{ width: 130 }} />
                  <input name="currencyValue" placeholder="Currency value" style={{ width: 130 }} />
                  <select name="currencyType" defaultValue="diamonds">
                    {CURRENCY_TYPES.map((c) => (
                      <option key={c} value={c}>{c}</option>
                    ))}
                  </select>
                  <button type="submit" className="btn btn-primary">Add value</button>
                </div>
              </form>
            </div>
          );
        })}
      </div>
    </main>
  );
}