/* Drawer: create / edit forms */
(function () {
  const { fmtDate, fmtDateLong, money } = window.AC;
  const TODAY = window.AC.TODAY;
  const decimal = (v) => {
    const n = Number(v);
    return Number.isFinite(n) ? n.toString() : '0';
  };
  const percent = (v) => `${decimal((Number(v) || 0) * 100)}%`;

  const TITLES = {
    invoice: ['Create invoice', 'Draft a new invoice from a project deliverable'],
    expense: ['Record expense', 'Log operating spend or a wage payment'],
    customer: ['Add customer', 'Create a new customer record'],
    project: ['New project', 'Set up a project and link a customer'],
    projectCustomer: ['Link customer', 'Add an existing customer to this project'],
    projectMilestone: ['New milestone', 'Add a project planning milestone'],
    projectRequirements: ['Edit requirements', 'Review and edit requirement items'],
    projectDeliverable: ['New deliverable', 'Add a deliverable to the project'],
    deliverableInvoice: ['Create deliverable invoices', 'Choose full, upfront, or remaining payment drafts'],
    projectOffer: ['New offer', 'Select project deliverables for a customer offer'],
    employee: ['Add employee', 'Add a staff record and wage'],
    correspondence: ['Add correspondence', 'Log correspondence against a customer or project'],
    customerContact: ['Add contact', 'Add a contact person to this customer'],
  };

  function Field({ label, hint, children }) {
    return <div className="field"><label>{label}</label>{children}{hint && <span className="hint">{hint}</span>}</div>;
  }

  function Drawer({ type, editId, context = {}, db, onClose, onSubmit, onAction }) {
    const editing = !!editId;
    const existing = React.useMemo(() => {
      if (!editing) return null;
      if (type === 'invoice') return db.invoices.find((i) => i.id === editId);
      if (type === 'expense') return db.expenses.find((x) => x.id === editId);
      if (type === 'customer') return db.customers.find((c) => c.id === editId);
      if (type === 'project') return db.projects.find((p) => p.id === editId);
      if (type === 'projectMilestone') return db.projects.flatMap((p) => p.milestones || []).find((m) => m.id === editId);
      if (type === 'projectDeliverable') return db.projects.flatMap((p) => p.projectDeliverables).find((s) => s.id === editId);
      if (type === 'projectOffer') return db.projects.flatMap((p) => p.offers || []).find((o) => o.id === editId);
      if (type === 'employee') return db.employees.find((e) => e.id === editId);
      if (type === 'customerContact') return db.customers.flatMap((c) => c.contactPersons || []).find((contact) => contact.id === editId);
      if (type === 'correspondence') return db.customers.flatMap((c) => (c.correspondence || []).map((item) => ({ ...item, customerId: c.id }))).find((item) => item.id === editId);
      return null;
    }, [type, editId]);

    const initial = React.useMemo(() => buildInitial(type, existing, db, context), [type, existing, context]);
    const [f, setF] = React.useState(initial);
    const set = (k, v) => setF((p) => typeof k === 'object' ? { ...p, ...k } : { ...p, [k]: v });

    const allDeliverables = db.projects.flatMap((p) => p.projectDeliverables
      .filter((s) => !s.freeOfCharge && ((s.milestoneIds || []).length === 0 || (s.milestoneIds || []).every((milestoneId) => (p.milestones || []).some((milestone) => milestone.id === milestoneId && milestone.completed))))
      .map((s) => ({ id: s.id, name: `${p.name} · ${s.name}`, unitPrice: s.unitPrice, taxRate: s.taxRate, projectId: p.id })));
    const title = TITLES[type] || ['Edit', ''];
    const editTitle = type === 'projectMilestone' ? 'Edit milestone' : type === 'projectDeliverable' ? 'Edit deliverable' : type === 'projectOffer' ? 'Edit offer' : type === 'customerContact' ? 'Edit contact' : type === 'correspondence' ? 'Edit correspondence' : `Edit ${type}`;
    const submitLabel = context.onApply ? 'Apply changes' : type === 'deliverableInvoice' ? 'Create drafts' : editing ? 'Save changes' : 'Create';

    function submit() {
      if (context.onApply) {
        context.onApply(f);
        onClose();
        return;
      }
      onSubmit(type, f, editId);
    }

    return (
      <React.Fragment>
        <div className="overlay" onClick={onClose} />
        <aside className="drawer">
          <header>
            <div style={{ flex: 1 }}>
              <h2>{editing ? editTitle : title[0]}</h2>
              <div className="sub">{title[1]}</div>
            </div>
            <button className="icon-btn" onClick={onClose}><Icon name="close" size={17} /></button>
          </header>
          <div className="body">
            {type === 'invoice' && <InvoiceForm f={f} set={set} db={db} deliverables={allDeliverables} />}
            {type === 'expense' && <ExpenseForm f={f} set={set} db={db} editing={editing} onAction={onAction} />}
            {type === 'customer' && <CustomerForm f={f} set={set} />}
            {type === 'project' && <ProjectForm f={f} set={set} db={db} editing={editing} />}
            {type === 'projectCustomer' && <ProjectCustomerForm f={f} set={set} db={db} />}
            {type === 'projectMilestone' && <ProjectMilestoneForm f={f} set={set} db={db} onAction={onAction} />}
            {type === 'projectRequirements' && <ProjectRequirementsForm f={f} set={set} />}
            {type === 'projectDeliverable' && <ProjectDeliverableForm f={f} set={set} db={db} />}
            {type === 'deliverableInvoice' && <DeliverableInvoiceForm f={f} set={set} db={db} />}
            {type === 'projectOffer' && <ProjectOfferForm f={f} set={set} db={db} />}
            {type === 'employee' && <EmployeeForm f={f} set={set} />}
            {type === 'correspondence' && <CorrespondenceForm f={f} set={set} db={db} />}
            {type === 'customerContact' && <CustomerContactForm f={f} set={set} />}
          </div>
          <footer>
            <button className="btn ghost" onClick={onClose}>Cancel</button>
            <button className="btn" onClick={submit}><Icon name="check" size={14} />{submitLabel}</button>
          </footer>
        </aside>
      </React.Fragment>
    );
  }

  function buildInitial(type, ex, db, context = {}) {
    switch (type) {
      case 'invoice': {
        const line = ex && ex.lines[0];
        const project = context.projectId ? db.projects.find((p) => p.id === context.projectId) : null;
        return {
          customerId: ex ? ex.customerId : (project && project.customerIds[0]) || (db.customers[0] && db.customers[0].id) || '',
          deliverableId: (line && line.projectDeliverableId) || (project && project.projectDeliverables.find((deliverable) => !deliverable.freeOfCharge)?.id) || '',
          issueDate: ex ? ex.issueDate : TODAY,
          dueDate: ex ? ex.dueDate : '',
          description: (line && line.description) || '',
          quantity: (line && line.quantity) || 1,
          notes: (ex && ex.notes) || '',
        };
      }
      case 'expense': {
        if (ex) return { ...ex };
        const employee = context.employeeId ? db.employees.find((item) => item.id === context.employeeId) : null;
        const wagePeriod = employee
          ? (employee.wagePeriods || []).find((period) => period.id === context.wagePeriodId) || MODEL.currentWagePeriod(employee)
          : null;
        if (employee && wagePeriod) {
          return {
            date: TODAY,
            vendor: employee.name,
            category: 'Wages',
            description: `Wage payment - ${employee.name}`,
            amount: MODEL.wageExpenseAmount(wagePeriod),
            taxAmount: 0,
            recurrenceFrequency: MODEL.wageExpenseRecurrence(wagePeriod),
            recurrenceEndDate: wagePeriod.endsOn || '',
            isWage: true,
            employeeId: employee.id,
            wagePeriodId: wagePeriod.id,
          };
        }

        return { date: TODAY, vendor: '', category: 'General', description: '', amount: '', taxAmount: 0, recurrenceFrequency: 'None', recurrenceEndDate: '', isWage: false, employeeId: '' };
      }
      case 'customer':
        return ex ? { ...ex } : { name: '', email: '', phone: '', billingAddress: '', notes: '' };
      case 'project':
        return ex
          ? { ...ex, customerId: ex.customerIds[0] || '', startDate: ex.startDate || TODAY, projectRepoUrl: ex.projectRepoUrl || '', projectAppUrl: ex.projectAppUrl || '', designMdKitIdentifier: ex.designMdKitIdentifier || '', designMdKitName: ex.designMdKitName || '', designMdKitUrl: ex.designMdKitUrl || '', planningNotes: ex.planningNotes || '', milestones: ex.milestones || [] }
          : { name: '', kind: 'Implementation', status: 'Active', startDate: TODAY, description: '', projectRepoUrl: '', projectAppUrl: '', designMdKitIdentifier: '', designMdKitName: '', designMdKitUrl: '', planningNotes: '', milestones: [], customerId: (db.customers[0] && db.customers[0].id) || '' };
      case 'projectCustomer': {
        const project = db.projects.find((p) => p.id === context.projectId);
        const linked = new Set((project && project.customerIds) || []);
        const customer = db.customers.find((c) => !linked.has(c.id));
        return { projectId: context.projectId || '', customerId: (customer && customer.id) || '' };
      }
      case 'projectMilestone':
        if (ex) return { ...ex, projectId: context.projectId || '' };
        {
          const project = db.projects.find((item) => item.id === context.projectId);
          const planningSections = window.AC.normalizeProjectPlanningSections(project && project.planningSections, project && project.planningNotes);
          return { projectId: context.projectId || '', planningSectionId: context.planningSectionId || (planningSections[0] && planningSections[0].id) || '', title: '', dueDate: '', completed: false, estimatedHours: '', actualHours: '', hourlyRate: '', actualCost: '' };
        }
      case 'projectRequirements':
        return {
          sectionName: context.sectionName || '',
          items: (context.requirementItems || []).map((item, index) => ({
            id: item.id || drawerGuid(),
            position: index,
            title: item.title || '',
            type: item.type || 'UI/UX',
            priority: item.priority || 'Medium',
            status: item.status || 'draft',
          })),
        };
      case 'projectDeliverable':
        return ex ? { ...ex, milestoneIds: ex.milestoneIds || [], billingStartDate: ex.billingStartDate || TODAY, freeOfCharge: !!ex.freeOfCharge, recurrenceFrequency: ex.recurrenceFrequency || 'None', recurrenceEndDate: ex.recurrenceEndDate || '' } : { projectId: context.projectId || '', milestoneIds: context.milestoneId ? [context.milestoneId] : [], billingStartDate: TODAY, name: '', kind: 'Consulting', status: 'Active', description: '', unitPrice: '', taxRate: 0.19, freeOfCharge: false, recurrenceFrequency: 'None', recurrenceEndDate: '' };
      case 'deliverableInvoice': {
        const deliverable = db.projects.flatMap((p) => p.projectDeliverables).find((item) => item.id === context.deliverableId);
        return { projectId: context.projectId || (deliverable && deliverable.projectId) || '', deliverableId: context.deliverableId || '', part: 'Full', upfrontPercent: 50, issueDate: TODAY, dueDate: TODAY };
      }
      case 'projectOffer': {
        const project = db.projects.find((p) => p.id === (ex ? ex.projectId : context.projectId));
        if (ex) {
          return {
            ...ex,
            status: ex.status || 'Offered',
            customerId: ex.customerId || '',
            validUntil: ex.validUntil || '',
            lines: ex.lines.map((line, index) => ({ ...line, milestoneId: line.milestoneId || '', name: line.name || line.description || '', selected: true, clientId: `${line.projectDeliverableId || 'line'}-${index}` })),
          };
        }

        return {
          projectId: context.projectId || '',
          customerId: (project && project.customerIds[0]) || '',
          title: context.title || '',
          status: 'Offered',
          issueDate: TODAY,
          validUntil: '',
          notes: '',
          lines: context.lines || [{ clientId: `new-${Date.now()}`, projectDeliverableId: '', milestoneId: '', name: '', description: '', quantity: 1, unitPrice: '', taxRate: 0.19, selected: true }],
        };
      }
      case 'employee':
        return ex
          ? { ...ex, wagePeriods: (ex.wagePeriods && ex.wagePeriods.length ? ex.wagePeriods : [{ startsOn: ex.startedOn || TODAY, endsOn: '', wageAmount: ex.wageAmount, wageFrequency: ex.wageFrequency || 'Monthly' }]).map((period) => ({ ...period, endsOn: period.endsOn || '' })) }
          : { name: '', email: '', role: '', wageAmount: '', wageFrequency: 'Monthly', active: true, startedOn: TODAY, wagePeriods: [{ startsOn: TODAY, endsOn: '', wageAmount: '', wageFrequency: 'Monthly' }] };
      case 'correspondence':
        return ex
          ? { ...ex, customerId: ex.customerId || context.customerId || '', projectId: ex.projectId || context.projectId || '', projectDeliverableId: ex.projectDeliverableId || '', date: (ex.occurredOn || ex.date || TODAY), occurredAt: (ex.occurredAt || '').slice(0, 16), channel: ex.channel || 'note', body: ex.body || '' }
          : { customerId: context.customerId || (context.projectId && db.projects.find((project) => project.id === context.projectId)?.customerIds?.[0]) || (db.customers[0] && db.customers[0].id) || '', projectId: context.projectId || '', projectDeliverableId: '', subject: '', date: TODAY, occurredAt: '', channel: 'note', body: '' };
      case 'customerContact':
        return ex ? { ...ex, customerId: context.customerId || '' } : { customerId: context.customerId || '', name: '', lastName: '', email: '', phone: '', remarks: '' };
      default: return {};
    }
  }

  function drawerGuid() {
    return crypto.randomUUID ? crypto.randomUUID()
      : '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) =>
        (Number(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number(c) / 4).toString(16));
  }

  function ProjectRequirementsForm({ f, set }) {
    const types = ['UI/UX', 'Backend', 'Data', 'Integration', 'QA', 'Operations'];
    const priorities = ['Low', 'Medium', 'High', 'Critical'];
    const statuses = ['draft', 'accepted', 'implemented'];
    const items = f.items || [];
    const updateItem = (id, patch) => set('items', items.map((item) => item.id === id ? { ...item, ...patch } : item));
    const removeItem = (id) => set('items', items.filter((item) => item.id !== id));
    const addItem = () => set('items', [...items, { id: drawerGuid(), position: items.length, title: '', type: 'UI/UX', priority: 'Medium', status: 'draft' }]);

    return (
      <div className="form-grid">
        <Field label="Feature"><input className="inp" value={f.sectionName || ''} readOnly /></Field>
        <div className="req-drawer-list">
          {items.map((item) => (
            <div className="req-drawer-item" key={item.id}>
              <Field label="Title">
                <textarea className="inp" rows="3" value={item.title || ''} onChange={(e) => updateItem(item.id, { title: e.target.value })} placeholder="Requirement title" />
              </Field>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 10 }}>
                <Field label="Type">
                  <select className="inp" value={item.type || 'UI/UX'} onChange={(e) => updateItem(item.id, { type: e.target.value })}>
                    {types.map((type) => <option key={type}>{type}</option>)}
                  </select>
                </Field>
                <Field label="Priority">
                  <select className="inp" value={item.priority || 'Medium'} onChange={(e) => updateItem(item.id, { priority: e.target.value })}>
                    {priorities.map((priority) => <option key={priority}>{priority}</option>)}
                  </select>
                </Field>
                <Field label="Status">
                  <select className="inp" value={item.status || 'draft'} onChange={(e) => updateItem(item.id, { status: e.target.value })}>
                    {statuses.map((status) => <option key={status} value={status}>{status}</option>)}
                  </select>
                </Field>
              </div>
              <button className="btn sm ghost" type="button" onClick={() => removeItem(item.id)}><Icon name="trash" size={14} />Remove</button>
            </div>
          ))}
          {!items.length && <span className="muted" style={{ fontSize: 12 }}>No requirement items yet.</span>}
          <button className="btn sm ghost" type="button" onClick={addItem}><Icon name="plus" size={14} />Requirement</button>
        </div>
      </div>
    );
  }

  function InvoiceForm({ f, set, db, deliverables }) {
    const svc = deliverables.find((s) => s.id === f.deliverableId);
    const qty = Number(f.quantity) || 0;
    const unit = svc ? svc.unitPrice : 0;
    const net = qty * unit;
    const tax = net * (svc ? svc.taxRate : 0.19);
    return (
      <React.Fragment>
        <Field label="Customer">
          <select className="inp" value={f.customerId} onChange={(e) => set('customerId', e.target.value)}>
            {db.customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </Field>
        <Field label="Project deliverable" hint={svc ? `Unit price ${money(svc.unitPrice)} · ${percent(svc.taxRate)} tax` : 'Select a billable deliverable'}>
          <select className="inp" value={f.deliverableId} onChange={(e) => set('deliverableId', e.target.value)}>
            <option value="">Select deliverable…</option>
            {deliverables.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </Field>
        <div className="field-row">
          <Field label="Issue date"><input className="inp" type="date" value={f.issueDate} onChange={(e) => set('issueDate', e.target.value)} /></Field>
          <Field label="Due date"><input className="inp" type="date" value={f.dueDate} onChange={(e) => set('dueDate', e.target.value)} /></Field>
        </div>
        <Field label="Description" hint="Defaults to the deliverable name"><input className="inp" value={f.description} onChange={(e) => set('description', e.target.value)} placeholder={svc ? svc.name : ''} /></Field>
        <Field label="Quantity"><input className="inp num" type="number" step="any" value={f.quantity} onChange={(e) => set('quantity', e.target.value)} /></Field>
        <div className="divider" />
        <div className="detail-grid">
          <dt>Net</dt><dd className="mono">{window.AC.money(net)}</dd>
          <dt>Tax</dt><dd className="mono">{window.AC.money(tax)}</dd>
          <dt style={{ fontWeight: 600, color: 'var(--ink)' }}>Total</dt><dd className="mono" style={{ fontWeight: 600 }}>{window.AC.money(net + tax)}</dd>
        </div>
      </React.Fragment>
    );
  }

  function ExpenseForm({ f, set, db, editing, onAction }) {
    const selectedEmployee = db.employees.find((employee) => employee.id === f.employeeId);
    const selectedWagePeriod = selectedEmployee && (selectedEmployee.wagePeriods || []).find((period) => period.id === f.wagePeriodId);
    const wageHint = selectedEmployee
      ? `${selectedWagePeriod ? selectedWagePeriod.wageFrequency : 'Current'} wage · ${money(selectedWagePeriod ? MODEL.wageExpenseAmount(selectedWagePeriod) : MODEL.employeeMonthlyWage(selectedEmployee))} payable`
      : 'Required for wage payments';
    const wageEntries = db.employees.flatMap((employee) => (employee.wagePeriods || []).map((period) => ({ employee, period })));
    function selectWageEntry(wagePeriodId) {
      const entry = wageEntries.find((item) => item.period.id === wagePeriodId);
      if (!entry) {
        set({ employeeId: '', wagePeriodId: '' });
        return;
      }

      const patch = { employeeId: entry.employee.id, wagePeriodId: entry.period.id };
      if (!f.vendor) patch.vendor = entry.employee.name;
      if (!f.description) patch.description = `Wage payment - ${entry.employee.name}`;
      if (!f.amount) patch.amount = MODEL.wageExpenseAmount(entry.period);
      if (!f.category || f.category === 'General') patch.category = 'Wages';
      if (!f.recurrenceFrequency || f.recurrenceFrequency === 'None') patch.recurrenceFrequency = MODEL.wageExpenseRecurrence(entry.period);
      if (!f.recurrenceEndDate && entry.period.endsOn) patch.recurrenceEndDate = entry.period.endsOn;
      set(patch);
    }

    return (
      <React.Fragment>
        <div className="field-row">
          <Field label="Date"><input className="inp" type="date" value={f.date} onChange={(e) => set('date', e.target.value)} /></Field>
          <Field label="Category"><input className="inp" value={f.category} onChange={(e) => set('category', e.target.value)} /></Field>
        </div>
        <Field label="Vendor"><input className="inp" value={f.vendor} onChange={(e) => set('vendor', e.target.value)} /></Field>
        <Field label="Description"><textarea className="inp" value={f.description} onChange={(e) => set('description', e.target.value)} /></Field>
        <div className="field-row">
          <Field label="Amount (net)"><input className="inp num" type="number" step="any" value={f.amount} onChange={(e) => set('amount', e.target.value)} /></Field>
          <Field label="Tax"><input className="inp num" type="number" step="any" value={f.taxAmount} onChange={(e) => set('taxAmount', e.target.value)} /></Field>
        </div>
        <div className="field-row">
          <Field label="Repeats"><select className="inp" value={f.recurrenceFrequency} onChange={(e) => set('recurrenceFrequency', e.target.value)}>{['None', 'Weekly', 'Monthly', 'Yearly'].map((o) => <option key={o}>{o}</option>)}</select></Field>
          <Field label="Ends on"><input className="inp" type="date" value={f.recurrenceEndDate || ''} onChange={(e) => set('recurrenceEndDate', e.target.value)} /></Field>
        </div>
        <div className="checkrow" style={{ marginBottom: 12 }}><input type="checkbox" checked={!!f.isWage} onChange={(e) => set(e.target.checked ? { isWage: true } : { isWage: false, employeeId: '', wagePeriodId: '' })} id="isWage" /><label htmlFor="isWage">This is a wage payment</label></div>
        {f.isWage && <Field label="Wage entry" hint={wageHint}><select className="inp" value={f.wagePeriodId || ''} onChange={(e) => selectWageEntry(e.target.value)}><option value="">Select wage period…</option>{wageEntries.map(({ employee, period }) => <option key={period.id} value={period.id}>{employee.name} · {fmtDate(period.startsOn)}{period.endsOn ? ` to ${fmtDate(period.endsOn)}` : ' onward'} · {money(MODEL.wageExpenseAmount(period))}</option>)}</select></Field>}
        {editing && f.document && (
          <Field label="Current document">
            <div style={{ display: 'flex', gap: 7, alignItems: 'center', flexWrap: 'wrap' }}>
              <span className="chip"><Icon name="doc" size={12} />{f.document.fileName}</span>
              <button className="btn sm ghost" onClick={() => onAction && onAction('doc', f)}><Icon name="external" size={14} />Open</button>
              <button className="btn sm ghost" onClick={async () => { const ok = onAction ? await onAction('removeDoc', f) : false; if (ok) set('document', null); }}><Icon name="trash" size={14} />Remove</button>
            </div>
          </Field>
        )}
        <Field label={editing && f.document ? "Replace document" : "Invoice document"} hint="PDF receipt or invoice (optional)"><input className="inp" type="file" accept="application/pdf" /></Field>
        {editing && <ExpensePayments f={f} set={set} onAction={onAction} />}
      </React.Fragment>
    );
  }

  function ExpensePayments({ f, set, onAction }) {
    const rows = MODEL.expenseOccurrences(f, { includeFuture: true, max: 18 }).map((date) => ({
      date,
      payment: (f.payments || []).find((payment) => String(payment.occurrenceDate).slice(0, 10) === date) || null,
    })).reverse();
    const amount = (Number(f.amount) || 0) + (Number(f.taxAmount) || 0);

    return (
      <Field label="Outgoing payments" hint={f.recurrenceFrequency && f.recurrenceFrequency !== 'None' ? 'Mark each recurring occurrence when it is paid.' : 'Mark this expense when it is paid.'}>
        <DataTable
          rows={rows}
          rowKey={(row) => row.date}
          empty="No occurrences available."
          maxHeight={240}
          columns={[
            { header: 'Occurrence', className: 'mono muted', cellStyle: { fontSize: 11.5 }, render: (row) => fmtDate(row.date) },
            { header: 'Status', render: (row) => row.payment ? <Pill kind="Paid" sm /> : <Pill kind="Open" sm /> },
            { header: 'Paid on', className: 'mono muted', cellStyle: { fontSize: 11.5 }, render: (row) => row.payment ? fmtDate(row.payment.paidOn) : '—' },
            { header: 'Amount', className: 'num', render: () => money(amount) },
          ]}
          actions={[
            {
              key: 'pay',
              label: 'Mark paid',
              show: (row) => !row.payment,
              onClick: async (row) => {
                const ok = onAction ? await onAction('payExpenseOccurrence', { expense: f, occurrenceDate: row.date }) : false;
                if (ok) set('payments', [...(f.payments || []), { occurrenceDate: row.date, paidOn: TODAY, amount, reference: 'web' }]);
              }
            },
          ]}
        />
      </Field>
    );
  }

  function CustomerForm({ f, set }) {
    return (
      <React.Fragment>
        <Field label="Name"><input className="inp" value={f.name} onChange={(e) => set('name', e.target.value)} /></Field>
        <div className="field-row">
          <Field label="Email"><input className="inp" type="email" value={f.email} onChange={(e) => set('email', e.target.value)} /></Field>
          <Field label="Phone"><input className="inp" value={f.phone} onChange={(e) => set('phone', e.target.value)} /></Field>
        </div>
        <Field label="Billing address"><textarea className="inp" value={f.billingAddress} onChange={(e) => set('billingAddress', e.target.value)} /></Field>
        <Field label="Notes"><textarea className="inp" value={f.notes} onChange={(e) => set('notes', e.target.value)} /></Field>
      </React.Fragment>
    );
  }

  function CustomerContactForm({ f, set }) {
    return (
      <React.Fragment>
        <div className="field-row">
          <Field label="Name"><input className="inp" value={f.name || ''} onChange={(e) => set('name', e.target.value)} /></Field>
          <Field label="Last name"><input className="inp" value={f.lastName || ''} onChange={(e) => set('lastName', e.target.value)} /></Field>
        </div>
        <div className="field-row">
          <Field label="Email"><input className="inp" type="email" value={f.email || ''} onChange={(e) => set('email', e.target.value)} /></Field>
          <Field label="Phone"><input className="inp" value={f.phone || ''} onChange={(e) => set('phone', e.target.value)} /></Field>
        </div>
        <Field label="Remarks"><textarea className="inp" value={f.remarks || ''} onChange={(e) => set('remarks', e.target.value)} /></Field>
      </React.Fragment>
    );
  }

  function ProjectForm({ f, set, db, editing }) {
    const milestones = f.milestones || [];
    const [designQuery, setDesignQuery] = React.useState(f.designMdKitName || f.designMdKitIdentifier || '');
    const [designResults, setDesignResults] = React.useState([]);
    const [designStatus, setDesignStatus] = React.useState('');
    const newMilestone = () => ({ clientId: `new-${Date.now()}-${Math.random().toString(16).slice(2)}`, title: '', dueDate: '', completed: false });
    function updateMilestone(index, patch) {
      set('milestones', milestones.map((milestone, i) => i === index ? { ...milestone, ...patch } : milestone));
    }

    function addMilestone() {
      set('milestones', [...milestones, newMilestone()]);
    }

    function removeMilestone(index) {
      set('milestones', milestones.filter((_, i) => i !== index));
    }

    function moveMilestone(index, direction) {
      const next = [...milestones];
      const target = index + direction;
      if (target < 0 || target >= next.length) return;
      [next[index], next[target]] = [next[target], next[index]];
      set('milestones', next);
    }

    async function searchDesignKits() {
      setDesignStatus('Searching...');
      try {
        const response = await window.API.searchDesignKits(designQuery, 8);
        const rows = Array.isArray(response) ? response : (response && (response.data || response.kits)) || [];
        setDesignResults(rows);
        setDesignStatus(rows.length ? '' : 'No matching kits.');
      } catch (error) {
        setDesignResults([]);
        setDesignStatus(error.message || 'DesignMD search failed.');
      }
    }

    function kitAuthor(kit) {
      return typeof kit.author === 'string' ? kit.author : (kit.author && kit.author.username) || '';
    }

    function kitIdentifier(kit) {
      return kit.identifier || (kitAuthor(kit) && kit.slug ? `${kitAuthor(kit)}/${kit.slug}` : '');
    }

    function selectDesignKit(kit) {
      set({
        designMdKitIdentifier: kitIdentifier(kit),
        designMdKitName: kit.name || '',
        designMdKitUrl: kit.url || (kitIdentifier(kit) ? `https://designmd.ai/${kitIdentifier(kit)}` : ''),
      });
      setDesignResults([]);
      setDesignStatus('');
      setDesignQuery(kit.name || kitIdentifier(kit));
    }

    return (
      <React.Fragment>
        <Field label="Project name"><input className="inp" value={f.name} onChange={(e) => set('name', e.target.value)} /></Field>
        {!editing && <Field label="Customer"><select className="inp" value={f.customerId} onChange={(e) => set('customerId', e.target.value)}>{db.customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></Field>}
        <Field label="Project repo URL"><input className="inp" type="url" value={f.projectRepoUrl || ''} onChange={(e) => set('projectRepoUrl', e.target.value)} /></Field>
        <Field label="Deployed app URL"><input className="inp" type="url" value={f.projectAppUrl || ''} onChange={(e) => set('projectAppUrl', e.target.value)} /></Field>
        <Field label="DesignMD kit" hint={f.designMdKitIdentifier ? `Selected ${f.designMdKitIdentifier}` : 'Search DESIGN.md kits or paste username/kit-slug.'}>
          <div style={{ display: 'flex', gap: 7 }}>
            <input className="inp" value={designQuery} onChange={(e) => setDesignQuery(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); searchDesignKits(); } }} placeholder="minimal SaaS, dashboard, dark..." />
            <button className="btn sm ghost" onClick={searchDesignKits}><Icon name="search" size={14} />Search</button>
          </div>
          <input className="inp mono" style={{ marginTop: 8 }} value={f.designMdKitIdentifier || ''} onChange={(e) => set({ designMdKitIdentifier: e.target.value, designMdKitName: '', designMdKitUrl: e.target.value ? `https://designmd.ai/${e.target.value}` : '' })} placeholder="username/kit-slug" />
          {designStatus && <span className="hint">{designStatus}</span>}
          {!!designResults.length && <div className="grid" style={{ gap: 6, marginTop: 8 }}>
            {designResults.map((kit, index) => (
              <button key={kit.id || kitIdentifier(kit) || index} className="btn ghost" style={{ justifyContent: 'flex-start', textAlign: 'left' }} onClick={() => selectDesignKit(kit)}>
                <Icon name="doc" size={14} />
                <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{kit.name || kitIdentifier(kit)} <span className="muted mono">{kitIdentifier(kit)}</span></span>
              </button>
            ))}
          </div>}
        </Field>
        <div className="field-row">
          <Field label="Kind"><input className="inp" value={f.kind} onChange={(e) => set('kind', e.target.value)} /></Field>
          <Field label="Status"><select className="inp" value={f.status} onChange={(e) => set('status', e.target.value)}>{['Active', 'Completed', 'On hold'].map((o) => <option key={o}>{o}</option>)}</select></Field>
        </div>
        <Field label="Start date"><input className="inp" type="date" value={f.startDate || ''} onChange={(e) => set('startDate', e.target.value)} /></Field>
        <Field label="Description"><textarea className="inp" value={f.description} onChange={(e) => set('description', e.target.value)} /></Field>
        {!editing && <div className="divider" />}
        {!editing && <Field label="Milestones" hint="Due dates are optional.">
          <div className="grid" style={{ gap: 8 }}>
            {milestones.map((milestone, index) => (
              <div key={milestone.id || milestone.clientId || index} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 10 }}>
                <div className="checkrow" style={{ marginBottom: 8 }}>
                  <input type="checkbox" checked={!!milestone.completed} onChange={(e) => updateMilestone(index, { completed: e.target.checked })} id={`milestone-${milestone.id || milestone.clientId || index}`} />
                  <label htmlFor={`milestone-${milestone.id || milestone.clientId || index}`}>Complete</label>
                </div>
                <Field label="Title"><input className="inp" value={milestone.title || ''} onChange={(e) => updateMilestone(index, { title: e.target.value })} /></Field>
                <div className="field-row">
                  <Field label="Due date"><input className="inp" type="date" value={milestone.dueDate || ''} onChange={(e) => updateMilestone(index, { dueDate: e.target.value })} /></Field>
                  <div className="field" style={{ justifyContent: 'end' }}>
                    <div style={{ display: 'flex', gap: 6, justifyContent: 'end' }}>
                      <button className="icon-btn" title="Move milestone up" disabled={index === 0} onClick={() => moveMilestone(index, -1)}><Icon name="arrowUp" size={14} /></button>
                      <button className="icon-btn" title="Move milestone down" disabled={index === milestones.length - 1} onClick={() => moveMilestone(index, 1)}><Icon name="arrowDown" size={14} /></button>
                      <button className="icon-btn" title="Remove milestone" onClick={() => removeMilestone(index)}><Icon name="trash" size={14} /></button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
            <button className="btn sm ghost" onClick={addMilestone}><Icon name="plus" size={14} />Milestone</button>
          </div>
        </Field>}
      </React.Fragment>
    );
  }

  function ProjectCustomerForm({ f, set, db }) {
    const project = db.projects.find((p) => p.id === f.projectId);
    const linked = new Set((project && project.customerIds) || []);
    const customers = db.customers.filter((c) => !linked.has(c.id) || c.id === f.customerId);

    return (
      <Field label="Customer">
        <select className="inp" value={f.customerId} onChange={(e) => set('customerId', e.target.value)}>
          {customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
      </Field>
    );
  }

  function ProjectMilestoneForm({ f, set, db, onAction }) {
    const project = db.projects.find((item) => item.id === f.projectId);
    const planningSections = window.AC.normalizeProjectPlanningSections(project && project.planningSections, project && project.planningNotes);
    const estimatedCost = (Number(f.estimatedHours) || 0) * (Number(f.hourlyRate) || 0);
    return (
      <React.Fragment>
        <Field label="Planning section">
          <select className="inp" value={f.planningSectionId || (planningSections[0] && planningSections[0].id) || ''} onChange={(e) => set('planningSectionId', e.target.value)}>
            {planningSections.map((section) => <option key={section.id} value={section.id}>{section.name}</option>)}
          </select>
        </Field>
        <Field label="Title"><input className="inp" value={f.title || ''} onChange={(e) => set('title', e.target.value)} /></Field>
        <Field label="Due date"><input className="inp" type="date" value={f.dueDate || ''} onChange={(e) => set('dueDate', e.target.value)} /></Field>
        <div className="checkrow" style={{ marginBottom: 12 }}>
          <input type="checkbox" checked={!!f.completed} onChange={(e) => set('completed', e.target.checked)} id="milestoneComplete" />
          <label htmlFor="milestoneComplete">Complete</label>
        </div>
        <div className="divider" />
        <Field label="Effort" hint={`Estimated cost ${money(estimatedCost)}`}>
          <div className="field-row">
            <input className="inp num" type="number" min="0" step="0.25" value={f.estimatedHours || ''} onChange={(e) => set('estimatedHours', e.target.value)} placeholder="Estimated hours" />
            <input className="inp num" type="number" min="0" step="0.25" value={f.actualHours || ''} onChange={(e) => set('actualHours', e.target.value)} placeholder="Actual hours" />
          </div>
        </Field>
        <div className="field-row">
          <Field label="Hourly rate"><input className="inp num" type="number" min="0" step="any" value={f.hourlyRate || ''} onChange={(e) => set('hourlyRate', e.target.value)} /></Field>
          <Field label="Actual cost"><input className="inp num" type="number" min="0" step="any" value={f.actualCost || ''} onChange={(e) => set('actualCost', e.target.value)} /></Field>
        </div>
        {project && f.id && window.ProjectDocumentArea && (
          <div className="field">
            <window.ProjectDocumentArea project={project} target={{ milestoneId: f.id }} onAction={onAction} compact />
          </div>
        )}
      </React.Fragment>
    );
  }

  function ProjectDeliverableForm({ f, set, db }) {
    const project = db.projects.find((p) => p.id === f.projectId);
    const milestones = (project && project.milestones) || [];
    const milestoneIds = f.milestoneIds || [];

    function toggleMilestone(milestoneId) {
      const nextIds = milestoneIds.includes(milestoneId) ? milestoneIds.filter((id) => id !== milestoneId) : [...milestoneIds, milestoneId];
      const dueDates = milestones.filter((milestone) => nextIds.includes(milestone.id) && milestone.dueDate).map((milestone) => milestone.dueDate).sort();
      const currentDueDates = milestones.filter((milestone) => milestoneIds.includes(milestone.id) && milestone.dueDate).map((milestone) => milestone.dueDate);
      const patch = { milestoneIds: nextIds };
      if (dueDates[0] && (!f.billingStartDate || f.billingStartDate === TODAY || currentDueDates.includes(f.billingStartDate))) {
        patch.billingStartDate = dueDates[0];
      }
      set(patch);
    }

    return (
      <React.Fragment>
        <Field label="Deliverable name"><input className="inp" value={f.name} onChange={(e) => set('name', e.target.value)} /></Field>
        <Field label="Milestones" hint={`${milestoneIds.length} linked`}>
          <div className="grid" style={{ gap: 7 }}>
            {milestones.map((milestone) => (
              <div className="checkrow" key={milestone.id}>
                <input type="checkbox" checked={milestoneIds.includes(milestone.id)} onChange={() => toggleMilestone(milestone.id)} id={`deliverable-milestone-${milestone.id}`} />
                <label htmlFor={`deliverable-milestone-${milestone.id}`}>{milestone.title}</label>
              </div>
            ))}
            {milestones.length === 0 && <span className="muted" style={{ fontSize: 12 }}>No milestones yet.</span>}
          </div>
        </Field>
        <Field label="Billing start"><input className="inp" type="date" value={f.billingStartDate || ''} onChange={(e) => set('billingStartDate', e.target.value)} /></Field>
        <div className="field-row">
          <Field label="Type"><input className="inp" value={f.kind} onChange={(e) => set('kind', e.target.value)} /></Field>
          <Field label="Status"><select className="inp" value={f.status} onChange={(e) => set('status', e.target.value)}>{['Active', 'Completed', 'Invoiced', 'Closed', 'On hold'].map((o) => <option key={o}>{o}</option>)}</select></Field>
        </div>
        <Field label="Description"><textarea className="inp" value={f.description} onChange={(e) => set('description', e.target.value)} /></Field>
        <div className="field-row">
          <Field label="Unit price"><input className="inp num" type="number" step="any" value={f.unitPrice} onChange={(e) => set('unitPrice', e.target.value)} /></Field>
          <Field label="Tax rate" hint="Use decimal form, e.g. 0.19 for 19%"><input className="inp num" type="number" step="any" value={f.taxRate} onChange={(e) => set('taxRate', e.target.value)} /></Field>
        </div>
        <div className="checkrow" style={{ marginBottom: 12 }}><input type="checkbox" checked={!!f.freeOfCharge} onChange={(e) => set('freeOfCharge', e.target.checked)} id="freeOfCharge" /><label htmlFor="freeOfCharge">Free of charge</label></div>
        <div className="field-row">
          <Field label="Repeats"><select className="inp" value={f.recurrenceFrequency || 'None'} onChange={(e) => set('recurrenceFrequency', e.target.value)}>{['None', 'Weekly', 'Monthly', 'Yearly'].map((o) => <option key={o}>{o}</option>)}</select></Field>
          <Field label="Ends on"><input className="inp" type="date" value={f.recurrenceEndDate || ''} onChange={(e) => set('recurrenceEndDate', e.target.value)} /></Field>
        </div>
      </React.Fragment>
    );
  }

  function DeliverableInvoiceForm({ f, set, db }) {
    const deliverable = db.projects.flatMap((p) => p.projectDeliverables).find((item) => item.id === f.deliverableId);
    const splitAllowed = deliverable && (!deliverable.recurrenceFrequency || deliverable.recurrenceFrequency === 'None');
    const part = splitAllowed ? f.part || 'Full' : 'Full';
    const upfrontPercent = Math.min(99, Math.max(1, Number(f.upfrontPercent) || 50));
    const upfrontAmount = deliverable ? Math.round((deliverable.unitPrice || 0) * upfrontPercent) / 100 : 0;
    const remainderAmount = deliverable ? (deliverable.unitPrice || 0) - upfrontAmount : 0;
    const selectedAmount = part === 'Upfront' ? upfrontAmount : part === 'Remainder' ? remainderAmount : deliverable ? deliverable.unitPrice || 0 : 0;

    function changePart(nextPart) {
      if (nextPart === 'Full') {
        set('part', 'Full');
        return;
      }

      set({ part: nextPart, issueDate: f.issueDate || TODAY, dueDate: f.dueDate || TODAY });
    }

    return (
      <React.Fragment>
        <Field label="Deliverable"><input className="inp" value={deliverable ? deliverable.name : ''} disabled /></Field>
        <Field label="Invoice type">
          <select className="inp" value={part} onChange={(e) => changePart(e.target.value)}>
            <option value="Full">Full deliverable amount</option>
            {splitAllowed && <option value="Upfront">Upfront payment</option>}
            {splitAllowed && <option value="Remainder">Remaining payment</option>}
          </select>
        </Field>
        {part !== 'Full' && (
          <React.Fragment>
            <Field label="Upfront percent" hint={`${money(upfrontAmount)} upfront · ${money(remainderAmount)} remaining`}><input className="inp num" type="number" min="1" max="99" step="any" value={f.upfrontPercent} onChange={(e) => set('upfrontPercent', e.target.value)} /></Field>
            <div className="field-row">
              <Field label="Issue date"><input className="inp" type="date" value={f.issueDate || ''} onChange={(e) => set('issueDate', e.target.value)} /></Field>
              <Field label="Due date"><input className="inp" type="date" value={f.dueDate || ''} onChange={(e) => set('dueDate', e.target.value)} /></Field>
            </div>
          </React.Fragment>
        )}
        <div className="divider" />
        <div className="detail-grid">
          <dt>Deliverable total</dt><dd className="mono">{money(deliverable ? deliverable.unitPrice || 0 : 0)}</dd>
          <dt>Draft amount</dt><dd className="mono">{money(selectedAmount)}</dd>
          <dt>Tax rate</dt><dd className="mono">{deliverable ? percent(deliverable.taxRate) : '—'}</dd>
        </div>
      </React.Fragment>
    );
  }

  function ProjectOfferForm({ f, set, db }) {
    const project = db.projects.find((p) => p.id === f.projectId);
    const customers = project ? project.customerIds.map((id) => db.customers.find((c) => c.id === id)).filter(Boolean) : [];
    const milestones = (project && project.milestones) || [];
    const selectedLines = (f.lines || []).filter((line) => line.selected !== false);
    const subtotal = selectedLines.reduce((sum, line) => sum + (Number(line.quantity) || 0) * (Number(line.unitPrice) || 0), 0);
    const tax = selectedLines.reduce((sum, line) => sum + (Number(line.quantity) || 0) * (Number(line.unitPrice) || 0) * (Number(line.taxRate) || 0), 0);

    function updateLine(index, patch) {
      set('lines', (f.lines || []).map((line, i) => i === index ? { ...line, ...patch } : line));
    }

    function addLine() {
      set('lines', [...(f.lines || []), { clientId: `new-${Date.now()}`, projectDeliverableId: '', milestoneId: '', name: '', description: '', quantity: 1, unitPrice: '', taxRate: 0.19, selected: true }]);
    }

    function changeLineMilestone(index, milestoneId) {
      const line = (f.lines || [])[index] || {};
      const milestone = milestones.find((item) => item.id === milestoneId);
      const milestoneDescriptions = milestones.filter((item) => item.dueDate).map((item) => `Due ${item.dueDate}`);
      const patch = { milestoneId };
      if (milestone && milestone.dueDate && (!line.description || milestoneDescriptions.includes(line.description))) {
        patch.description = `Due ${milestone.dueDate}`;
      }
      updateLine(index, patch);
    }

    return (
      <React.Fragment>
        <Field label="Title"><input className="inp" value={f.title} onChange={(e) => set('title', e.target.value)} /></Field>
        <Field label="Customer">
          <select className="inp" value={f.customerId || ''} onChange={(e) => set('customerId', e.target.value)}>
            <option value="">No customer</option>
            {customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </Field>
        <div className="field-row">
          <Field label="Issue date"><input className="inp" type="date" value={f.issueDate || ''} onChange={(e) => set('issueDate', e.target.value)} /></Field>
          <Field label="Valid until"><input className="inp" type="date" value={f.validUntil || ''} onChange={(e) => set('validUntil', e.target.value)} /></Field>
        </div>
        <Field label="Deliverables" hint={`${selectedLines.length} selected · ${money(subtotal + tax)}`}>
          <div className="grid" style={{ gap: 8 }}>
            {(f.lines || []).map((line, index) => (
              <div key={line.clientId || line.projectDeliverableId || index} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 10 }}>
                <div className="checkrow" style={{ marginBottom: 8 }}>
                  <input type="checkbox" checked={line.selected !== false} onChange={(e) => updateLine(index, { selected: e.target.checked })} id={`offer-line-${line.clientId || line.projectDeliverableId || index}`} />
                  <label htmlFor={`offer-line-${line.clientId || line.projectDeliverableId || index}`}>Deliverable offer</label>
                </div>
                <Field label="Deliverable name"><input className="inp" value={line.name || ''} onChange={(e) => updateLine(index, { name: e.target.value })} /></Field>
                <Field label="Milestone">
                  <select className="inp" value={line.milestoneId || ''} onChange={(e) => changeLineMilestone(index, e.target.value)}>
                    <option value="">No milestone</option>
                    {milestones.map((milestone) => <option key={milestone.id} value={milestone.id}>{milestone.title}</option>)}
                  </select>
                </Field>
                <Field label="Description"><textarea className="inp" value={line.description || ''} onChange={(e) => updateLine(index, { description: e.target.value })} /></Field>
                <div className="field-row">
                  <Field label="Qty"><input className="inp num" type="number" step="any" value={line.quantity} onChange={(e) => updateLine(index, { quantity: e.target.value })} /></Field>
                  <Field label="Unit"><input className="inp num" type="number" step="any" value={line.unitPrice} onChange={(e) => updateLine(index, { unitPrice: e.target.value })} /></Field>
                  <Field label="Tax"><input className="inp num" type="number" step="any" value={line.taxRate} onChange={(e) => updateLine(index, { taxRate: e.target.value })} /></Field>
                </div>
              </div>
            ))}
            <button className="btn sm ghost" onClick={addLine}><Icon name="plus" size={14} />Line</button>
          </div>
        </Field>
        <Field label="Notes"><textarea className="inp" value={f.notes || ''} onChange={(e) => set('notes', e.target.value)} /></Field>
        <div className="divider" />
        <div className="detail-grid">
          <dt>Subtotal</dt><dd className="mono">{money(subtotal)}</dd>
          <dt>Tax</dt><dd className="mono">{money(tax)}</dd>
          <dt style={{ fontWeight: 600, color: 'var(--ink)' }}>Total</dt><dd className="mono" style={{ fontWeight: 600 }}>{money(subtotal + tax)}</dd>
        </div>
      </React.Fragment>
    );
  }

  function EmployeeForm({ f, set }) {
    const wagePeriods = f.wagePeriods || [];
    function updatePeriod(index, patch) {
      set('wagePeriods', wagePeriods.map((period, i) => i === index ? { ...period, ...patch } : period));
    }

    function addPeriod() {
      set('wagePeriods', [...wagePeriods, { startsOn: TODAY, endsOn: '', wageAmount: '', wageFrequency: 'Monthly' }]);
    }

    function removePeriod(index) {
      set('wagePeriods', wagePeriods.filter((_, i) => i !== index));
    }

    return (
      <React.Fragment>
        <Field label="Name"><input className="inp" value={f.name} onChange={(e) => set('name', e.target.value)} /></Field>
        <div className="field-row">
          <Field label="Email"><input className="inp" type="email" value={f.email} onChange={(e) => set('email', e.target.value)} /></Field>
          <Field label="Role"><input className="inp" value={f.role} onChange={(e) => set('role', e.target.value)} /></Field>
        </div>
        <Field label="Wage periods" hint="Each period creates payable wage expenses for that date range.">
          <div className="grid" style={{ gap: 8 }}>
            {wagePeriods.map((period, index) => (
              <div key={period.id || index} style={{ border: '1px solid var(--line)', borderRadius: 8, padding: 10 }}>
                <div className="field-row">
                  <Field label="Starts"><input className="inp" type="date" value={period.startsOn || ''} onChange={(e) => updatePeriod(index, { startsOn: e.target.value })} /></Field>
                  <Field label="Ends"><input className="inp" type="date" value={period.endsOn || ''} onChange={(e) => updatePeriod(index, { endsOn: e.target.value })} /></Field>
                </div>
                <div className="field-row">
                  <Field label="Wage"><input className="inp num" type="number" step="any" value={period.wageAmount} onChange={(e) => updatePeriod(index, { wageAmount: e.target.value })} /></Field>
                  <Field label="Frequency"><select className="inp" value={period.wageFrequency || 'Monthly'} onChange={(e) => updatePeriod(index, { wageFrequency: e.target.value })}>{['Hourly', 'Weekly', 'Monthly', 'Annual'].map((o) => <option key={o}>{o}</option>)}</select></Field>
                </div>
                {wagePeriods.length > 1 && <button className="btn sm ghost" onClick={() => removePeriod(index)}><Icon name="trash" size={14} />Remove period</button>}
              </div>
            ))}
            <button className="btn sm ghost" onClick={addPeriod}><Icon name="plus" size={14} />Wage period</button>
          </div>
        </Field>
        <div className="checkrow"><input type="checkbox" checked={!!f.active} onChange={(e) => set('active', e.target.checked)} id="emp-active" /><label htmlFor="emp-active">Active</label></div>
      </React.Fragment>
    );
  }

  function CorrespondenceForm({ f, set, db }) {
    const projects = db.projects || [];
    const selectedProject = projects.find((project) => project.id === f.projectId);
    const deliverables = selectedProject ? (selectedProject.projectDeliverables || []) : [];
    return (
      <React.Fragment>
        <Field label="Customer"><select className="inp" value={f.customerId} onChange={(e) => set('customerId', e.target.value)}>{db.customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}</select></Field>
        <div className="field-row">
          <Field label="Type">
            <select className="inp" value={f.channel || 'note'} onChange={(e) => set('channel', e.target.value)}>
              <option value="note">Note</option>
              <option value="phone notice">Phone notice</option>
              <option value="meeting transcript">Meeting transcript</option>
              <option value="chat">Chat</option>
              <option value="letter">Letter</option>
              <option value="other">Other</option>
            </select>
          </Field>
          <Field label="Timestamp"><input className="inp" type="datetime-local" value={f.occurredAt || ''} onChange={(e) => set({ occurredAt: e.target.value, date: e.target.value ? e.target.value.slice(0, 10) : f.date })} /></Field>
        </div>
        <div className="field-row">
          <Field label="Subject"><input className="inp" value={f.subject} onChange={(e) => set('subject', e.target.value)} /></Field>
          <Field label="Project">
            <select className="inp" value={f.projectId || ''} onChange={(e) => set({ projectId: e.target.value, projectDeliverableId: '' })}>
              <option value="">Customer only</option>
              {projects.filter((project) => !f.customerId || (project.customerIds || []).includes(f.customerId)).map((project) => <option key={project.id} value={project.id}>{project.name}</option>)}
            </select>
          </Field>
        </div>
        {!!f.projectId && <Field label="Deliverable">
          <select className="inp" value={f.projectDeliverableId || ''} onChange={(e) => set('projectDeliverableId', e.target.value)}>
            <option value="">No deliverable</option>
            {deliverables.map((deliverable) => <option key={deliverable.id} value={deliverable.id}>{deliverable.name}</option>)}
          </select>
        </Field>}
        <Field label="Notes"><textarea className="inp" value={f.body} onChange={(e) => set('body', e.target.value)} /></Field>
      </React.Fragment>
    );
  }

  window.Drawer = Drawer;
})();