import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/lib/api";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useMoney } from "@/hooks/useMoney";
import { formatMoney, toDateString } from "@/lib/format";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { ToolCard, QueryError, useToolAction } from "./shared";

export const CURRENCIES = ["USD", "INR", "EUR", "GBP", "CAD", "AUD", "JPY", "CHF", "SGD", "NZD", "AED", "HKD", "CNY", "KRW", "MXN", "BRL", "SEK", "NOK", "DKK", "ZAR"];
export const selectClass = "h-10 rounded-md border border-input bg-background px-3 text-sm";
export function useAccountCurrencies() {
  return useQuery({ queryKey: ["enhanced", "currencies"], queryFn: () => api.enhanced.get<Record<string, string>>("currencies") });
}
export function CurrencyTools() {
  const { accounts, currency } = useFinanceData();
  const query = useAccountCurrencies();
  const action = useToolAction();
  const [selection, setSelection] = useState<Record<string, string>>({});
  return <ToolCard title="Account currencies">
    <QueryError error={query.error} />
    <p className="text-sm text-muted-foreground">Confirm the unit used by each account. This labels existing amounts without converting them. Confirmed currencies cannot be changed here.</p>
    {accounts.map(a => <div key={a.id} className="flex flex-wrap items-center gap-2"><span className="flex-1 text-sm">{a.nickname || a.name}</span>
      {query.data?.[a.id] ? <span className="text-sm">{query.data[a.id]} · confirmed</span> : a.id.startsWith("plaid-") ? <span className="text-sm">Refresh bank sync to confirm currency</span> : <>
        <select aria-label={`Currency for ${a.name}`} className={selectClass} value={selection[a.id] || currency} onChange={e => setSelection(v => ({ ...v, [a.id]: e.target.value }))}>
          {CURRENCIES.map(c => <option key={c}>{c}</option>)}
        </select><Button variant="outline" disabled={!query.data || action.isPending} onClick={() => action.mutate(() => api.enhanced.post(`accounts/${encodeURIComponent(a.id)}/currency`, { currency: selection[a.id] || currency }))}>Confirm currency</Button>
      </>}
    </div>)}
  </ToolCard>;
}

type Report = { currency: string | null; accountId: string | null; income: number; expenses: number; net: number; categories: Record<string, number> };
export function CurrencyReport() {
  useMoney(); // Subscribe to the shared privacy preference.
  const today = new Date();
  const [start, setStart] = useState(toDateString(new Date(today.getFullYear(), today.getMonth(), 1)));
  const [end, setEnd] = useState(toDateString(today));
  const valid = !!start && !!end && start <= end;
  const report = useQuery({ queryKey: ["enhanced", "currency-report", start, end], enabled: valid,
    queryFn: () => api.enhanced.get<Report[]>(`reports?start=${start}&end=${end}`) });
  return <ToolCard title="Spending by currency and split category">
    <div className="flex flex-wrap gap-3"><label className="text-sm">From<Input aria-label="Report start" type="date" value={start} onChange={e => setStart(e.target.value)} /></label>
      <label className="text-sm">Through<Input aria-label="Report end" type="date" value={end} onChange={e => setEnd(e.target.value)} /></label></div>
    {!valid && <p role="alert">Choose a valid date range.</p>}<QueryError error={report.error} />
    <p className="text-xs text-muted-foreground">Currencies are reported separately. Splits count against their own categories; internal transfers are excluded. Unconfirmed amounts have no currency label.</p>
    {report.data?.map(g => <div className="space-y-2 border-t pt-3" key={g.currency || g.accountId}><h3 className="font-medium">{g.currency || `Unconfirmed account: ${g.accountId}`}</h3>
      {!g.currency ? <p>Confirm account currencies in Settings → Data Sources to include these amounts in monetary totals.</p> : <>
        <p className="text-sm">In {formatMoney(g.income, g.currency)} · Out {formatMoney(g.expenses, g.currency)} · Net {formatMoney(g.net, g.currency)}</p>
        {Object.entries(g.categories).map(([c, amount]) => <p className="flex justify-between text-sm" key={c}><span>{c}</span><span>{formatMoney(amount, g.currency)}</span></p>)}
      </>}
    </div>)}
    {!report.isPending && !report.error && report.data?.length === 0 && <p className="text-sm">No dated transactions in this period.</p>}
  </ToolCard>;
}

