"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { campaignActivity, campaignBiddingLabel, campaignFormat as classifyCampaignFormat, campaignFormatLabel, type CampaignFormat } from "@/lib/profitOptimizer/adClassification";

type Metrics = {
  activeDays: number;
  impressions: number;
  clicks: number;
  expense: number;
  gmv: number;
  orders: number;
  roas: number | null;
  ctr: number | null;
  conversion: number | null;
};

type Campaign = {
  campaignId: string;
  itemIds: string[];
  adName: string | null;
  adType: string | null;
  placement: string | null;
  status: string | null;
  biddingMethod: string | null;
  dailyBudget: number | null;
  roasTarget: number | null;
  startTime: number | null;
  current: Metrics;
  previous: Metrics;
};

type Board = {
  ok: boolean;
  error?: string;
  shopId: string;
  currentFrom: string;
  currentTo: string;
  previousFrom: string;
  previousTo: string;
  campaigns: Campaign[];
};

type ItemEconomics = { sold: number; profit: number | null; stock: number | null };
type FormatFilter = CampaignFormat | "all";
type StatusFilter = "all" | "active" | "inactive" | "unknown";

function rupiah(value: number | null) {
  return value === null ? "Belum tersedia" : `Rp${Math.round(value).toLocaleString("id-ID")}`;
}

function ratio(value: number | null) {
  return value === null ? "—" : `${value.toFixed(2)}×`;
}

function ageDays(startTime: number | null) {
  if (!startTime) return null;
  const start = startTime < 1_000_000_000_000 ? startTime * 1000 : startTime;
  if (!Number.isFinite(start)) return null;
  return Math.max(0, Math.floor((Date.now() - start) / 86_400_000));
}

function assessment(campaign: Campaign) {
  const age = ageDays(campaign.startTime);
  const current = campaign.current;
  const activity = campaignActivity(campaign.status);
  if (activity.active === false) {
    return { label: "Tidak aktif", reason: `Status Shopee: ${campaign.status}. Tidak ada usulan menaikkan budget.`, tone: "slate" };
  }
  if (activity.active === null) return { label: "Status belum terverifikasi", reason: "Status kampanye dari Shopee belum terbaca. Periksa kampanye sebelum mengubah budget atau ROAS.", tone: "amber" };
  if (age === null) return { label: "Tanggal mulai belum tersedia", reason: "Masa belajar tidak dapat diverifikasi. Periksa kampanye di Shopee sebelum mengubah budget atau ROAS.", tone: "amber" };
  if (age < 7) return { label: "Masa belajar", reason: `Baru berjalan ${age} hari. Pantau sampai minimal 7 hari sebelum menyimpulkan performa.`, tone: "amber" };
  if (current.activeDays < 7) return { label: "Data 7 hari belum lengkap", reason: `Hanya ${current.activeDays} hari memiliki biaya atau klik pada 7 hari penuh terakhir. Jangan mengubah iklan dari sampel ini saja.`, tone: "amber" };
  if (current.expense <= 0) return { label: "Tanpa belanja", reason: "Tidak ada biaya iklan dalam jendela 7 hari, sehingga ROAS tidak dapat dinilai.", tone: "slate" };
  if (current.orders === 0) return { label: "Tinjau manual", reason: `${current.clicks} klik dan ${rupiah(current.expense)} biaya dalam 7 hari tanpa order iklan. Cek listing, harga, dan atribusi sebelum pause.`, tone: "rose" };
  if (campaign.roasTarget !== null && campaign.roasTarget > 0 && current.roas !== null) {
    if (current.roas < campaign.roasTarget) return { label: "Di bawah target ROAS", reason: `ROAS 7 hari ${ratio(current.roas)} di bawah target ${ratio(campaign.roasTarget)}. Tinjau profit setelah HPP Final; kurangi belanja hanya setelah memeriksa tren dan masa belajar.`, tone: "rose" };
    return { label: "Kandidat pertahankan / scale", reason: `ROAS 7 hari ${ratio(current.roas)} di atas target ${ratio(campaign.roasTarget)}, dengan ${current.orders} order iklan. Scale hanya jika profit setelah HPP Final dan stok juga sehat.`, tone: "emerald" };
  }
  return { label: "Pantau profit", reason: `${current.orders} order iklan dengan ROAS ${ratio(current.roas)}. Target ROAS tidak tersedia; validasi profit final sebelum mengubah budget.`, tone: "slate" };
}

