"use client";

import { useEffect, useState } from "react";
import { ForecastChart } from "@/components/ForecastChart";
import { formatVNDSigned } from "@/lib/finance";

function currentPeriod() {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
}

export default function CashFlowPage() {
  const [mode, setMode] = useState("CONSOLIDATED");
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    fetch(`/api/dashboard?mode=${mode}&period=${currentPeriod()}`)
      .then((r) => r.json())
      .then(setData);
  }, [mode]);

  return (
    <div>
      <div className="border-b border-slate-100 bg-white px-8 py-5">
        <h1 className="text-2xl font-extrabold text-slate-800">Dự báo dòng tiền 60 ngày</h1>
        <p className="text-sm text-slate-400">Số dư cuối ngày = Số dư đầu ngày + Tiền thực thu − Tiền thực chi (code tính, không dùng AI).</p>
      </div>
      <div className="flex flex-col gap-6 p-8">
        <div className="inline-flex w-fit rounded-xl bg-slate-100 p-1">
          {[
            ["CONSOLIDATED", "Hợp nhất"],
            ["PERSONAL", "Cá nhân"],
            ["BUSINESS", "Doanh nghiệp"],
          ].map(([k, l]) => (
            <button key={k} onClick={() => setMode(k)} className={`rounded-lg px-4 py-2 text-sm font-semibold ${mode === k ? "bg-teal-500 text-white" : "text-slate-500"}`}>
              {l}
            </button>
          ))}
        </div>

        {data && (
          <>
            <div className="card p-5">
              <div className="mb-1 font-bold text-slate-800">3 kịch bản dự báo</div>
              <ForecastChart forecast={data.forecast} />
            </div>

            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
              {[7, 14, 30, 60].map((d) => (
                <div key={d} className="card p-4">
                  <div className="text-xs text-slate-400">Thay đổi dự kiến {d} ngày</div>
                  <div className="text-lg font-bold text-slate-800">{formatVNDSigned(data.kpis[`forecast${d}`])}</div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}