"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import AppShell, { Me } from "@/components/AppShell";
import MessageThread from "@/components/MessageThread";
import { api, rupiah, markMsgRead } from "@/lib/client";

interface Summary {
  totalOmsetHariIni: number;
  totalOmsetMingguIni: number;
  totalOmsetBulanIni: number;
  trend: { hariIni: number | null; mingguIni: number | null; bulanIni: number | null };
  perBranch: {
    branchId: string;
    branchName: string;
    omsetHariIni: number;
    omsetMingguIni: number;
    omsetBulanIni: number;
    totalOrder: number;
    terkirimHariIni: number;
    adminName: string | null;
    adminPhone: string | null;
    branchPhone: string | null;
  }[];
  stockAlerts: { branchName: string; product: string; quantity: number; level: string }[];
  flaggedAdjustments: number;
  returnAnomalies: { branchName: string; todayCount: number; avgCount: number }[];
  superAdmins: { name: string; phone: string | null }[];
}

interface StockRow {
  productId: string;
  productName: string;
  unit: string;
  sekarang: number;
  kemarin: number;
  masukHariIni: number;
  keluarHariIni: number;
}

interface Sales {
  hariIni: { omset: number; qty: number };
  mingguIni: { omset: number; qty: number };
  bulanIni: { omset: number; qty: number };
  trend: {
    range: string;
    labels: string[];
    global: number[];
    perBranch: { branchId: string; branchName: string; values: number[] }[];
  };
}

// Rentang tren yang bisa dipilih (label ramah + keterangan bucket grafik).
const TREND_RANGES = [
  { value: "7d", label: "7 Hari", sub: "per hari" },
  { value: "1m", label: "Bulanan", sub: "30 hari, per hari" },
  { value: "3m", label: "Triwulan", sub: "3 bulan, per minggu" },
  { value: "4m", label: "Caturwulan", sub: "4 bulan, per minggu" },
  { value: "1y", label: "1 Tahun", sub: "12 bulan, per bulan" },
];

const num = (n: number) => new Intl.NumberFormat("id-ID").format(n || 0);
const PALETTE = ["#ea580c", "#2563eb", "#16a34a", "#9333ea", "#dc2626", "#0891b2", "#ca8a04"];

function waLink(phone?: string | null) {
  if (!phone) return null;
  return `https://wa.me/${phone.replace(/[^0-9]/g, "").replace(/^0/, "62")}`;
}