export default function OptimizerCampaignBoard({ shopId, shops, itemNames, itemEconomics }: {
  shopId: string;
  shops: Array<{ shopId: string; shopName: string }>;
  itemNames: Record<string, string>;
  itemEconomics: Record<string, ItemEconomics>;
}) {
  const [board, setBoard] = useState<Board | null>(null);
  const [loading, setLoading] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [formatFilter, setFormatFilter] = useState<FormatFilter>("all");
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");

  const load = useCallback(async () => {
    if (shopId === "all") return;
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(`/api/optimizer/sync-ads?shop_id=${encodeURIComponent(shopId)}`, { cache: "no-store" });
      const result = await response.json().catch(() => null) as Board | null;
      if (!response.ok || !result?.ok) throw new Error(result?.error || "Pengaturan kampanye Shopee belum dapat dibaca.");
      setBoard(result);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Gagal mengambil kampanye.");
    } finally {
      setLoading(false);
    }
  }, [shopId]);

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

  const campaigns = board?.campaigns || [];
  const formatCounts = new Map<CampaignFormat, number>([["individual", 0], ["group", 0], ["automatic", 0], ["unknown", 0]]);
  const statusCounts: Record<StatusFilter, number> = { all: campaigns.length, active: 0, inactive: 0, unknown: 0 };
  for (const campaign of campaigns) {
    const format = classifyCampaignFormat(campaign.adType, campaign.itemIds.length);
    formatCounts.set(format, (formatCounts.get(format) || 0) + 1);
    const activity = campaignActivity(campaign.status);
    if (activity.active === true) statusCounts.active += 1;
    else if (activity.active === false) statusCounts.inactive += 1;
    else statusCounts.unknown += 1;
  }
  const visibleCampaigns = campaigns.filter((campaign) => {
    const format = classifyCampaignFormat(campaign.adType, campaign.itemIds.length);
    const activity = campaignActivity(campaign.status);
    const status = activity.active === true ? "active" : activity.active === false ? "inactive" : "unknown";
    return (formatFilter === "all" || format === formatFilter) && (statusFilter === "all" || status === statusFilter);
  });

  async function refresh() {
    if (!board || syncing) return;
    setSyncing(true);
    setError(null);
    try {
      const response = await fetch("/api/optimizer/sync-ads", {
        method: "POST", headers: { "content-type": "application/json" },
        body: JSON.stringify({ shopId, dateFrom: board.previousFrom, dateTo: board.currentTo }),
      });
      const result = await response.json().catch(() => null) as { ok?: boolean; errors?: string[]; error?: string } | null;
      if (!response.ok || !result?.ok) throw new Error(result?.errors?.[0] || result?.error || "Sinkronisasi iklan gagal.");
      await load();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "Sinkronisasi gagal.");
    } finally {
      setSyncing(false);
    }
  }

  if (shopId === "all") return <section className="rounded-2xl border border-violet-200 bg-violet-50 p-5">
    <h2 className="text-lg font-black text-slate-950">Pilih toko untuk keputusan iklan</h2>
    <p className="mt-1 text-sm text-slate-600">Budget, target ROAS, dan masa belajar adalah milik kampanye pada satu toko. Pilih toko terlebih dahulu agar hasilnya tidak tercampur.</p>
    <div className="mt-4 flex flex-wrap gap-2">{shops.map((shop) => <Link className="rounded-xl border border-violet-300 bg-white px-4 py-2 text-sm font-bold text-violet-800 hover:bg-violet-100" href={`/optimizer?shop_id=${encodeURIComponent(shop.shopId)}&period=30d&view=ads`} key={shop.shopId}>{shop.shopName} →</Link>)}</div>
  </section>;

  return <section className="space-y-3 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
    <div className="flex flex-wrap items-start justify-between gap-3"><div><h2 className="text-lg font-black text-slate-950">Kampanye & keputusan 7 hari · {shops.find((shop) => shop.shopId === shopId)?.shopName || shopId}</h2><p className="mt-1 text-sm text-slate-500">Tujuh hari penuh terakhir dibanding tujuh hari sebelumnya. Angka kampanye berasal dari Shopee Ads; ini bukan profit final setelah HPP.</p></div><button className="rounded-xl border border-slate-300 px-3 py-2 text-sm font-bold text-slate-800 hover:bg-slate-50 disabled:opacity-50" disabled={loading || syncing || !board} onClick={refresh} type="button">{syncing ? "Menyinkronkan…" : "Perbarui data iklan"}</button></div>
    <p className="rounded-xl bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-900">AI dan jadwal harian hanya membaca data serta membuat rekomendasi—tidak pernah mengubah budget/ROAS otomatis, termasuk saat iklan mencapai limit. Budget dapat Anda ketik sendiri; perubahan baru dikirim setelah Owner menekan Terapkan dan menyetujui konfirmasi. Perubahan ROAS dapat memulai ulang masa belajar, dan data perubahan kampanye terakhir belum tersedia.</p>
    {error ? <p aria-live="polite" className="rounded-xl bg-rose-50 px-3 py-2 text-sm font-semibold text-rose-800">{error}</p> : null}
    {loading && !board ? <p className="py-6 text-sm text-slate-500">Membaca kampanye Shopee…</p> : null}
    {board ? <>
      <p className="text-xs text-slate-500">Periode utama: {board.currentFrom} – {board.currentTo} · Pembanding: {board.previousFrom} – {board.previousTo} · {board.campaigns.length} kampanye ditemukan dari API Shopee.</p>
      <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
        {(["individual", "group", "automatic", "unknown"] as CampaignFormat[]).map((format) => <button aria-pressed={formatFilter === format} className={`rounded-xl border px-3 py-3 text-left transition ${formatFilter === format ? "border-violet-400 bg-violet-50 ring-1 ring-violet-200" : "border-slate-200 bg-white hover:border-violet-300"}`} key={format} onClick={() => setFormatFilter(formatFilter === format ? "all" : format)} type="button"><span className="block text-xs font-bold text-slate-500">{campaignFormatLabel(format)}</span><span className="mt-1 block text-lg font-black text-slate-950">{formatCounts.get(format) || 0} kampanye</span><span className="text-[11px] text-slate-500">{campaigns.filter((campaign) => classifyCampaignFormat(campaign.adType, campaign.itemIds.length) === format && campaignActivity(campaign.status).active === true).length} aktif · {campaigns.filter((campaign) => classifyCampaignFormat(campaign.adType, campaign.itemIds.length) === format && campaignActivity(campaign.status).active === false).length} nonaktif</span></button>)}
      </div>
      <div className="flex flex-wrap items-center gap-2 rounded-xl bg-slate-50 p-2">
        <span className="px-2 text-xs font-bold text-slate-500">Status:</span>
        {([ ["all", "Semua"], ["active", "Aktif"], ["inactive", "Tidak aktif"], ["unknown", "Belum diketahui"] ] as const).map(([status, label]) => <button aria-pressed={statusFilter === status} className={`rounded-lg px-3 py-1.5 text-xs font-bold ${statusFilter === status ? "bg-slate-900 text-white" : "bg-white text-slate-600 hover:bg-slate-100"}`} key={status} onClick={() => setStatusFilter(status)} type="button">{label} ({statusCounts[status]})</button>)}
        {formatFilter !== "all" ? <button className="ml-auto text-xs font-bold text-violet-700 underline" onClick={() => setFormatFilter("all")} type="button">Hapus filter format</button> : null}
      </div>
    </> : null}
    {board && board.campaigns.length === 0 ? <p className="rounded-xl border border-dashed border-slate-300 p-5 text-sm text-slate-500">Tidak ada kampanye produk dari endpoint Shopee yang tersedia untuk toko ini. GMV Max tingkat toko memerlukan sumber kampanye terpisah.</p> : null}
    <div className="grid gap-3 xl:grid-cols-2">{visibleCampaigns.map((campaign) => <CampaignCard campaign={campaign} itemEconomics={itemEconomics} itemNames={itemNames} key={campaign.campaignId} onApplied={load} shopId={shopId} />)}</div>
    {board && board.campaigns.length > 0 && visibleCampaigns.length === 0 ? <p className="rounded-xl border border-dashed border-slate-300 p-5 text-center text-sm text-slate-500">Tidak ada kampanye untuk filter ini. Coba tampilkan semua format atau status.</p> : null}
  </section>;
}

