import { useId, 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 { parseLocalDate } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CategoryPicker } from "@/components/elements/CategoryPicker";
import { DatePicker } from "@/components/elements/DatePicker";
import { Link } from "react-router-dom";
import { ToolCard, QueryError, useToolAction } from "./shared";
import { useAccountCurrencies } from "./CurrencyTools";

type Scheduled = { id: string; title: string; amount: number; currency: string; type: string; category: string; accountId: string; nextDate: string; cadence: string; active: boolean };
type Forecast = { basis: string; unconfirmedAccounts: string[]; groups: { currency: string; opening: number; scheduledEnd: number; scenarioEnd: number;
  events: { date: string; title: string; amount: number; balance: number; overdue: boolean }[] }[] };

export function PlanningTools({ compact = false }: { compact?: boolean }) {
  const { accounts } = useFinanceData();
  const { hidden } = useMoney();
  const id = useId();
  const [addOpen, setAddOpen] = useState(false);
  const [listOpen, setListOpen] = useState(false);
  const [forecastOpen, setForecastOpen] = useState(false);
  const currencies = useAccountCurrencies();
  const schedules = useQuery({ queryKey: ["enhanced", "schedules"], queryFn: () => api.enhanced.get<Scheduled[]>("schedules") });
  const [title, setTitle] = useState("");
  const [amount, setAmount] = useState("");
  const [accountId, setAccount] = useState("");
  const [type, setType] = useState("expense");
  const [category, setCategory] = useState("Bills & Utilities");
  const [nextDate, setDate] = useState(toDateString(new Date()));
  const [cadence, setCadence] = useState("monthly");
  const [extraSpend, setSpend] = useState("0");
  const [end, setEnd] = useState(toDateString(new Date(Date.now() + 30 * 86400000)));
  const action = useToolAction();
  const today = toDateString(new Date());
  const validScenario = !!end && end >= today && extraSpend !== "" && Number.isFinite(Number(extraSpend)) && Number(extraSpend) >= 0;
  const forecast = useQuery({ queryKey: ["enhanced", "forecast", today, end, extraSpend], enabled: validScenario && (compact || forecastOpen),
    queryFn: () => api.enhanced.get<Forecast>(`forecast?start=${today}&end=${end}&extra_spend=${Number(extraSpend)}`) });
  const available = accounts.filter(a => ["checking", "savings", "cash", "credit", "loan"].includes(a.type) && currencies.data?.[a.id]);
  const valid = !!title.trim() && Number(amount) > 0 && Number.isFinite(Number(amount)) && available.some(account => account.id === accountId) && !!nextDate;
  const forecastResults = <div className="space-y-4">
    {!validScenario && <p role="alert">Choose a valid period and nonnegative scenario spending.</p>}
    <QueryError error={forecast.error} />
    {forecast.isFetching && <p role="status" className="text-sm text-muted-foreground">Updating forecast…</p>}
    {forecast.data?.unconfirmedAccounts.length ? <p className="text-sm">Confirm the currency of {forecast.data.unconfirmedAccounts.length} accounts in Data Sources to include them.</p> : null}
    {forecast.data?.groups.map(group => <div className="space-y-2 border-t pt-3" key={group.currency}>
      <p className="text-sm font-medium">{group.currency} · Current {formatMoney(group.opening, group.currency)} · Scheduled end {formatMoney(group.scheduledEnd, group.currency)}{!compact && <> · Scenario {formatMoney(group.scenarioEnd, group.currency)}</>}</p>
      {(compact ? group.events.slice(0, 5) : group.events).map((event, i) => <p className="flex justify-between gap-3 text-sm" key={`${event.date}-${i}`}><span>{event.date} · {event.title}{event.overdue ? " (overdue)" : ""}</span><span>{formatMoney(event.amount, group.currency)}</span></p>)}
    </div>)}
    <p className="text-xs text-muted-foreground">{forecast.data?.basis || "Based on current balances and scheduled items."}</p>
  </div>;

  return <>
    {!compact && <>
      <ToolCard title="Scheduled bills and income">
        <QueryError error={schedules.error} />
        <p className="text-sm text-muted-foreground">Plan expected bills and income in one place.</p>
        <p className="text-xs text-muted-foreground">{schedules.data?.length || 0} scheduled items</p>
        <div className="flex flex-wrap gap-2"><Button onClick={() => setAddOpen(true)}>Add schedule</Button><Button variant="outline" onClick={() => setListOpen(true)}>View scheduled items</Button></div>
      </ToolCard>
      <Dialog open={addOpen} onOpenChange={setAddOpen}><DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-lg"><DialogHeader><DialogTitle>Add a scheduled bill or income</DialogTitle><DialogDescription>Plan a future transaction. This does not make a bank payment.</DialogDescription></DialogHeader>
        <QueryError error={currencies.error} />
        {!accounts.length ? <div className="space-y-3"><p className="text-sm text-muted-foreground">Connect your bank to choose an account for this schedule.</p><Button asChild><Link to="/settings/sources?connect=1">Connect your bank</Link></Button></div> : !available.length ? <p className="text-sm text-muted-foreground">Choose an account currency in Settings → Data Sources to start.</p> : null}
        <form className="space-y-4" onSubmit={event => { event.preventDefault(); if (valid) action.mutate(async () => {
          await api.enhanced.post("schedules", { title: title.trim(), amount: Number(amount), type, category, accountId, currency: currencies.data![accountId], nextDate, cadence });
          setTitle(""); setAmount(""); setAddOpen(false);
        }); }}>
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2"><Label htmlFor={`${id}-title`}>Description</Label><Input id={`${id}-title`} value={title} onChange={event => setTitle(event.target.value)} maxLength={120} required /></div>
            <div className="space-y-2"><Label htmlFor={`${id}-amount`}>Amount</Label><Input id={`${id}-amount`} type={hidden ? "password" : "number"} inputMode="decimal" min="0.01" step="0.01" value={amount} onChange={event => setAmount(event.target.value)} required /></div>
            <div className="space-y-2"><Label htmlFor={`${id}-account`}>Account</Label><Select value={accountId} onValueChange={setAccount}><SelectTrigger id={`${id}-account`}><SelectValue placeholder="Choose account" /></SelectTrigger><SelectContent>{available.map(account => <SelectItem key={account.id} value={account.id}>{account.nickname || account.name} ({currencies.data?.[account.id]})</SelectItem>)}</SelectContent></Select></div>
            <div className="space-y-2"><Label htmlFor={`${id}-direction`}>Direction</Label><Select value={type} onValueChange={value => { setType(value); setCategory(value === "income" ? "Income" : "Bills & Utilities"); }}><SelectTrigger id={`${id}-direction`}><SelectValue /></SelectTrigger><SelectContent><SelectItem value="expense">Expense</SelectItem><SelectItem value="income">Income</SelectItem></SelectContent></Select></div>
            <div className="space-y-2"><Label>Due date</Label><DatePicker value={nextDate} onChange={value => setDate(value || "")} aria-label="Due date" /></div>
            <div className="space-y-2"><Label htmlFor={`${id}-repeat`}>Repeat</Label><Select value={cadence} onValueChange={setCadence}><SelectTrigger id={`${id}-repeat`}><SelectValue /></SelectTrigger><SelectContent>{["once", "weekly", "fortnightly", "monthly", "quarterly", "yearly"].map(value => <SelectItem key={value} value={value}>{value.charAt(0).toUpperCase() + value.slice(1)}</SelectItem>)}</SelectContent></Select></div>
            <div className="space-y-2 sm:col-span-2"><Label>Category</Label><CategoryPicker value={category} onChange={setCategory} /></div>
          </div>
          <div className="flex justify-end gap-2"><Button type="button" variant="outline" onClick={() => setAddOpen(false)}>Cancel</Button><Button type="submit" disabled={!valid || action.isPending}>{action.isPending ? "Saving…" : "Save schedule"}</Button></div>
        </form>
      </DialogContent></Dialog>
      <Dialog open={listOpen} onOpenChange={setListOpen}><DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-xl"><DialogHeader><DialogTitle>Scheduled items</DialogTitle><DialogDescription>Skip a payment already in your transactions. Record manually adds a ledger entry without making a bank payment.</DialogDescription></DialogHeader>
        <QueryError error={schedules.error} />
        {!schedules.data?.length && <p className="py-6 text-sm text-muted-foreground">No scheduled items yet. Add a bill or income to get started.</p>}
        {schedules.data?.map(schedule => <div className="space-y-3 border-t pt-3" key={schedule.id}>
          <div><p className="text-sm font-medium">{schedule.title} · {formatMoney(schedule.amount, schedule.currency)}</p><p className="text-xs text-muted-foreground">{schedule.nextDate} · {schedule.cadence} · {schedule.type}{!schedule.active ? " · paused / completed" : schedule.nextDate < today ? " · overdue" : ""}</p></div>
          <div className="flex flex-wrap gap-2">{schedule.active && <><Button variant="outline" size="sm" disabled={action.isPending || schedule.nextDate > today} onClick={() => action.mutate(() => api.enhanced.post(`schedules/${schedule.id}/complete`, { date: schedule.nextDate }))}>Record manually</Button><Button variant="outline" size="sm" disabled={action.isPending} onClick={() => action.mutate(() => api.enhanced.post(`schedules/${schedule.id}/complete`, { date: schedule.nextDate, skip: true }))}>Skip</Button></>}
            <Button variant="ghost" size="sm" disabled={action.isPending} onClick={() => action.mutate(() => api.enhanced.post(`schedules/${schedule.id}/pause`, { archived: schedule.active }))}>{schedule.active ? "Pause" : "Resume"}</Button></div>
        </div>)}
      </DialogContent></Dialog>
    </>}
    <ToolCard title={compact ? "Upcoming scheduled cashflow" : "Scheduled cashflow and scenario forecast"}>
      {compact ? forecastResults : <><p className="text-sm text-muted-foreground">Explore how upcoming payments and extra spending could affect your balance.</p><Button variant="outline" onClick={() => setForecastOpen(true)}>Explore forecast</Button></>}
    </ToolCard>
    {!compact && <Dialog open={forecastOpen} onOpenChange={setForecastOpen}><DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-xl"><DialogHeader><DialogTitle>Cashflow forecast</DialogTitle><DialogDescription>Current balances plus scheduled items and your spending scenario. This is an estimate.</DialogDescription></DialogHeader>
      <div className="grid gap-4 sm:grid-cols-2"><div className="space-y-2"><Label>Forecast through</Label><DatePicker aria-label="Forecast through" value={end} minDate={parseLocalDate(today)} onChange={value => setEnd(value || "")} /></div><div className="space-y-2"><Label htmlFor={`${id}-extra`}>Additional spending in each currency</Label><Input id={`${id}-extra`} type={hidden ? "password" : "number"} min="0" step="0.01" value={extraSpend} onChange={event => setSpend(event.target.value)} /></div></div>
      {forecastResults}
    </DialogContent></Dialog>}
  </>;
}