"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";

type WindowResult = {
  ordersInWindow: number;
  settlementsInWindow: number;
  incompleteSettlements: number;
  errors: string[];
};

function localDate(value: Date) {
  const year = value.getFullYear();
  const month = String(value.getMonth() + 1).padStart(2, "0");
  const day = String(value.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

export default function HistoricalReconcile({ shopId }: { shopId: string }) {
  const router = useRouter();
  const [fromDate, setFromDate] = useState("2026-09-01");
  const [running, setRunning] = useState(false);
  const [message, setMessage] = useState("");

  async function run() {
    const start = new Date(`${fromDate}T12:00:00`);
    const today = new Date();
    if (!Number.isFinite(start.getTime()) || start > today) {
      setMessage("Pilih tanggal awal yang valid dan tidak melebihi hari ini.");
      return;
    }
    setRunning(true);
    let windows = 0;
    let orders = 0;
    let settlements = 0;
    let incomplete = 0;
    try {
      for (let cursor = new Date(start); cursor <= today;) {
        const end = new Date(cursor);
        end.setDate(end.getDate() + 13);
        if (end > today) end.setTime(today.getTime());
        const from = localDate(cursor);
        const to = localDate(end);
        setMessage(`Mencocokkan ${from} sampai ${to} dengan Shopee… (${windows + 1})`);
        const response = await fetch("/api/shopee/finance/sync", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ shopId, reconcileFrom: from, reconcileTo: to }),
        });
        const payload = await response.json() as { data?: WindowResult; error?: string | null };
        if (!response.ok || payload.data?.errors.length) {
          throw new Error(payload.error || "Sebagian data Shopee belum berhasil disinkronkan.");
        }
        windows += 1;
        orders += payload.data?.ordersInWindow || 0;
        settlements += payload.data?.settlementsInWindow || 0;
        incomplete += payload.data?.incompleteSettlements || 0;
        cursor = new Date(end);
        cursor.setDate(cursor.getDate() + 1);
      }
      router.refresh();
      setMessage(`Selesai: ${windows} rentang, ${orders} order masuk, ${settlements} settlement. ${incomplete ? `${incomplete} settlement masih belum memiliki nominal; periksa izin API Shopee.` : "Nominal settlement terisi."}`);
    } catch (error) {
      router.refresh();
      setMessage(`Rekonsiliasi berhenti setelah ${windows} rentang: ${error instanceof Error ? error.message : "kesalahan tidak dikenal"}. Data yang sudah tersinkron tetap tersimpan.`);
    } finally {
      setRunning(false);
    }
  }

  return (
    <div className="rounded-xl border border-sky-200 bg-sky-50 p-4 text-sm text-slate-700">
      <div className="font-bold text-slate-900">Cocokkan ulang data historis Shopee</div>
      <p className="mt-1 text-xs text-slate-600">Mengambil ulang order, transaksi Saldo Penjual, dan nominal settlement per 14 hari. Tidak mengubah HPP, SKU, atau transaksi di Shopee.</p>
      <div className="mt-3 flex flex-wrap items-end gap-2">
        <label className="text-xs font-semibold text-slate-700">Mulai tanggal
          <input className="mt-1 block rounded-lg border border-slate-300 bg-white px-3 py-2" type="date" value={fromDate} max={localDate(new Date())} onChange={(event) => setFromDate(event.target.value)} disabled={running} />
        </label>
        <button className="ui-button ui-button-primary" type="button" onClick={run} disabled={running}>{running ? "Mencocokkan…" : "Sinkron ulang sampai hari ini"}</button>
      </div>
      {message && <p className="mt-3 rounded-lg bg-white p-2 text-xs" role="status">{message}</p>}
    </div>
  );
}