export default function DashboardPage() {
  const [s, setS] = useState<Summary | null>(null);
  const [stock, setStock] = useState<StockRow[] | null>(null);
  const [sales, setSales] = useState<Sales | null>(null);
  const [trendRange, setTrendRange] = useState("7d");
  const [err, setErr] = useState("");
  const [isOwner, setIsOwner] = useState(false);
  const [meId, setMeId] = useState<string | null>(null);

  // Dibuka dari lonceng notifikasi (/dashboard#pesan) → gulir ke area pesan
  // setelah konten termuat.
  useEffect(() => {
    if (s && window.location.hash === "#pesan") {
      document.getElementById("pesan")?.scrollIntoView({ behavior: "smooth" });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [s === null]);

  const load = (range = trendRange) => {
    api<Summary>("/api/dashboard/summary").then(setS).catch((e) => setErr(e.message));
    api<StockRow[]>("/api/central/stock").then(setStock).catch(() => {});
    api<Sales>(`/api/central/sales?range=${range}`).then(setSales).catch(() => {});
  };
  useEffect(() => {
    load();
    const t = setInterval(() => load(), 15000); // near real-time (polling Fase 1)
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [trendRange]);

  const notifCount = s ? s.stockAlerts.length + s.returnAnomalies.length : 0;

  return (
    <AppShell title="Beranda Pusat" onMe={(me: Me) => { setIsOwner(me.role === "owner_approver"); setMeId(me.id); }}>
      {err && <p className="text-red-600">{err}</p>}
      {!s ? (
        <p className="text-slate-500">Memuat…</p>
      ) : (
        <div className="space-y-6">
          {/* Tombol aksi Pusat — hanya Super Admin (mudah untuk orang awam) */}
          {!isOwner && (
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <BigButton href="/admin/pusat/pembelian" emoji="🐔" label="Beli & Kirim Telur" sub="Beli petani → langsung ke cabang" />
              <BigButton href="/admin/pusat/harga" emoji="🏷️" label="Atur Harga & Produk" sub="Harga + kelola produk" />
            </div>
          )}

          <div className={`grid grid-cols-1 gap-4 ${isOwner ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}>
            <Stat label="Omset Hari Ini (gabungan)" value={rupiah(s.totalOmsetHariIni)} trend={s.trend.hariIni} trendLabel="vs kemarin" qty={sales?.hariIni.qty} />
            <Stat label="Omset Minggu Ini (gabungan)" value={rupiah(s.totalOmsetMingguIni)} trend={s.trend.mingguIni} trendLabel="vs minggu lalu" qty={sales?.mingguIni.qty} />
            <Stat label="Omset Bulan Ini (gabungan)" value={rupiah(s.totalOmsetBulanIni)} trend={s.trend.bulanIni} trendLabel="vs bulan lalu" qty={sales?.bulanIni.qty} />
            {!isOwner && (
              <Stat
                label="Penyesuaian Stok Perlu Ditinjau"
                value={String(s.flaggedAdjustments)}
                tone={s.flaggedAdjustments > 0 ? "warn" : "ok"}
              />
            )}
          </div>

          {/* Stok gudang pusat: kemarin vs sekarang */}
          <section>
            <h2 className="mb-2 text-sm font-semibold text-slate-700">Stok Gudang Pusat</h2>
            <div className="card overflow-x-auto p-0">
              <table className="w-full text-sm">
                <thead className="border-b bg-slate-50 text-left text-xs text-slate-500">
                  <tr>
                    <th className="px-3 py-2">Produk</th>
                    <th className="px-3 py-2 text-right">Kemarin</th>
                    <th className="px-3 py-2 text-right">Sekarang</th>
                    <th className="px-3 py-2 text-right">Masuk Hari Ini</th>
                    <th className="px-3 py-2 text-right">Keluar Hari Ini</th>
                  </tr>
                </thead>
                <tbody>
                  {!stock ? (
                    <tr><td className="px-3 py-3 text-slate-500" colSpan={5}>Memuat…</td></tr>
                  ) : stock.length === 0 ? (
                    <tr><td className="px-3 py-3 text-slate-500" colSpan={5}>Belum ada produk.</td></tr>
                  ) : (
                    stock.map((row) => (
                      <tr key={row.productId} className="border-b last:border-0">
                        <td className="px-3 py-2 font-medium">
                          {row.productName} <span className="text-xs text-slate-400">/ {row.unit}</span>
                        </td>
                        <td className="px-3 py-2 text-right text-slate-500">{num(row.kemarin)}</td>
                        <td className="px-3 py-2 text-right text-lg font-bold">{num(row.sekarang)}</td>
                        <td className="px-3 py-2 text-right text-green-600">{row.masukHariIni ? `+${num(row.masukHariIni)}` : "-"}</td>
                        <td className="px-3 py-2 text-right text-orange-600">{row.keluarHariIni ? `−${num(row.keluarHariIni)}` : "-"}</td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </section>

          {/* Tren penjualan keseluruhan + per cabang (rentang bisa dipilih) */}
          {sales && (
            <>
              <section>
                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                  <h2 className="text-sm font-semibold text-slate-700">Tren Penjualan Keseluruhan</h2>
                  <div className="flex flex-wrap gap-1">
                    {TREND_RANGES.map((r) => (
                      <button
                        key={r.value}
                        title={r.sub}
                        onClick={() => setTrendRange(r.value)}
                        className={`rounded-full px-3 py-1 text-xs font-medium ${
                          trendRange === r.value
                            ? "bg-brand-600 text-white"
                            : "bg-white text-slate-600 ring-1 ring-slate-200 hover:bg-slate-100"
                        }`}
                      >
                        {r.label}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="card">
                  <LineChart
                    labels={sales.trend.labels}
                    series={[{ name: "Semua cabang", values: sales.trend.global, color: "#ea580c" }]}
                  />
                </div>
              </section>

              <section>
                <h2 className="mb-2 text-sm font-semibold text-slate-700">
                  Tren Penjualan per Cabang ({TREND_RANGES.find((r) => r.value === trendRange)?.label ?? trendRange})
                </h2>
                <div className="card">
                  <LineChart
                    labels={sales.trend.labels}
                    series={sales.trend.perBranch.map((b, i) => ({
                      name: b.branchName,
                      values: b.values,
                      color: PALETTE[i % PALETTE.length],
                    }))}
                  />
                </div>
              </section>
            </>
          )}

          <section>
            <h2 className="mb-2 text-sm font-semibold text-slate-700">Perbandingan Omset Antar Cabang (Bulan Ini)</h2>
            <div className="card">
              <BranchBarChart data={s.perBranch.map((b) => ({ label: b.branchName, value: b.omsetBulanIni }))} />
            </div>
          </section>

          <section>
            <h2 className="mb-2 text-sm font-semibold text-slate-700">Performa per Cabang</h2>
            <div className="card overflow-x-auto p-0">
              <table className="w-full text-sm">
                <thead className="border-b bg-slate-50 text-left text-xs text-slate-500">
                  <tr>
                    <th className="px-3 py-2">Cabang</th>
                    <th className="px-3 py-2 text-right">Omset Hari Ini</th>
                    <th className="px-3 py-2 text-right">Omset Minggu Ini</th>
                    <th className="px-3 py-2 text-right">Omset Bulan Ini</th>
                    <th className="px-3 py-2 text-right">Terkirim Hari Ini</th>
                    <th className="px-3 py-2 text-right">Total Pesanan</th>
                    <th className="px-3 py-2">Kontak</th>
                  </tr>
                </thead>
                <tbody>
                  {s.perBranch.map((b) => (
                    <tr key={b.branchId} className="border-b last:border-0">
                      <td className="px-3 py-2 font-medium">{b.branchName}</td>
                      <td className="px-3 py-2 text-right">{rupiah(b.omsetHariIni)}</td>
                      <td className="px-3 py-2 text-right">{rupiah(b.omsetMingguIni)}</td>
                      <td className="px-3 py-2 text-right">{rupiah(b.omsetBulanIni)}</td>
                      <td className="px-3 py-2 text-right">{b.terkirimHariIni}</td>
                      <td className="px-3 py-2 text-right">{b.totalOrder}</td>
                      <td className="px-3 py-2">
                        {waLink(b.adminPhone) ? (
                          <a href={waLink(b.adminPhone)!} target="_blank" className="btn-outline whitespace-nowrap px-2 py-1 text-xs">
                            💬 {b.adminName}
                          </a>
                        ) : (
                          <span className="text-xs text-slate-400">-</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          <section>
            <h2 className="mb-2 text-sm font-semibold text-slate-700">
              Notifikasi ({notifCount})
            </h2>
            {notifCount === 0 ? (
              <p className="text-sm text-slate-500">Tidak ada notifikasi.</p>
            ) : (
              <div className="grid gap-2 sm:grid-cols-2">
                {s.stockAlerts.map((a, i) => (
                  <div key={`stock-${i}`} className="card flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium">{a.product}</p>
                      <p className="text-xs text-slate-500">{a.branchName}</p>
                    </div>
                    <span
                      className={`badge ${
                        a.level === "kritis" ? "bg-red-100 text-red-700" : "bg-amber-100 text-amber-700"
                      }`}
                    >
                      {a.level === "kritis" ? "Stok kritis" : "Stok menumpuk"} · {a.quantity}
                    </span>
                  </div>
                ))}
                {s.returnAnomalies.map((a, i) => (
                  <div key={`return-${i}`} className="card flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium">Lonjakan retur</p>
                      <p className="text-xs text-slate-500">{a.branchName} · rata-rata harian {a.avgCount}</p>
                    </div>
                    <span className="badge bg-red-100 text-red-700">hari ini {a.todayCount}</span>
                  </div>
                ))}
              </div>
            )}
          </section>

          <MessageBranch branches={s.perBranch} canConfigure={!isOwner} meId={meId} />
        </div>
      )}
    </AppShell>
  );
}

const RETENTION_OPTIONS = [
  { value: "daily", label: "Harian (hapus > 1 hari)" },
  { value: "weekly", label: "Mingguan (hapus > 7 hari)" },
  { value: "monthly", label: "Bulanan (hapus > 30 hari)" },
  { value: "yearly", label: "Tahunan (hapus > 365 hari)" },
];

function MessageBranch({
  branches,
  canConfigure,
  meId,
}: {
  branches: { branchId: string; branchName: string }[];
  canConfigure: boolean;
  meId: string | null;
}) {
  const [branchId, setBranchId] = useState("");

  // Membuka thread sebuah cabang = menandai pesan sudah dibaca (badge lonceng ke 0).
  useEffect(() => {
    if (branchId && meId) markMsgRead(meId);
  }, [branchId, meId]);
  const [retention, setRetention] = useState(""); // tersimpan di server
  const [retentionDraft, setRetentionDraft] = useState(""); // pilihan di dropdown
  const [retMsg, setRetMsg] = useState("");
  const [retBusy, setRetBusy] = useState(false);

  useEffect(() => {
    api<{ period: string }>("/api/messages/retention")
      .then((r) => { setRetention(r.period); setRetentionDraft(r.period); })
      .catch(() => {});
  }, []);

  // Dua langkah: pilih periode → klik "Terapkan" (perubahan ini menghapus
  // pesan lama, jadi tidak boleh terjadi tanpa klik yang disengaja).
  async function applyRetention() {
    setRetBusy(true); setRetMsg("");
    try {
      const r = await api<{ deleted: number }>("/api/messages/retention", {
        method: "PUT",
        body: JSON.stringify({ period: retentionDraft }),
      });
      setRetention(retentionDraft);
      setRetMsg(`✓ Tersimpan${r.deleted > 0 ? ` — ${r.deleted} pesan lama dihapus` : ""}`);
    } catch (e: any) {
      setRetMsg("✗ " + e.message);
    } finally {
      setRetBusy(false);
    }
  }

  return (
    <section id="pesan">
      <h2 className="mb-2 text-sm font-semibold text-slate-700">💬 Pesan ke Cabang</h2>
      <div className="card space-y-3">
        <div className="flex flex-wrap items-end gap-3">
          <div className="min-w-48 flex-1">
            <label className="label">Pilih cabang</label>
            <select className="input" value={branchId} onChange={(e) => setBranchId(e.target.value)}>
              <option value="">— Pilih cabang —</option>
              {branches.map((b) => (
                <option key={b.branchId} value={b.branchId}>{b.branchName}</option>
              ))}
            </select>
          </div>
          {canConfigure && (
            <div className="min-w-56">
              <label className="label">🧹 Hapus otomatis pesan lama</label>
              <div className="flex gap-2">
                <select
                  className="input"
                  value={retentionDraft}
                  onChange={(e) => setRetentionDraft(e.target.value)}
                  disabled={!retention}
                >
                  {!retention && <option value="">Memuat…</option>}
                  {RETENTION_OPTIONS.map((o) => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                  ))}
                </select>
                {retentionDraft && retentionDraft !== retention && (
                  <button className="btn-primary shrink-0 text-xs" disabled={retBusy} onClick={applyRetention}>
                    {retBusy ? "…" : "Terapkan"}
                  </button>
                )}
              </div>
            </div>
          )}
        </div>
        {retMsg && (
          <p className={`text-xs ${retMsg.startsWith("✓") ? "text-green-600" : "text-red-600"}`}>{retMsg}</p>
        )}
        <MessageThread branchId={branchId || null} emptyLabel="Pilih cabang untuk mulai mengirim pesan." />
      </div>
    </section>
  );
}

function BigButton({ href, emoji, label, sub }: { href: string; emoji: string; label: string; sub: string }) {
  return (
    <Link
      href={href}
      className="flex items-center gap-3 rounded-xl border border-brand-200 bg-brand-50 p-4 transition hover:bg-brand-100"
    >
      <span className="text-3xl">{emoji}</span>
      <div>
        <p className="text-base font-bold text-brand-800">{label}</p>
        <p className="text-xs text-brand-600">{sub}</p>
      </div>
    </Link>
  );
}

function Stat({
  label, value, tone, trend, trendLabel, qty,
}: { label: string; value: string; tone?: "ok" | "warn"; trend?: number | null; trendLabel?: string; qty?: number }) {
  return (
    <div className="card">
      <p className="text-xs text-slate-500">{label}</p>
      <p className={`mt-1 text-2xl font-bold ${tone === "warn" ? "text-amber-600" : ""}`}>{value}</p>
      {qty !== undefined && (
        <p className="mt-1 text-xs text-slate-500">Terjual: <span className="font-semibold text-slate-700">{num(qty)}</span> item</p>
      )}
      {trend !== undefined && (
        <p className="mt-1 text-xs">
          {trend === null ? (
            <span className="text-slate-400">Belum ada data pembanding</span>
          ) : trend > 0 ? (
            <span className="text-green-600">↑ {trend}% {trendLabel}</span>
          ) : trend < 0 ? (
            <span className="text-red-600">↓ {Math.abs(trend)}% {trendLabel}</span>
          ) : (
            <span className="text-slate-400">= sama dengan {trendLabel}</span>
          )}
        </p>
      )}
    </div>
  );
}

function LineChart({
  labels,
  series,
}: {
  labels: string[];
  series: { name: string; values: number[]; color: string }[];
}) {
  const width = 720;
  const height = 240;
  const padL = 48;
  const padR = 12;
  const padT = 12;
  const padB = 28;
  const allValues = series.flatMap((sr) => sr.values);
  const max = Math.max(1, ...allValues);
  const n = labels.length;
  const plotW = width - padL - padR;
  const plotH = height - padT - padB;
  const x = (i: number) => padL + (n <= 1 ? plotW / 2 : (i / (n - 1)) * plotW);
  const y = (v: number) => padT + plotH - (v / max) * plotH;
  const compact = (v: number) => new Intl.NumberFormat("id-ID", { notation: "compact" }).format(v);

  return (
    <div>
      <svg viewBox={`0 0 ${width} ${height}`} className="w-full" style={{ maxHeight: 280 }}>
        {[0, 0.25, 0.5, 0.75, 1].map((f) => {
          const gy = padT + plotH - f * plotH;
          return (
            <g key={f}>
              <line x1={padL} y1={gy} x2={width - padR} y2={gy} stroke="#e2e8f0" strokeWidth={1} />
              <text x={padL - 6} y={gy + 3} textAnchor="end" fontSize="10" fill="#94a3b8">
                {compact(max * f)}
              </text>
            </g>
          );
        })}
        {/* Label sumbu X dijarangkan bila titik terlalu rapat (mis. 30 hari). */}
        {labels.map((l, i) => {
          const step = Math.max(1, Math.ceil(n / 12));
          if (i % step !== 0 && i !== n - 1) return null;
          return (
            <text key={i} x={x(i)} y={height - 8} textAnchor="middle" fontSize="10" fill="#64748b">
              {l}
            </text>
          );
        })}
        {series.map((sr) => (
          <g key={sr.name}>
            <polyline
              fill="none"
              stroke={sr.color}
              strokeWidth={2}
              points={sr.values.map((v, i) => `${x(i)},${y(v)}`).join(" ")}
            />
            {sr.values.map((v, i) => (
              <circle key={i} cx={x(i)} cy={y(v)} r={2.5} fill={sr.color} />
            ))}
          </g>
        ))}
      </svg>
      {series.length > 1 && (
        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1">
          {series.map((sr) => (
            <span key={sr.name} className="inline-flex items-center gap-1.5 text-xs text-slate-600">
              <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: sr.color }} />
              {sr.name}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

function BranchBarChart({ data }: { data: { label: string; value: number }[] }) {
  const max = Math.max(1, ...data.map((d) => d.value));
  const width = 700;
  const height = 220;
  const barGap = 16;
  const barWidth = (width - barGap * (data.length + 1)) / data.length;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} className="w-full" style={{ maxHeight: 260 }}>
      {data.map((d, i) => {
        const barHeight = (d.value / max) * (height - 50);
        const x = barGap + i * (barWidth + barGap);
        const y = height - 30 - barHeight;
        return (
          <g key={d.label}>
            <rect x={x} y={y} width={barWidth} height={barHeight} rx={4} fill="#ea580c" />
            <text x={x + barWidth / 2} y={y - 6} textAnchor="middle" fontSize="11" fill="#334155">
              {new Intl.NumberFormat("id-ID", { notation: "compact" }).format(d.value)}
            </text>
            <text x={x + barWidth / 2} y={height - 10} textAnchor="middle" fontSize="11" fill="#64748b">
              {d.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
}