"use client";

// Thẻ "Số dư hiện tại" dùng chung — trước đây chỉ có ở widget "Nhập số nhanh" trên Dashboard,
// khiến trang Nhập số (nguồn nhập liệu chính) không có cách đặt số dư khởi điểm, làm Bước 1
// của Quy trình 60 ngày không bao giờ "Hoàn tất" dù đã nhập đủ khoản thu/chi.
import { useCallback, useEffect, useState } from "react";
import { formatVND } from "@/lib/finance";
import { CurrencyInput } from "@/components/CurrencyInput";
import { ICONS } from "@/lib/icons";
import type { Scope } from "@/lib/categories";

interface Baseline {
  amount: number;
  asOfDate: string;
}

export function BalanceBaselineCard({ scope }: { scope: Scope }) {
  const [current, setCurrent] = useState<Baseline | null>(null);
  const [value, setValue] = useState("");
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch(`/api/balance?scope=${scope}`);
    const json = await res.json();
    const latest = json.baselines?.[0] ?? null;
    setCurrent(latest);
    setValue("");
    setLoading(false);
  }, [scope]);

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

  async function save() {
    if (!value) return;
    setSaving(true);
    setMessage(null);
    try {
      await fetch("/api/balance", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ scope, asOfDate: new Date().toISOString(), amount: Number(value) }),
      });
      setMessage("Đã cập nhật số dư hiện tại.");
      await load();
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="card p-4">
      <div className="mb-2 flex items-center gap-2 text-xs font-bold text-slate-800">
        <ICONS.wallet size={16} strokeWidth={1.75} className="text-slate-400" /> Số dư hiện tại ({scope === "PERSONAL" ? "Cá nhân" : "Doanh nghiệp"})
      </div>
      {!loading && (
        <div className="mb-2 text-xs text-slate-500">
          {current ? (
            <>
              Đang ghi nhận: <span className="font-semibold text-slate-700">{formatVND(current.amount)}</span> (tính từ{" "}
              {new Date(current.asOfDate).toLocaleDateString("vi-VN")})
            </>
          ) : (
            <span className="text-amber-600">Chưa có số dư khởi điểm — Dashboard/dự báo/quy trình sẽ chưa tính đúng cho tới khi bạn nhập.</span>
          )}
        </div>
      )}
      <div className="flex items-center gap-2">
        <CurrencyInput
          value={value}
          onChange={setValue}
          placeholder="Nhập số dư hiện có"
          className="flex-1 rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700"
        />
        <button
          onClick={save}
          disabled={saving || !value}
          className="rounded-lg bg-teal-500 px-3 py-2 text-xs font-semibold text-white hover:bg-teal-600 disabled:opacity-50"
        >
          {saving ? "Đang lưu..." : "Cập nhật"}
        </button>
      </div>
      {message && <div className="mt-1.5 text-xs text-teal-600">{message}</div>}
    </div>
  );
}