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

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

export function CreateSalesOrderPage() {
  const navigate = useNavigate()
  const [code, setCode] = useState('')
  const [partnerCode, setPartnerCode] = useState('')
  const [currencyCode] = useState('USD')
  const [lines, setLines] = useState<LineInput[]>([
    { itemCode: '', quantity: '', unitPrice: '' },
  ])
  const [items, setItems] = useState<Item[]>([])
  const [partnerList, setPartnerList] = useState<Partner[]>([])
  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 customers = p.filter((x) => x.type === 'CUSTOMER' || x.type === 'BOTH')
      setPartnerList(customers)
      if (customers.length > 0 && !partnerCode) setPartnerCode(customers[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 created = await salesOrders.create({
        code,
        partnerCode,
        orderDate: new Date().toISOString().slice(0, 10),
        currencyCode,
        lines: lines.map((l, i) => ({
          lineNo: i + 1,
          itemCode: l.itemCode,
          quantity: Number(l.quantity),
          unitPrice: Number(l.unitPrice),
          currencyCode,
        })),
      })
      navigate(`/sales-orders/${created.id}`)
    } catch (err: unknown) {
      setError(err instanceof Error ? err : new Error(String(err)))
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div>
      <PageHeader
        title="New Sales Order"
        subtitle="Create a sales order. Confirming it will auto-generate production work orders."
        actions={
          <button className="btn-secondary" onClick={() => navigate('/sales-orders')}>
            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">Order code</label>
            <input
              type="text"
              required
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder="SO-2026-0003"
              className="mt-1 w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-brand-500 focus:ring-brand-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700">Customer</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 shadow-sm focus:border-brand-500 focus:ring-brand-500"
            >
              {partnerList.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">Currency</label>
            <input
              type="text"
              value={currencyCode}
              disabled
              className="mt-1 w-full rounded-md border border-slate-200 bg-slate-50 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">Order lines</label>
            <button type="button" className="btn-secondary text-xs" onClick={addLine}>
              + Add line
            </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="">Select item...</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="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="Price"
                  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="Remove line"
                >
                  &times;
                </button>
              </div>
            ))}
          </div>
        </div>

        {error && <ErrorBox error={error} />}

        <div className="flex items-center gap-3 pt-2">
          <button type="submit" className="btn-primary" disabled={submitting}>
            {submitting ? 'Creating...' : 'Create Sales Order'}
          </button>
          <span className="text-xs text-slate-400">
            After creation, confirm the order to auto-generate work orders.
          </span>
        </div>
      </form>
    </div>
  )
}