function CampaignCard({ campaign, shopId, itemNames, itemEconomics, onApplied }: { campaign: Campaign; shopId: string; itemNames: Record<string, string>; itemEconomics: Record<string, ItemEconomics>; onApplied: () => Promise<void> }) {
  const decision = assessment(campaign);
  const names = campaign.itemIds.map((id) => itemNames[id] || `Item ${id}`);
  const mappedEconomics = campaign.itemIds.map((id) => itemEconomics[id]).filter((row): row is ItemEconomics => Boolean(row));
  const profitComplete = mappedEconomics.length === campaign.itemIds.length && mappedEconomics.length > 0 && mappedEconomics.every((row) => row.profit !== null);
  const relatedProfit = profitComplete ? mappedEconomics.reduce((sum, row) => sum + (row.profit || 0), 0) : null;
  const isGmsCampaign = campaign.roasTarget !== null || /gms|gmv\s*max/i.test(`${campaign.adType || ""} ${campaign.adName || ""}`);
  const format = classifyCampaignFormat(campaign.adType, campaign.itemIds.length);
  const activity = campaignActivity(campaign.status);
  const biddingLabel = campaignBiddingLabel({ adType: campaign.adType, adName: campaign.adName, biddingMethod: campaign.biddingMethod, roasTarget: campaign.roasTarget });
  const canChange = isGmsCampaign && campaign.roasTarget !== null && ageDays(campaign.startTime) !== null && (ageDays(campaign.startTime) || 0) >= 7 && campaign.current.activeDays === 7 && campaign.current.expense > 0 && /ongoing|active/i.test(campaign.status || "");
  const canChangeRoas = canChange && (campaign.roasTarget || 0) > 0;
  const [budget, setBudget] = useState("");
  const [roas, setRoas] = useState(campaign.roasTarget?.toString() || "");
  const [roasChanged, setRoasChanged] = useState(false);
  const [pending, setPending] = useState(false);
  const [feedback, setFeedback] = useState<string | null>(null);

  async function apply(kind: "daily_budget" | "roas_target", value: number) {
    const label = kind === "daily_budget" ? `budget harian ${rupiah(value)}` : `target ROAS ${value}×`;
    if (!window.confirm(`Kirim perubahan ${label} untuk ${campaign.adName || `kampanye ${campaign.campaignId}`} ke Shopee?`)) return;
    setPending(true);
    setFeedback(null);
    try {
      const response = await fetch("/api/optimizer/sync-ads", {
        method: "POST", headers: { "content-type": "application/json" },
        body: JSON.stringify({ action: "apply_campaign", manualConfirmation: "OWNER_CONFIRMED_MANUAL_CHANGE", shopId, campaignId: campaign.campaignId, kind, value }),
      });
      const result = await response.json().catch(() => null) as { ok?: boolean; error?: string } | null;
      if (!response.ok || !result?.ok) throw new Error(result?.error || "Shopee belum mengonfirmasi perubahan.");
      setFeedback(`${label} diperbarui dan terverifikasi dari Shopee.`);
      setBudget("");
      setRoasChanged(false);
      await onApplied();
    } catch (cause) {
      setFeedback(cause instanceof Error ? cause.message : "Perubahan gagal.");
    } finally {
      setPending(false);
    }
  }

  return <article className="rounded-xl border border-slate-200 p-4">
    <div className="flex flex-wrap items-start justify-between gap-2"><div><div className="font-black text-slate-950">{campaign.adName || `Kampanye ${campaign.campaignId}`}</div><div className="mt-1 text-xs text-slate-500">ID {campaign.campaignId} · Data Shopee: {campaign.adType || "tipe belum dikirim"}{campaign.placement ? ` · Placement ${campaign.placement}` : ""}</div></div><span className={`rounded-full px-2.5 py-1 text-xs font-black ${decision.tone === "emerald" ? "bg-emerald-100 text-emerald-800" : decision.tone === "rose" ? "bg-rose-100 text-rose-800" : decision.tone === "amber" ? "bg-amber-100 text-amber-800" : "bg-slate-100 text-slate-700"}`}>{decision.label}</span></div>
    <div className="mt-3 flex flex-wrap gap-2"><span className="rounded-full border border-violet-200 bg-violet-50 px-2.5 py-1 text-xs font-bold text-violet-800">{campaignFormatLabel(format)}</span>{biddingLabel ? <span className="rounded-full border border-indigo-200 bg-indigo-50 px-2.5 py-1 text-xs font-bold text-indigo-800">{biddingLabel}{(campaign.roasTarget || 0) > 0 ? ` · target ${ratio(campaign.roasTarget)}` : campaign.roasTarget === 0 ? " · target otomatis" : ""}</span> : <span className="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-500">Strategi bid belum tersedia dari API</span>}<span className={`rounded-full px-2.5 py-1 text-xs font-bold ${activity.tone === "success" ? "bg-emerald-100 text-emerald-800" : activity.tone === "muted" ? "bg-slate-200 text-slate-700" : "bg-amber-100 text-amber-800"}`}>{activity.label}</span></div>
    <div className="mt-3 grid grid-cols-2 gap-2 text-xs sm:grid-cols-4"><div><span className="text-slate-500">Budget/hari</span><div className="font-black">{campaign.dailyBudget === 0 ? "Tanpa batas" : rupiah(campaign.dailyBudget)}</div></div><div><span className="text-slate-500">Target ROAS</span><div className="font-black">{campaign.roasTarget === 0 ? "Otomatis" : ratio(campaign.roasTarget)}</div></div><div><span className="text-slate-500">ROAS 7 hari</span><div className="font-black">{ratio(campaign.current.roas)}</div></div><div><span className="text-slate-500">ROAS sebelumnya</span><div className="font-black">{ratio(campaign.previous.roas)}</div></div></div>
    <div className="mt-3 grid grid-cols-2 gap-2 rounded-lg bg-slate-50 p-3 text-xs sm:grid-cols-4"><div>Biaya iklan 7 hari <strong className="block">{rupiah(campaign.current.expense)}</strong></div><div>GMV iklan 7 hari <strong className="block">{rupiah(campaign.current.gmv)}</strong></div><div>Klik / tayangan <strong className="block">{campaign.current.clicks} / {campaign.current.impressions}</strong></div><div>Order iklan <strong className="block">{campaign.current.orders}</strong></div><div className="col-span-2 border-t border-slate-200 pt-2 sm:col-span-4">Profit produk terkait pada periode laporan, sebelum iklan: <strong className={relatedProfit === null ? "text-amber-800" : relatedProfit < 0 ? "text-rose-700" : "text-emerald-700"}>{rupiah(relatedProfit)}</strong>{relatedProfit === null ? " · HPP Final atau data settlement belum lengkap" : ` · ${mappedEconomics.reduce((sum, row) => sum + row.sold, 0)} item`}</div></div>
    <p className="mt-3 text-sm leading-5 text-slate-700">{decision.reason}</p><p className="mt-2 text-xs text-slate-500">{names.length ? names.slice(0, 3).join(" · ") + (names.length > 3 ? ` · +${names.length - 3} produk` : "") : "Produk kampanye belum dipetakan oleh Shopee API."}</p>
    {isGmsCampaign ? <div className="mt-4 grid gap-3 rounded-xl border border-violet-100 bg-violet-50/60 p-3 sm:grid-cols-2">
      <div><label className="text-xs font-bold text-slate-700" htmlFor={`budget-${campaign.campaignId}`}>Budget harian (Rp)</label><div className="mt-1 flex gap-2"><input className="min-w-0 flex-1 rounded-lg border border-slate-300 bg-white px-2 py-2 text-sm" id={`budget-${campaign.campaignId}`} inputMode="numeric" min="1000" max="100000000" step="1000" placeholder="Contoh: 50000" type="number" value={budget} onChange={(event) => setBudget(event.target.value)} /><button className="rounded-lg bg-violet-700 px-3 py-2 text-xs font-bold text-white disabled:opacity-50" disabled={!canChange || !budget || !Number.isSafeInteger(Number(budget)) || Number(budget) < 1000 || Number(budget) > 100000000 || pending || Number(budget) === campaign.dailyBudget} onClick={() => void apply("daily_budget", Number(budget))} type="button">Terapkan</button></div><p className="mt-1 text-[11px] text-slate-500">Nominal ditentukan Owner; batas input Rp1.000–Rp100.000.000 per hari.</p></div>
      {(campaign.roasTarget || 0) > 0 ? <div><label className="text-xs font-bold text-slate-700" htmlFor={`roas-${campaign.campaignId}`}>Target ROAS</label><div className="mt-1 flex gap-2"><input className="min-w-0 flex-1 rounded-lg border border-slate-300 bg-white px-2 py-2 text-sm" id={`roas-${campaign.campaignId}`} inputMode="decimal" min="0.1" step="0.1" type="number" value={roas} onChange={(event) => { setRoas(event.target.value); setRoasChanged(true); }} /><button className="rounded-lg bg-violet-700 px-3 py-2 text-xs font-bold text-white disabled:opacity-50" disabled={!canChangeRoas || !roasChanged || pending || !Number.isFinite(Number(roas)) || Number(roas) <= 0 || Math.abs(Number(roas) - (campaign.roasTarget || 0)) < 0.0001} onClick={() => void apply("roas_target", Number(roas))} type="button">Terapkan</button></div></div> : <p className="self-center rounded-lg border border-indigo-200 bg-white p-3 text-xs leading-5 text-indigo-900">{campaign.roasTarget === 0 ? "GMV Max Auto memakai ROAS otomatis dari Shopee. Target ROAS tidak tersedia untuk diedit pada mode ini." : "Target ROAS live belum dikirim Shopee, jadi Sellfin menyembunyikan kontrol ROAS untuk mencegah perubahan yang salah."}</p>}
      {feedback ? <p aria-live="polite" className="text-xs font-semibold text-slate-700 sm:col-span-2">{feedback}</p> : null}
      {!canChange ? <p className="text-xs leading-5 text-amber-800 sm:col-span-2">Penerapan manual terbuka setelah kampanye aktif melewati 7 hari dan tersedia 7 hari penuh metrik. Sellfin belum menerima waktu perubahan terakhir dari Shopee.</p> : <p className="text-xs leading-5 text-slate-500 sm:col-span-2">Perubahan hanya dikirim setelah Anda menekan Terapkan dan menyetujui konfirmasi.</p>}
    </div> : <p className="mt-4 rounded-lg bg-slate-50 p-3 text-xs text-slate-500">Kontrol edit disembunyikan karena kampanye belum terverifikasi sebagai GMV Max ROAS.</p>}
  </article>;
}