// ═══════════════════════════════════════════════════════════════
//  editor.jsx — the invoice form (left pane)
// ═══════════════════════════════════════════════════════════════

function Card({ T, title, icon, right, children, style = {} }) {
  return (
    <div style={{ background: T.surface, border: `1px solid ${T.line}`, borderRadius: 10, padding: "18px 20px", marginBottom: 14, ...style }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, color: T.blue }}>
          <Icon name={icon} size={15} />
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: T.ink }}>{title}</span>
        </div>
        {right}
      </div>
      {children}
    </div>
  );
}

const Row = ({ children, gap = 12, style = {} }) => (
  <div style={{ display: "flex", gap, flexWrap: "wrap", marginBottom: 12, alignItems: "flex-end", ...style }}>{children}</div>
);

function Editor({ T, lang, inv, company, updateInv, updateCompany, items, addItem, updateItem, removeItem,
  clients, onSaveClient, onLoadClient, savedItems, onSaveItem, onLoadItem, onDeleteSavedItem,
  groundActive, base, vat, total }) {

  const dtOpts = DOC_TYPES.map(d => ({ v: d.v, l: lang === "en" ? d.en : d.bg }));
  const curOpts = Object.values(CURRENCIES).map(c => ({ v: c.code, l: `${c.code} (${c.sym})` }));
  const vatOpts = VAT_RATES.map(r => ({ v: r.v, l: r.l }));
  const payOpts = PAY_METHODS.map(p => ({ v: p.v, l: lang === "en" ? p.en : p.bg }));
  const groundOpts = VAT_GROUNDS.map(g => ({ v: g.v, l: lang === "en" ? g.en : g.bg }));
  const bankOpts = BANKS.map(b => ({ v: b.n, l: b.l }));
  const styleOpts = DOC_STYLES.map(s => ({ v: s.v, l: s.bg }));

  const pickBank = (v) => {
    const b = BANKS.find(x => x.n === v);
    if (b && b.n !== "_other") updateCompany({ bank: b.n, bankEn: b.nEn || b.n, bic: b.bic });
    else if (b && b.n === "_other") updateCompany({ bank: "", bankEn: "", bic: "" });
  };

  return (
    <div>
      {/* ─── Document ─── */}
      <Card T={T} title="Документ" icon="doc">
        <Row>
          <Select label="Тип" value={inv.docType} onChange={v => updateInv({ docType: v })} options={dtOpts} T={T} flex={2} minWidth={150} />
          <Field label="Номер" value={inv.num} onChange={v => updateInv({ num: v })} T={T} mono minWidth={120} />
          <Select label="Стил" value={inv.style} onChange={v => updateInv({ style: v })} options={styleOpts} T={T} minWidth={120} />
        </Row>
        <Row>
          <Field label="Издаване" type="date" value={inv.issueDate} onChange={v => updateInv({ issueDate: v })} T={T} minWidth={130} />
          <Field label="Дан. събитие" type="date" value={inv.supplyDate} onChange={v => updateInv({ supplyDate: v })} T={T} minWidth={130} />
          <Field label="Срок плащане" type="date" value={inv.dueDate} onChange={v => updateInv({ dueDate: v })} T={T} minWidth={130} />
        </Row>
        <Row style={{ marginBottom: 0 }}>
          <Select label="Валута" value={inv.currency} onChange={v => updateInv({ currency: v })} options={curOpts} T={T} minWidth={110} />
          <Select label="ДДС ставка" value={inv.defaultVat} onChange={v => updateInv({ defaultVat: Number(v) })} options={vatOpts} T={T} minWidth={100} />
          <Select label="Плащане" value={inv.payMethod} onChange={v => updateInv({ payMethod: v })} options={payOpts} T={T} minWidth={130} />
        </Row>
        {(inv.docType === "credit" || inv.docType === "debit") && (
          <Row style={{ marginTop: 12, marginBottom: 0, padding: "12px 14px", background: T.blueSoft, borderRadius: 8 }}>
            <Field label="Към документ №" value={inv.refNum} onChange={v => updateInv({ refNum: v })} T={T} mono placeholder="0000000001" minWidth={150} />
            <Field label="От дата" type="date" value={inv.refDate} onChange={v => updateInv({ refDate: v })} T={T} minWidth={130} />
          </Row>
        )}
        <div style={{ marginTop: 12 }}>
          <Select label="Основание за неначисляване на ДДС" value={inv.ground} onChange={v => updateInv({ ground: v })} options={groundOpts} T={T} />
        </div>
        {inv.ground === "custom" && (
          <div style={{ marginTop: 10 }}>
            <Field label="Ръчно основание" value={inv.groundCustom} onChange={v => updateInv({ groundCustom: v })} T={T} />
          </div>
        )}
        {groundActive && <div style={{ marginTop: 8, fontSize: 10.5, color: T.blue, display: "flex", alignItems: "center", gap: 6 }}><Icon name="check" size={13} />При избрано основание ДДС се начислява 0%</div>}
      </Card>

      {/* ─── Supplier ─── */}
      <Card T={T} title="Доставчик (твоята фирма)" icon="doc">
        <Row><Field label="Име (БГ)" value={company.name} onChange={v => updateCompany({ name: v })} T={T} minWidth={180} />
          <Field label="Name (EN)" value={company.nameEn} onChange={v => updateCompany({ nameEn: v })} T={T} minWidth={180} /></Row>
        <Row><Field label="ЕИК" value={company.eik} onChange={v => updateCompany({ eik: v })} T={T} mono minWidth={120} />
          <Field label="ИН по ДДС" value={company.vatId} onChange={v => updateCompany({ vatId: v })} T={T} mono minWidth={120} />
          <Field label="МОЛ" value={company.mol} onChange={v => updateCompany({ mol: v })} T={T} minWidth={120} /></Row>
        <Row><Field label="Адрес (БГ)" value={company.address} onChange={v => updateCompany({ address: v })} T={T} minWidth={180} />
          <Field label="Address (EN)" value={company.addressEn} onChange={v => updateCompany({ addressEn: v })} T={T} minWidth={180} /></Row>
        <Row style={{ marginBottom: 0 }}>
          <Select label="Банка" value={company.bank} onChange={pickBank} options={bankOpts} T={T} minWidth={150} />
          <Field label="IBAN" value={company.iban} onChange={v => updateCompany({ iban: v })} T={T} mono minWidth={200} />
          <Field label="BIC" value={company.bic} onChange={v => updateCompany({ bic: v })} T={T} mono minWidth={110} />
        </Row>
      </Card>

      {/* ─── Client ─── */}
      <Card T={T} title="Получател" icon="users" right={
        clients.length > 0 && (
          <select onChange={e => { if (e.target.value !== "") onLoadClient(Number(e.target.value)); e.target.value = ""; }} value=""
            style={{ padding: "5px 9px", fontSize: 11, fontFamily: MONO, border: `1px solid ${T.line}`, borderRadius: 6, background: T.field, color: T.sub, cursor: "pointer" }}>
            <option value="">Зареди клиент…</option>
            {clients.map((c, i) => <option key={i} value={i}>{c.name || c.nameEn} {c.eik ? `(${c.eik})` : ""}</option>)}
          </select>
        )
      }>
        <Row><Field label="Име (БГ)" value={inv.client.name} onChange={v => updateInv({ client: { ...inv.client, name: v } })} T={T} minWidth={180} />
          <Field label="Name (EN)" value={inv.client.nameEn} onChange={v => updateInv({ client: { ...inv.client, nameEn: v } })} T={T} minWidth={180} /></Row>
        <Row><Field label="ЕИК" value={inv.client.eik} onChange={v => updateInv({ client: { ...inv.client, eik: v } })} T={T} mono minWidth={120} />
          <Field label="ИН по ДДС" value={inv.client.vatId} onChange={v => updateInv({ client: { ...inv.client, vatId: v } })} T={T} mono minWidth={120} />
          <Field label="МОЛ" value={inv.client.mol} onChange={v => updateInv({ client: { ...inv.client, mol: v } })} T={T} minWidth={120} /></Row>
        <Row style={{ marginBottom: 0 }}><Field label="Адрес (БГ)" value={inv.client.address} onChange={v => updateInv({ client: { ...inv.client, address: v } })} T={T} minWidth={180} />
          <Field label="Address (EN)" value={inv.client.addressEn} onChange={v => updateInv({ client: { ...inv.client, addressEn: v } })} T={T} minWidth={180} /></Row>
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 12 }}>
          <Button T={T} kind="ghost" size="sm" icon="save" onClick={onSaveClient}>Запази клиента</Button>
        </div>
      </Card>

      {/* ─── Items ─── */}
      <Card T={T} title="Артикули и услуги" icon="box" right={
        <Button T={T} kind="primary" size="sm" icon="plus" onClick={addItem}>Ред</Button>
      }>
        {items.map((it, i) => {
          const c = lineCalc(it, groundActive, inv.defaultVat);
          return (
            <div key={i} style={{ padding: "12px 14px", background: T.blueSoft, borderRadius: 9, marginBottom: 10 }}>
              {savedItems.length > 0 && (
                <div style={{ marginBottom: 8 }}>
                  <select onChange={e => { if (e.target.value !== "") onLoadItem(Number(e.target.value), i); e.target.value = ""; }} value=""
                    style={{ padding: "4px 8px", fontSize: 10.5, fontFamily: MONO, border: `1px solid ${T.line}`, borderRadius: 5, background: T.field, color: T.sub, cursor: "pointer" }}>
                    <option value="">Зареди записан артикул…</option>
                    {savedItems.map((s, j) => <option key={j} value={j}>{s.desc || s.descEn} · {fmtNum(s.price)}</option>)}
                  </select>
                </div>
              )}
              <Row gap={9} style={{ marginBottom: 9 }}>
                <Field label="Описание (БГ)" value={it.desc} onChange={v => updateItem(i, { desc: v })} T={T} flex={2} minWidth={150} />
                <Field label="Description (EN)" value={it.descEn} onChange={v => updateItem(i, { descEn: v })} T={T} flex={2} minWidth={150} />
              </Row>
              <Row gap={9} style={{ marginBottom: 0 }}>
                <Field label="Кол." type="number" value={it.qty} onChange={v => updateItem(i, { qty: Number(v) || 0 })} T={T} mono flex={0} minWidth={56} />
                <Field label="Мярка" value={it.unit} onChange={v => updateItem(i, { unit: v })} T={T} flex={0} minWidth={62} />
                <Field label="Ед. цена" type="number" value={it.price} onChange={v => updateItem(i, { price: Number(v) || 0 })} T={T} mono flex={0} minWidth={86} />
                <Field label="Отстъпка" type="number" value={it.disc} onChange={v => updateItem(i, { disc: Number(v) || 0 })} T={T} mono flex={0} minWidth={70}
                  suffix={it.discType} />
                <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                  <Label T={T}>Тип</Label>
                  <select value={it.discType} onChange={e => updateItem(i, { discType: e.target.value })}
                    style={{ padding: "9px 6px", border: `1px solid ${T.line}`, borderRadius: 7, fontSize: 12, fontFamily: MONO, background: T.field, color: T.ink, cursor: "pointer" }}>
                    <option value="%">%</option><option value="fix">{CURRENCIES[inv.currency].sym}</option>
                  </select>
                </div>
                <Select label="ДДС" value={it.vat} onChange={v => updateItem(i, { vat: Number(v) })} options={VAT_RATES.map(r => ({ v: r.v, l: r.l }))} T={T} flex={0} minWidth={70} />
                <div style={{ minWidth: 84, textAlign: "right" }}>
                  <Label T={T}>Нето</Label>
                  <div style={{ fontFamily: MONO, fontSize: 14, fontWeight: 700, color: T.blue, paddingTop: 7 }}>{fmtNum(c.net)}</div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 5, paddingBottom: 2 }}>
                  <button title="Запази артикул" onClick={() => onSaveItem(it)} style={{ background: "none", border: "none", color: T.faint, cursor: "pointer", padding: 3 }}><Icon name="save" size={15} /></button>
                  <button title="Изтрий" onClick={() => removeItem(i)} style={{ background: "none", border: "none", color: T.danger, cursor: "pointer", padding: 3 }}><Icon name="trash" size={15} /></button>
                </div>
              </Row>
            </div>
          );
        })}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 28, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${T.line}`, fontSize: 12.5 }}>
          <div style={{ textAlign: "right", color: T.sub, lineHeight: 1.9 }}>
            <div>Данъчна основа</div><div>ДДС</div>
            <div style={{ fontWeight: 700, color: T.ink, fontSize: 15, marginTop: 3 }}>Общо</div>
          </div>
          <div style={{ textAlign: "right", fontFamily: MONO, lineHeight: 1.9 }}>
            <div>{money(base, inv.currency)}</div><div>{money(vat, inv.currency)}</div>
            <div style={{ fontWeight: 700, color: T.blue, fontSize: 15, marginTop: 3 }}>{money(total, inv.currency)}</div>
          </div>
        </div>
      </Card>

      {/* ─── Notes ─── */}
      <Card T={T} title="Забележки" icon="edit" style={{ marginBottom: 0 }}>
        <TextArea value={inv.notes} onChange={v => updateInv({ notes: v })} T={T} rows={2} placeholder="напр. Общо часове по проекта: 72.00 ч" />
      </Card>
    </div>
  );
}

Object.assign(window, { Editor, Card, Row });