import { useEffect, useState, type FormEvent } from 'react'
import { useNavigate } from 'react-router-dom'
import { catalog, partners, purchaseOrders } from '@/api/client'
import type { Item, Partner } from '@/types/api'
import { PageHeader } from '@/components/PageHeader'
import { ErrorBox } from '@/components/ErrorBox'
import { DynamicExtFields } from '@/components/DynamicExtFields'
import { useT } from '@/i18n/LocaleContext'

interface LineInput {
  itemCode: string
  quantity: string
  unitPrice: string
}

export function CreatePurchaseOrderPage() {
  const navigate = useNavigate()
  const t = useT()
  const [code, setCode] = useState('')
  const [partnerCode, setPartnerCode] = useState('')
  const [expectedDate, setExpectedDate] = useState('')
  const [currencyCode] = useState('USD')
  const [lines, setLines] = useState<LineInput[]>([{ itemCode: '', quantity: '', unitPrice: '' }])
  const [items, setItems] = useState<Item[]>([])
  const [supplierList, setSupplierList] = useState<Partner[]>([])
  const [ext, setExt] = useState<Record<string, unknown>>({})
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    Promise.all([catalog.listItems(), partners.list()]).then(([i, p]) => {
      setItems(i)
      const suppliers = p.filter((x) => x.type === 'SUPPLIER' || x.type === 'BOTH')
      setSupplierList(suppliers)
      if (suppliers.length > 0 && !partnerCode) setPartnerCode(suppliers[0].code)
    })
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const addLine = () =>
    setLines([...lines, { itemCode: items[0]?.code ?? '', quantity: '1', unitPrice: '1.00' }])

  const removeLine = (idx: number) => {
    if (lines.length <= 1) return
    setLines(lines.filter((_, i) => i !== idx))
  }

  const updateLine = (idx: number, field: keyof LineInput, value: string) => {
    const next = [...lines]
    next[idx] = { ...next[idx], [field]: value }
    setLines(next)
  }

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault()
    setError(null)
    setSubmitting(true)
    try {
      const extPayload = Object.keys(ext).length > 0 ? ext : undefined
      const created = await purchaseOrders.create({
        code, partnerCode, currencyCode,
        orderDate: new Date().toISOString().slice(0, 10),
        expectedDate: expectedDate || null,
        lines: lines.map((l, i) => ({
          lineNo: i + 1,
          itemCode: l.itemCode,
          quantity: Number(l.quantity),
          unitPrice: Number(l.unitPrice),
          currencyCode,
        })),
        ...(extPayload ? { ext: extPayload } : {}),
      })
      navigate(`/purchase-orders/${created.id}`)
    } catch (err: unknown) {
      setError(err instanceof Error ? err : new Error(String(err)))
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div>
      <PageHeader
        title={t('page.createPurchaseOrder.title')}
        subtitle={t('page.createPurchaseOrder.subtitle')}
        actions={<button className="btn-secondary" onClick={() => navigate('/purchase-orders')}>{t('action.cancel')}</button>}
      />
      <form onSubmit={onSubmit} className="card p-6 space-y-5 max-w-3xl">
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div>
            <label className="block text-sm font-medium text-slate-700">{t('label.orderCode')}</label>
            <input type="text" required value={code} onChange={(e) => setCode(e.target.value)}
              placeholder="PO-2026-0002" className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700">{t('label.supplier')}</label>
            <select required value={partnerCode} onChange={(e) => setPartnerCode(e.target.value)}
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
              {supplierList.map((p) => (
                <option key={p.id} value={p.code}>{p.code} — {p.name}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700">{t('label.expectedDate')}</label>
            <input type="date" value={expectedDate} onChange={(e) => setExpectedDate(e.target.value)}
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm" />
          </div>
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="text-sm font-medium text-slate-700">{t('label.orderLines')}</label>
            <button type="button" className="btn-secondary text-xs" onClick={addLine}>{t('action.addLine')}</button>
          </div>
          <div className="space-y-2">
            {lines.map((line, idx) => (
              <div key={idx} className="flex items-center gap-2">
                <span className="w-6 text-xs text-slate-400 text-right">{idx + 1}</span>
                <select value={line.itemCode} onChange={(e) => updateLine(idx, 'itemCode', e.target.value)}
                  className="flex-1 rounded-md border border-slate-300 px-2 py-1.5 text-sm">
                  <option value="">{t('action.selectItem')}</option>
                  {items.map((it) => <option key={it.id} value={it.code}>{it.code} — {it.name}</option>)}
                </select>
                <input type="number" min="1" step="1" placeholder={t('label.qty')} value={line.quantity}
                  onChange={(e) => updateLine(idx, 'quantity', e.target.value)}
                  className="w-20 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
                <input type="number" min="0" step="0.01" placeholder={t('label.unitPrice')} value={line.unitPrice}
                  onChange={(e) => updateLine(idx, 'unitPrice', e.target.value)}
                  className="w-24 rounded-md border border-slate-300 px-2 py-1.5 text-sm text-right" />
                <button type="button" className="text-slate-400 hover:text-rose-500"
                  onClick={() => removeLine(idx)} title={t('action.delete')}>&times;</button>
              </div>
            ))}
          </div>
        </div>

        <DynamicExtFields
          entityName="PurchaseOrder"
          values={ext}
          onChange={(k, v) => setExt((prev) => ({ ...prev, [k]: v }))}
        />
        {error && <ErrorBox error={error} />}
        <button type="submit" className="btn-primary" disabled={submitting}>
          {submitting ? t('action.creating') : t('page.createPurchaseOrder.submit')}
        </button>
      </form>
    </div>
  )
}
