import { requireOrg, canConfigure, ROLE_LABEL, type Role } from "@/lib/ctx";
import { redirect } from "next/navigation";
import { saveMeta, addRotator, addNumber, toggleNumber, addProduct, addMember, toggleMember } from "./actions";

type Row = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any

export default async function Settings({ searchParams }: { searchParams: Promise<{ e?: string }> }) {
  const { e } = await searchParams;
  const c = await requireOrg();
  if (!canConfigure(c.role)) redirect("/");
  const isOwner = c.role === "owner";
  const base = (process.env.NEXT_PUBLIC_APP_URL ?? "").replace(/\/$/, "");

  const [connR, rotR, numR, prodR, memR] = await Promise.all([
    c.db.from("meta_connections").select("*").eq("org_id", c.orgId).maybeSingle(),
    c.db.from("rotators").select("id, slug, name, prefilled_template").order("created_at"),
    c.db.from("cs_numbers").select("id, rotator_id, label, wa_number, weight, is_active, assigned_count").order("created_at"),
    c.db.from("products").select("id, name, sku, price").order("name"),
    c.db.from("memberships").select("user_id, role, is_active").order("created_at"),
  ]);
  const conn: Row | null = connR.data;
  const rotators: Row[] = rotR.data ?? [];
  const numbers: Row[] = numR.data ?? [];
  const products: Row[] = prodR.data ?? [];
  const members: Row[] = memR.data ?? [];

  const ids = members.map((m) => m.user_id);
  const { data: people } = ids.length ? await c.db.from("profiles").select("id, full_name").in("id", ids) : { data: [] as Row[] };
  const nameOf = new Map<string, string>((people ?? []).map((p: Row) => [p.id, p.full_name ?? "-"]));
  const csUsers = members.filter((m) => m.is_active && ["cs", "cs_supervisor"].includes(m.role));

  return (
    <>
      <h1>Pengaturan</h1>
      {e && <div className="alert">{e}</div>}

      <div className="card">
        <h2>Koneksi Meta (Conversions API)</h2>
        <form action={saveMeta}>
          <div className="row fill">
            <div><label>Dataset ID (sama dengan Pixel ID di LP)</label><input name="dataset_id" defaultValue={conn?.dataset_id ?? ""} required /></div>
            <div><label>Test Event Code (kosongkan saat live)</label><input name="test_event_code" defaultValue={conn?.test_event_code ?? ""} placeholder="TEST12345" /></div>
            <div><label>Mata uang</label><input name="currency" defaultValue={conn?.currency ?? "IDR"} maxLength={3} /></div>
          </div>
          <label>Access token CAPI {conn?.capi_token_secret_id ? "(tersimpan; isi hanya untuk mengganti)" : "(belum diisi)"}</label>
          <input name="token" type="password" autoComplete="off" />
          <label><input type="checkbox" name="backfill" defaultChecked={Boolean(conn?.backfill_missed_stages)} /> Isi otomatis tahap yang terlewat (backfill). Default mati.</label>
          <p><button className="btn">Simpan</button></p>
        </form>
      </div>

      <div className="card">
        <h2>Rotator WhatsApp</h2>
        {rotators.map((r) => (
          <div key={r.id} style={{ marginBottom: 16 }}>
            <b>{r.name}</b> <span className="muted">· URL: {base}/r/{r.slug}</span>
            <div className="muted">Template: {r.prefilled_template}</div>
            <div className="scroll">
              <table>
                <thead><tr><th>Nomor CS</th><th>Bobot</th><th>Chat diterima</th><th></th></tr></thead>
                <tbody>
                  {numbers.filter((n) => n.rotator_id === r.id).map((n) => (
                    <tr key={n.id}>
                      <td>{n.label} <span className="muted">({n.wa_number})</span></td>
                      <td>{n.weight}</td><td>{n.assigned_count}</td>
                      <td>
                        <form action={toggleNumber}>
                          <input type="hidden" name="id" value={n.id} />
                          <input type="hidden" name="active" value={n.is_active ? "0" : "1"} />
                          <button className={`btn ${n.is_active ? "ghost" : ""}`}>{n.is_active ? "Nonaktifkan" : "Aktifkan"}</button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <form action={addNumber} className="row fill">
              <input type="hidden" name="rotator_id" value={r.id} />
              <input name="label" placeholder="Label (mis. CS Ayu)" />
              <input name="wa_number" placeholder="Nomor WA 0812…" required />
              <input name="weight" placeholder="Bobot (1)" inputMode="numeric" />
              <select name="user_id" defaultValue="">
                <option value="">CS pemegang (opsional)</option>
                {csUsers.map((m) => <option key={m.user_id} value={m.user_id}>{nameOf.get(m.user_id)}</option>)}
              </select>
              <button className="btn ghost">Tambah nomor</button>
            </form>
          </div>
        ))}
        <form action={addRotator} className="row fill">
          <input name="slug" placeholder="slug-rotator" required />
          <input name="name" placeholder="Nama rotator" />
          <input name="template" placeholder="Halo, saya mau tanya produknya. Ref: {ref}" />
          <button className="btn">Buat rotator</button>
        </form>
        <p className="muted">Template wajib memuat {"{ref}"} agar klik iklan bisa dicocokkan dengan chat.</p>
      </div>

      <div className="card">
        <h2>Produk</h2>
        <div className="scroll">
          <table>
            <tbody>
              {products.map((p) => <tr key={p.id}><td>{p.name}</td><td className="muted">{p.sku}</td><td>{p.price ? Number(p.price).toLocaleString("id-ID") : ""}</td></tr>)}
              {!products.length && <tr><td className="muted">Belum ada produk.</td></tr>}
            </tbody>
          </table>
        </div>
        <form action={addProduct} className="row fill">
          <input name="name" placeholder="Nama produk" required />
          <input name="sku" placeholder="SKU (opsional)" />
          <input name="price" placeholder="Harga" inputMode="numeric" />
          <button className="btn ghost">Tambah</button>
        </form>
      </div>

      <div className="card">
        <h2>Tim &amp; role</h2>
        <div className="scroll">
          <table>
            <tbody>
              {members.map((m) => (
                <tr key={m.user_id}>
                  <td>{nameOf.get(m.user_id)}</td>
                  <td>{ROLE_LABEL[m.role as Role]}</td>
                  <td className={m.is_active ? "ok" : "muted"}>{m.is_active ? "aktif" : "nonaktif"}</td>
                  <td>
                    {isOwner && m.user_id !== c.user.id && (
                      <form action={toggleMember}>
                        <input type="hidden" name="user_id" value={m.user_id} />
                        <input type="hidden" name="active" value={m.is_active ? "0" : "1"} />
                        <button className="btn ghost">{m.is_active ? "Nonaktifkan" : "Aktifkan"}</button>
                      </form>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {isOwner && (
          <form action={addMember} className="row fill">
            <input name="full_name" placeholder="Nama" />
            <input name="email" type="email" placeholder="Email" required />
            <input name="password" type="text" placeholder="Password awal (min. 8)" required />
            <select name="role" defaultValue="cs">
              {(Object.keys(ROLE_LABEL) as Role[]).map((r) => <option key={r} value={r}>{ROLE_LABEL[r]}</option>)}
            </select>
            <button className="btn">Tambah user</button>
          </form>
        )}
      </div>
    </>
  );
}