"use client";

import { useState } from "react";
import { EntryForm } from "@/components/EntryForm";
import { BalanceBaselineCard } from "@/components/BalanceBaselineCard";
import { type Scope } from "@/lib/categories";

export default function QuickEntryPage() {
  const [scope, setScope] = useState<Scope>("PERSONAL");

  return (
    <div>
      <div className="border-b border-slate-100 bg-white px-8 py-5">
        <h1 className="text-2xl font-extrabold text-slate-800">Nhập số</h1>
        <p className="text-sm text-slate-400">Chỉ nhập số, chọn chu kỳ và ngày đến hạn — hệ thống tự tạo lịch thu/chi.</p>
      </div>
      <div className="flex flex-col gap-6 p-8">
        <div className="inline-flex w-fit rounded-xl bg-slate-100 p-1">
          {(["PERSONAL", "BUSINESS"] as Scope[]).map((s) => (
            <button
              key={s}
              onClick={() => setScope(s)}
              className={`rounded-lg px-4 py-2 text-sm font-semibold ${scope === s ? "bg-teal-500 text-white" : "text-slate-500"}`}
            >
              {s === "PERSONAL" ? "Cá nhân" : "Doanh nghiệp"}
            </button>
          ))}
        </div>

        <div className="card bg-teal-50/60 p-4 text-sm text-teal-800">
          <span className="font-semibold">Option 1: Đơn giản – Nhanh nhất.</span> Chỉ nhập số tiền, chọn chu kỳ và ngày đến hạn.
          Phù hợp người mới bắt đầu, muốn có kết quả nhanh.
        </div>

        <BalanceBaselineCard scope={scope} />

        <EntryForm scope={scope} />
      </div>
    </div>
  );
}