"use client";

import { useEffect, useState, useMemo, useCallback } from "react";
import { PageHeader } from "@/components/ui/PageHeader";
import SearchableSelect from "@/components/ui/SearchableSelect";
import { RefreshCw } from "lucide-react";

interface Bank {
  id: string;
  name: string;
}

interface CustomerBalance {
  currency_id: string | null;
  bank_id: string | null;
  balance: string | null;
  last_updated: string | null;
  cnt: string | null;
  stock_id: string | null;
}

interface CashBalanceResponse {
  status: string;
  data: {
    customer_balance: CustomerBalance;
    banks: Bank[];
    meta: {
      page_title: string;
      breadcrumbs: {
        [key: string]: string;
      };
    };
  };
}

export default function CashBalance() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<CashBalanceResponse | null>(null);
  const [selectedBank, setSelectedBank] = useState<{ label: string; value: string } | null>(null);
  const [error, setError] = useState<string | null>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/cash-balance", {
        method: "GET",
        credentials: "include",
        cache: "no-store",
      });

      if (!res.ok) {
        const detail = await res.text();
        throw new Error(`Failed to fetch cash balance (${res.status}): ${detail}`);
      }

      const json = await res.json();
      setData(json);
    } catch (err) {
      console.error("Fetch error:", err);
      setError(err instanceof Error ? err.message : "Failed to load cash balance data");
      setData(null);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const customerBalance = useMemo(
    () => data?.data?.customer_balance,
    [data?.data?.customer_balance]
  );

  const actionButtonClass = useCallback(
    (disabled: boolean) =>
      disabled
        ? "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-medium text-gray-500 shadow-sm transition-all duration-200 cursor-not-allowed"
        : "inline-flex items-center gap-1 rounded-lg border border-[#428B4D]/40 bg-white px-2 py-1 text-xs font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40 active:scale-95",
    []
  );

  const formatCurrency = useCallback((value: string | null) => {
    if (!value) return "—";
    const normalized = value.replace(/,/g, "").trim();
    if (!normalized) return "—";
    const parsed = Number.parseFloat(normalized);
    if (Number.isFinite(parsed)) {
      return parsed.toLocaleString("en-US", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    }
    return value;
  }, []);

  const pageTitle = useMemo(
    () => data?.data?.meta?.page_title || "Cash Balance",
    [data?.data?.meta?.page_title]
  );

  const breadcrumbs = useMemo(
    () => [
      { label: "Home", href: "/" },
      { label: "Cash" },
      { label: "Balance" },
    ],
    []
  );

  const handleBankChange = useCallback(
    (option: { label: string; value: string } | null) => {
      setSelectedBank(option);
    },
    []
  );

  const formattedBalance = useMemo(
    () => (customerBalance?.balance ? formatCurrency(customerBalance.balance) : "—"),
    [customerBalance?.balance, formatCurrency]
  );

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title={pageTitle}
        description="View and manage cash balances across different banks"
        breadcrumbs={breadcrumbs}
        actions={
          <button
            onClick={loadData}
            disabled={loading}
            className={actionButtonClass(loading)}
          >
            <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
            {loading ? "Loading..." : "Refresh"}
          </button>
        }
      />

      {error && (
        <div className="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {loading && !data ? (
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <RefreshCw className="mx-auto h-8 w-8 animate-spin text-[#428B4D]" />
            <p className="mt-2 text-sm text-slate-500">Loading cash balance data...</p>
          </div>
        </div>
      ) : (
        <div className="space-y-6">
          {/* Bank Selection */}
          <div className="rounded-lg border border-[#428B4D]/15 bg-white/95 p-6 shadow-md">
            <h2 className="mb-4 text-lg font-semibold text-slate-800">Select Bank</h2>
            <div className="max-w-md">
              <SearchableSelect
                label="Bank"
                apiUrl="/api/cash-balance/banks"
                value={selectedBank}
                onChange={handleBankChange}
                placeholder="Select a bank to view balance..."
              />
            </div>
          </div>

          {/* Balance Information */}
          {selectedBank && customerBalance && (
            <div className="rounded-lg border border-[#428B4D]/15 bg-white/95 p-6 shadow-md">
              <div className="mb-4 flex items-center justify-between">
                <h2 className="text-lg font-semibold text-slate-800">
                  Balance Information
                </h2>
                <span className="rounded-full bg-[#428B4D]/10 px-3 py-1 text-xs font-semibold text-[#428B4D]">
                  {selectedBank.label}
                </span>
              </div>

              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                    Balance
                  </p>
                  <p className="mt-1 text-lg font-semibold text-slate-800">
                    {formattedBalance}
                  </p>
                </div>

                <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                    Currency ID
                  </p>
                  <p className="mt-1 text-lg font-semibold text-slate-800">
                    {customerBalance.currency_id || "—"}
                  </p>
                </div>

                <div className="rounded-lg border border-slate-100 bg-slate-50/80 px-4 py-4 shadow-inner">
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                    Last Updated
                  </p>
                  <p className="mt-1 text-lg font-semibold text-slate-800">
                    {customerBalance.last_updated || "—"}
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Show message if bank selected but no balance data */}
          {selectedBank && !customerBalance && (
            <div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-8 text-center">
              <p className="text-sm text-slate-500">
                No balance information available for the selected bank.
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}