type Result = { currency: string; expected: number; difference: number; transactionCount: number; hasUndatedTransactions: boolean;
  transactions: { id: string; date: string; description: string; amount: number }[] };
type Saved = { id: string; startDate: string; endDate: string; currency: string; difference: number; stale: boolean };
export function ReconciliationTool({ accountId }: { accountId: string }) {
  const { hidden } = useMoney();
  const currency = useAccountCurrencies();
  const [startDate, setStart] = useState("");
  const [endDate, setEnd] = useState("");
  const [opening, setOpening] = useState("");
  const [closing, setClosing] = useState("");
  const [preview, setPreview] = useState<Result | null>(null);
  const saved = useQuery({ queryKey: ["enhanced", "reconciliations", accountId], enabled: !!currency.data?.[accountId], queryFn: () => api.enhanced.get<Saved[]>(`accounts/${encodeURIComponent(accountId)}/reconciliations`) });
  const action = useToolAction();
  const payload = { startDate, endDate, opening: Number(opening), closing: Number(closing) };
  const valid = startDate && endDate && startDate <= endDate && opening !== "" && closing !== "" && Number.isFinite(Number(opening)) && Number.isFinite(Number(closing));
  const edit = (fn: () => void) => { fn(); setPreview(null); };
  return <ToolCard title="Reconcile a statement">
    {!currency.data?.[accountId] ? <p className="text-sm">Confirm this account's currency in Settings → Data Sources first.</p> : <>
      <p className="text-sm text-muted-foreground">Compare the statement's opening and closing balances with the ledger. Both dates are inclusive. For credit cards and loans, enter positive balances owed. Saving a comparison does not change your account balance.</p>
      <div className="grid grid-cols-2 gap-3">
        <label className="text-sm">Start date<Input type="date" value={startDate} onChange={e => edit(() => setStart(e.target.value))} /></label>
        <label className="text-sm">End date<Input type="date" value={endDate} onChange={e => edit(() => setEnd(e.target.value))} /></label>
        <label className="text-sm">Opening ({currency.data[accountId]})<Input type={hidden ? "password" : "number"} step="0.01" value={opening} onChange={e => edit(() => setOpening(e.target.value))} /></label>
        <label className="text-sm">Closing ({currency.data[accountId]})<Input type={hidden ? "password" : "number"} step="0.01" value={closing} onChange={e => edit(() => setClosing(e.target.value))} /></label>
      </div>
      <Button variant="outline" disabled={!valid || action.isPending} onClick={() => action.mutate(async () => setPreview(await api.enhanced.post<Result>(`accounts/${encodeURIComponent(accountId)}/reconcile/preview`, payload)))}>Preview comparison</Button>
      {preview && <div className="space-y-2"><p className="text-sm">Expected {formatMoney(preview.expected, preview.currency)} · Difference {formatMoney(preview.difference, preview.currency)} · {preview.transactionCount} transactions</p>
        {preview.hasUndatedTransactions && <p role="alert" className="text-sm text-destructive">Undated transactions exist and are excluded. Review their dates before relying on this comparison.</p>}
        <details><summary className="cursor-pointer text-sm">Review included transactions</summary>{preview.transactions.map(t => <p className="text-sm" key={t.id}>{t.date} · {t.description} · {formatMoney(t.amount, preview.currency)}</p>)}</details>
        <Button disabled={action.isPending} onClick={() => action.mutate(() => api.enhanced.post(`accounts/${encodeURIComponent(accountId)}/reconcile`, payload))}>Save comparison</Button>
      </div>}
      <QueryError error={saved.error} />
      {saved.data?.map(s => <p className="text-sm" key={s.id}>{s.startDate}–{s.endDate}: difference {formatMoney(s.difference, s.currency)}{s.stale ? " · ledger changed; compare again" : ""}</p>)}
    </>}
  </ToolCard>;
}