import { useRef, useState } from 'react'
import { useScrollIntoView } from '../../hooks/useScrollIntoView'
import { Button, Dialog, Field } from '../ui'

const FIELDS = ['provider', 'purpose', 'cost', 'costInterval', 'startDate', 'termMonths', 'renewalMonths', 'noticeValue', 'noticeUnit', 'note']
const NUMBERS = ['termMonths', 'renewalMonths', 'noticeValue']

function toForm(contract) {
  const form = { costInterval: 'month', noticeUnit: 'months' }
  for (const key of FIELDS) {
    if (contract?.[key] !== null && contract?.[key] !== undefined) form[key] = String(contract[key])
  }
  return form
}

/** Leere Felder werden null, damit die Fristenlogik "Fristen fehlen" erkennt. */
function toDoc(form) {
  const doc = {}
  for (const key of FIELDS) {
    const raw = (form[key] ?? '').trim()
    if (raw === '') doc[key] = null
    else if (NUMBERS.includes(key)) doc[key] = parseInt(raw, 10)
    else if (key === 'cost') doc[key] = parseFloat(raw.replace(',', '.'))
    else doc[key] = raw
  }
  return doc
}

export default function ContractForm({ contract, onSave, onClose }) {
  const [form, setForm] = useState(() => toForm(contract))
  const [files, setFiles] = useState([])
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState(null)
  const errorRef = useRef(null)
  useScrollIntoView(errorRef, error)
  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))

  const submit = async (e) => {
    e.preventDefault()
    setSaving(true)
    setError(null)
    try {
      await onSave(toDoc(form), files)
      onClose()
    } catch (err) {
      setError(err.message)
      setSaving(false)
    }
  }

  const input = (key, label, props = {}) => (
    <Field label={label} htmlFor={`contract-${key}`}>
      <input className="input" id={`contract-${key}`} name={key} value={form[key] || ''} onChange={set(key)} {...props} />
    </Field>
  )

  return (
    <Dialog
      as="form"
      wide
      title={contract ? 'Vertrag bearbeiten' : 'Neuer Vertrag'}
      busy={saving}
      onClose={onClose}
      onSubmit={submit}
      footer={
        <>
          <span className="grow" />
          <Button type="button" onClick={onClose} disabled={saving}>Abbrechen</Button>
          <Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
        </>
      }
    >
      {error && <div className="msg err" role="alert" ref={errorRef}>{error}</div>}
      {input('provider', 'Anbieter', { required: true })}
      {input('purpose', 'Wofür')}
      <div className="field-row">
        {input('cost', 'Kosten (€)', { inputMode: 'decimal' })}
        <Field label="pro" htmlFor="contract-costInterval">
          <select className="select" id="contract-costInterval" name="costInterval" value={form.costInterval} onChange={set('costInterval')}>
            <option value="month">Monat</option>
            <option value="year">Jahr</option>
          </select>
        </Field>
      </div>
      {input('startDate', 'Vertragsbeginn', { type: 'date' })}
      <div className="field-row">
        {input('termMonths', 'Laufzeit (Monate, 0 = jederzeit kündbar)', { type: 'number', min: 0 })}
        {input('renewalMonths', 'Verlängert sich um (Monate, 0 = endet)', { type: 'number', min: 0 })}
      </div>
      <div className="field-row">
        {input('noticeValue', 'Kündigungsfrist', { type: 'number', min: 0 })}
        <Field label="Einheit" htmlFor="contract-noticeUnit">
          <select className="select" id="contract-noticeUnit" name="noticeUnit" value={form.noticeUnit} onChange={set('noticeUnit')}>
            <option value="months">Monate</option>
            <option value="days">Tage</option>
          </select>
        </Field>
      </div>
      <Field label="Notiz" htmlFor="contract-note">
        <textarea className="textarea" id="contract-note" name="note" rows={3} value={form.note || ''} onChange={set('note')} />
      </Field>
      <Field label="Dateien hinzufügen" htmlFor="contract-files">
        <input type="file" className="legal-file" id="contract-files" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
      </Field>
    </Dialog>
  )
}