import { useState } from 'react'
import { Loader2, Plus, X } from 'lucide-react'
import { toast } from 'sonner'
import { FormError } from '@/components/form-field'
import { MoneyInput } from '@/components/money-input'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { monthIndex, monthName, useSetTargets } from '@/lib/debt'
import { formatNumber, parseMoney } from '@/lib/format'
import { formatMonth } from '@/lib/reports'
import { t } from '@/lib/strings'
import type { DebtTarget } from '@/types/DebtTarget'

const s = t.debt
type Row = { key: number; month: string; amount: string }

/** Yol haritası: ay → ay sonu toplam borç hedefi (liste olduğu gibi kaydedilir) */
export function TargetsEditor({
  targets,
  thisMonth,
}: {
  targets: DebtTarget[]
  thisMonth: string
}) {
  const save = useSetTargets()
  const [rows, setRows] = useState<Row[]>(() =>
    targets.map((tg, i) => ({
      key: i,
      month: tg.month,
      amount: formatNumber(tg.closing_target / 100),
    })),
  )
  const [error, setError] = useState<string>()

  function add() {
    const last = rows.length ? monthIndex(rows[rows.length - 1].month) : monthIndex(thisMonth)
    setRows([
      ...rows,
      { key: Date.now(), month: monthName((last ?? 0) + (rows.length ? 1 : 0)), amount: '' },
    ])
  }

  async function submit() {
    setError(undefined)
    const out: DebtTarget[] = []
    for (const r of rows) {
      const k = parseMoney(r.amount)
      if (monthIndex(r.month) === null || k === null || k < 0)
        return setError(`${r.month || '?'}: ay ya da tutar geçersiz`)
      out.push({ month: r.month, closing_target: k })
    }
    try {
      await save.mutateAsync(out.sort((a, b) => a.month.localeCompare(b.month)))
      toast.success(s.targetsSaved)
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e))
    }
  }

  return (
    <div className="space-y-3">
      <p className="text-sm text-muted-foreground">{s.targetsHint}</p>
      <ul className="space-y-2">
        {rows.map((r, i) => (
          <li key={r.key} className="flex items-center gap-2">
            <Input
              type="month"
              aria-label={s.month}
              value={r.month}
              onChange={(e) =>
                setRows(rows.map((x, j) => (j === i ? { ...x, month: e.target.value } : x)))
              }
              className="w-40 shrink-0"
            />
            <div className="min-w-0 flex-1">
              <MoneyInput
                aria-label={`${s.targetAmount} ${r.month ? formatMonth(r.month) : ''}`}
                value={r.amount}
                onChange={(v) => setRows(rows.map((x, j) => (j === i ? { ...x, amount: v } : x)))}
              />
            </div>
            <Button
              variant="ghost"
              size="icon"
              aria-label={s.removeTarget(r.month)}
              onClick={() => setRows(rows.filter((_, j) => j !== i))}
            >
              <X aria-hidden />
            </Button>
          </li>
        ))}
      </ul>
      <FormError message={error} />
      <div className="flex flex-wrap gap-2">
        <Button variant="outline" onClick={add}>
          <Plus aria-hidden />
          {s.addTarget}
        </Button>
        <Button onClick={() => void submit()} disabled={save.isPending}>
          {save.isPending && <Loader2 className="animate-spin" aria-hidden />}
          {s.saveTargets}
        </Button>
      </div>
    </div>
  )
}