import { useMemo, useState } from 'react'
import { useStore } from '../store/AppStore'
import {
  Badge,
  Button,
  Card,
  ConfirmDialog,
  DataTable,
  Field,
  Input,
  JalaliDateInput,
  Modal,
  PageHeader,
  Select,
  type Column,
} from '../components/ui'
import type { Voucher, VoucherLine } from '../types'
import { createId, nextNumber } from '../utils/id'
import { formatDate, formatMoney, todayISO, toFa } from '../utils/format'
import { voucherBalance } from '../utils/accounting'

const newLine = (): VoucherLine => ({
  id: createId('vl-'),
  accountId: '',
  description: '',
  debit: 0,
  credit: 0,
})

function createDraft(items: Voucher[]): Voucher {
  return {
    id: '',
    number: nextNumber(items),
    date: todayISO(),
    description: '',
    status: 'draft',
    lines: [newLine(), newLine()],
  }
}

export function Vouchers() {
  const { data, upsertVoucher, removeVoucher } = useStore()
  const [draft, setDraft] = useState<Voucher | null>(null)
  const [toDelete, setToDelete] = useState<Voucher | null>(null)

  const leafAccounts = useMemo(
    () => data.accounts.filter((account) => !account.isGroup),
    [data.accounts],
  )
  const accountName = (id: string) => leafAccounts.find((a) => a.id === id)?.name ?? '—'

  const sorted = useMemo(
    () => [...data.vouchers].sort((a, b) => b.date.localeCompare(a.date) || b.number - a.number),
    [data.vouchers],
  )

  const balance = draft ? voucherBalance(draft) : null

  const updateLine = (lineId: string, patch: Partial<VoucherLine>) => {
    if (!draft) return
    setDraft({
      ...draft,
      lines: draft.lines.map((line) => (line.id === lineId ? { ...line, ...patch } : line)),
    })
  }

  const handleSave = (status: Voucher['status']) => {
    if (!draft) return
    const cleanLines = draft.lines.filter((line) => line.accountId && (line.debit > 0 || line.credit > 0))
    if (cleanLines.length < 2) return
    const candidate: Voucher = { ...draft, lines: cleanLines, status }
    if (status === 'posted' && !voucherBalance(candidate).balanced) return
    upsertVoucher({ ...candidate, id: candidate.id || createId('v-') })
    setDraft(null)
  }

  const columns: Array<Column<Voucher>> = [
    {
      key: 'number',
      header: 'شماره',
      headerClassName: 'w-[4.5rem]',
      className: 'w-[4.5rem] whitespace-nowrap',
      render: (v) => <span className="font-mono">{toFa(v.number)}</span>,
    },
    {
      key: 'date',
      header: 'تاریخ',
      headerClassName: 'w-[6.5rem]',
      className: 'w-[6.5rem] whitespace-nowrap tabular-nums',
      render: (v) => formatDate(v.date),
    },
    {
      key: 'desc',
      header: 'شرح',
      truncate: true,
      className: 'min-w-0',
      render: (v) => (
        <span className="block truncate text-slate-700" title={v.description || undefined}>
          {v.description || '—'}
        </span>
      ),
    },
    {
      key: 'amount',
      header: 'مبلغ',
      align: 'end',
      headerClassName: 'w-[7.5rem]',
      className: 'w-[7.5rem] whitespace-nowrap tabular-nums',
      render: (v) => formatMoney(voucherBalance(v).debit),
    },
    {
      key: 'status',
      header: 'وضعیت',
      sticky: { left: '9rem' },
      headerClassName: 'w-[6.5rem]',
      className: 'w-[6.5rem] whitespace-nowrap',
      render: (v) =>
        v.status === 'posted' ? <Badge tone="green">ثبت قطعی</Badge> : <Badge tone="amber">پیش‌نویس</Badge>,
    },
    {
      key: 'actions',
      header: '',
      align: 'end',
      sticky: { left: '0' },
      headerClassName: 'w-[9rem]',
      className: 'w-[9rem] whitespace-nowrap',
      render: (v) => (
        <div className="flex justify-end gap-1">
          <Button size="sm" variant="ghost" onClick={() => setDraft({ ...v, lines: v.lines.map((l) => ({ ...l })) })}>
            ویرایش
          </Button>
          <Button size="sm" variant="ghost" className="text-rose-600" onClick={() => setToDelete(v)}>
            حذف
          </Button>
        </div>
      ),
    },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title="اسناد حسابداری"
        subtitle="ثبت اسناد دوطرفه با کنترل تراز بدهکار و بستانکار"
        actions={
          <Button icon="＋" onClick={() => setDraft(createDraft(data.vouchers))}>
            سند جدید
          </Button>
        }
      />

      <Card className="p-4">
        <DataTable
          columns={columns}
          rows={sorted}
          rowKey={(v) => v.id}
          emptyTitle="سندی ثبت نشده است"
          emptyDescription="اولین سند حسابداری خود را ایجاد کنید."
        />
      </Card>

      <Modal
        open={draft !== null}
        title={draft?.id ? `ویرایش سند #${toFa(draft.number)}` : 'سند حسابداری جدید'}
        onClose={() => setDraft(null)}
        size="xl"
        footer={
          <>
            <div className="me-auto flex items-center gap-4 text-sm">
              <span className="text-slate-500">
                بدهکار: <span className="tabular-nums font-semibold text-slate-700">{formatMoney(balance?.debit ?? 0)}</span>
              </span>
              <span className="text-slate-500">
                بستانکار: <span className="tabular-nums font-semibold text-slate-700">{formatMoney(balance?.credit ?? 0)}</span>
              </span>
              {balance?.balanced ? (
                <Badge tone="green">تراز است</Badge>
              ) : (
                <Badge tone="rose">اختلاف {formatMoney(Math.abs((balance?.debit ?? 0) - (balance?.credit ?? 0)))}</Badge>
              )}
            </div>
            <Button variant="secondary" onClick={() => setDraft(null)}>
              انصراف
            </Button>
            <Button variant="secondary" onClick={() => handleSave('draft')}>
              ذخیره پیش‌نویس
            </Button>
            <Button variant="success" disabled={!balance?.balanced} onClick={() => handleSave('posted')}>
              ثبت قطعی
            </Button>
          </>
        }
      >
        {draft && (
          <div className="space-y-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <Field label="شماره سند">
                <Input
                  type="number"
                  value={draft.number}
                  onChange={(e) => setDraft({ ...draft, number: Number(e.target.value) || 0 })}
                />
              </Field>
              <Field label="تاریخ">
                <JalaliDateInput value={draft.date} onChange={(date) => setDraft({ ...draft, date })} />
              </Field>
              <Field label="شرح سند">
                <Input value={draft.description} onChange={(e) => setDraft({ ...draft, description: e.target.value })} />
              </Field>
            </div>

            <div className="overflow-x-auto rounded-xl border border-slate-200">
              <table className="w-full text-sm">
                <thead className="bg-slate-50 text-slate-500">
                  <tr>
                    <th className="px-3 py-2 text-start font-medium">حساب</th>
                    <th className="px-3 py-2 text-start font-medium">شرح ردیف</th>
                    <th className="px-3 py-2 text-end font-medium">بدهکار</th>
                    <th className="px-3 py-2 text-end font-medium">بستانکار</th>
                    <th className="px-3 py-2" />
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {draft.lines.map((line) => (
                    <tr key={line.id}>
                      <td className="px-2 py-1.5">
                        <Select
                          value={line.accountId}
                          onChange={(e) => updateLine(line.id, { accountId: e.target.value })}
                        >
                          <option value="">انتخاب حساب…</option>
                          {leafAccounts.map((account) => (
                            <option key={account.id} value={account.id}>
                              {account.code} - {account.name}
                            </option>
                          ))}
                        </Select>
                      </td>
                      <td className="px-2 py-1.5">
                        <Input
                          value={line.description}
                          onChange={(e) => updateLine(line.id, { description: e.target.value })}
                          placeholder="شرح"
                        />
                      </td>
                      <td className="px-2 py-1.5">
                        <Input
                          type="number"
                          className="text-end"
                          value={line.debit || ''}
                          onChange={(e) =>
                            updateLine(line.id, { debit: Number(e.target.value) || 0, credit: 0 })
                          }
                        />
                      </td>
                      <td className="px-2 py-1.5">
                        <Input
                          type="number"
                          className="text-end"
                          value={line.credit || ''}
                          onChange={(e) =>
                            updateLine(line.id, { credit: Number(e.target.value) || 0, debit: 0 })
                          }
                        />
                      </td>
                      <td className="px-2 py-1.5 text-center">
                        <button
                          onClick={() =>
                            setDraft({ ...draft, lines: draft.lines.filter((l) => l.id !== line.id) })
                          }
                          className="text-slate-400 transition hover:text-rose-600"
                          aria-label="حذف ردیف"
                          disabled={draft.lines.length <= 2}
                        >
                          ✕
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <Button
              size="sm"
              variant="secondary"
              icon="＋"
              onClick={() => setDraft({ ...draft, lines: [...draft.lines, newLine()] })}
            >
              افزودن ردیف
            </Button>

            {draft.lines.some((l) => l.accountId) && (
              <p className="text-xs text-slate-400">
                حساب‌های انتخاب‌شده: {draft.lines.filter((l) => l.accountId).map((l) => accountName(l.accountId)).join('، ')}
              </p>
            )}
          </div>
        )}
      </Modal>

      <ConfirmDialog
        open={toDelete !== null}
        title="حذف سند"
        message={`سند شماره ${toFa(toDelete?.number ?? 0)} حذف شود؟`}
        onCancel={() => setToDelete(null)}
        onConfirm={() => {
          if (toDelete) removeVoucher(toDelete.id)
          setToDelete(null)
        }}
      />
    </div>
  )
}