"use client";

import { RefreshCw, Landmark } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { useCashBalance } from "@/hooks/useCashBalance";
import { CashActions } from "@/components/cash/CashActions";
import { BankSelection } from "@/components/cash/BankSelection";
import { BankBalanceDetail } from "@/components/cash/BankBalanceDetail";
import { BREADCRUMBS } from "@/constants/breadcrumbs";

export default function CashBalance() {
  const {
    loading,
    selectedBank,
    error,
    banks,
    loadData,
    handleBankChange,
  } = useCashBalance();

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-emerald-50/20">
      <div className="container mx-auto px-4 pt-6 pb-16">

        <PageHeader
          title="Cash Balance"
          description="View and manage cash balances across your banks"
          breadcrumbs={[...BREADCRUMBS.cashBalance]}
          actions={<CashActions isLoading={loading} onRefresh={loadData} />}
        />

        {error && (
          <div className="mb-6 flex items-center gap-3 rounded-xl border border-red-200 bg-red-50 px-5 py-4">
            <div className="h-2 w-2 rounded-full bg-red-400 shrink-0" />
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        {loading ? (
          <div className="flex flex-col items-center justify-center py-24 gap-4">
            <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-[#428B4D]/10">
              <RefreshCw className="h-7 w-7 animate-spin text-[#428B4D]" />
            </div>
            <div className="text-center">
              <p className="text-sm font-medium text-slate-600">Loading banks…</p>
              <p className="text-xs text-slate-400 mt-1">Fetching your cash balance data</p>
            </div>
          </div>
        ) : (
          <div className="space-y-5">

            {/* Bank selector */}
            <BankSelection
              selectedBank={selectedBank}
              onBankChange={handleBankChange}
              banks={banks}
            />

            {/* Balance detail or empty prompt */}
            {selectedBank ? (
              <BankBalanceDetail
                bankId={selectedBank.value}
                bankLabel={selectedBank.label}
              />
            ) : (
              <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-white/60 py-20 text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 mb-4">
                  <Landmark className="h-7 w-7 text-slate-400" />
                </div>
                <p className="text-sm font-semibold text-slate-600">No bank selected</p>
                <p className="mt-1 text-xs text-slate-400 max-w-xs">
                  Select a bank from the dropdown above to view and manage its currency balances.
                </p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}