// ============================================================================
// Beszerzés — a projektbe megvásárolandó tételek listája
// ----------------------------------------------------------------------------
// Minden tétel egy FÁZIS-hoz és — ha van — egy KÖLTSÉGVETÉSI TÉTEL-hez
// (parent task) tartozik, ezért a lista a költségvetés szerkezete szerint
// olvasható: melyik keretből mit tervezünk megvenni, és miből mennyi ment el.
//
// Rögzítés kétféleképp:
//   • kézzel — a mezők kitöltésével;
//   • linkkel — a termék linkjét beillesztve a szerver kiolvassa a nevet, a
//     leírást, az árat és a képet (api/procurement/fetch-link.php).
//
// KÉTNYELVŰSÉG: a rögzítő a SAJÁT nyelvén ír (egyetlen megnevezés/leírás mező),
// a másik nyelvű változatot a szerver készíti el mentéskor. A listában és a
// kártyákon mindenki a saját nyelvén látja a tételt — magyar felületen magyarul,
// angolon angolul.
//
// Állapotok: Előválogatva → Kiválasztva → Megvásárolva → Beépítve.
//
// FONTOS: ez tervezési/bevásárló lista, nem könyvelés. A tényleges költés
// továbbra is a jóváhagyott teljesítésekből jön; a beszerzési összegek külön
// jelennek meg, és nem módosítják a Költségvetés jóváhagyott számait.
// ============================================================================

// Gyakori mértékegységek — a mennyiség melletti mezőhöz ajánlásként.
const PROC_UNITS = ['db', 'csomag', 'készlet', 'm', 'm²', 'm³', 'kg', 'liter'];

// Állapot-pasztilla. Szerkesztési joggal gombként viselkedik (állapotváltó).
const ProcStatusPill = ({ status, onClick, small = false }) => {
  const color = window.PROC_STATUS_COLORS[status] || 'var(--ink-3)';
  const label = window.procStatusLabel(status);
  const style = {
    display: 'inline-flex', alignItems: 'center', gap: 5, flexShrink: 0,
    background: color + '1F', color, border: 'none',
    padding: small ? '2px 8px' : '4px 10px',
    fontSize: small ? 10 : 11, fontWeight: 700, borderRadius: 999,
    cursor: onClick ? 'pointer' : 'default', whiteSpace: 'nowrap',
  };
  const inner = (
    <>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: color, flexShrink: 0 }}/>
      {label}
      {onClick && <Icon name="chevron-d" size={11}/>}
    </>
  );
  if (!onClick) return <span style={style}>{inner}</span>;
  return (
    <button className="bare" onClick={onClick} style={style} title="Állapot módosítása">{inner}</button>
  );
};

// Termékkép-bélyeg. Kép hiányában semleges helyőrző (kosár ikon).
const ProcThumb = ({ item, size = 56 }) => {
  const [failed, setFailed] = React.useState(false);
  const box = {
    width: size, height: size, flexShrink: 0, borderRadius: 'var(--r-sm)',
    background: 'var(--surface-2)', display: 'flex', alignItems: 'center',
    justifyContent: 'center', color: 'var(--ink-4)', overflow: 'hidden',
  };
  if (!item.imageUrl || failed) {
    return <div style={box}><Icon name="cart" size={Math.round(size / 2.6)}/></div>;
  }
  return (
    <div style={box}>
      <img src={item.imageUrl} alt="" loading="lazy" onError={() => setFailed(true)}
        style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
    </div>
  );
};

// Egy tétel sora a listában.
const ProcurementRow = ({ item, canEdit, onOpen, onStatus, busy }) => {
  const task = window.getParentTask(item.parentTaskId);
  const total = window.procTotal(item);
  const qtyLabel = window.procQuantityLabel(item);
  return (
    <div className="card" onClick={() => onOpen(item)}
      style={{ padding: 12, display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', opacity: busy ? 0.5 : 1 }}>
      <ProcThumb item={item}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row" style={{ gap: 8, alignItems: 'flex-start', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3, minWidth: 0 }}>
            {window.procName(item)}
          </div>
          <div className="num" style={{ fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap' }}>
            {window.formatHufShort(total)} Ft
          </div>
        </div>

        <div className="muted" style={{ fontSize: 11, marginTop: 2, whiteSpace: 'nowrap', textAlign: 'right' }}>
          {`${qtyLabel} × ${window.formatHufShort(item.unitPriceHuf)} Ft`}
          {item.currency !== 'HUF' && ` (${item.unitPrice} ${item.currency})`}
        </div>

        {/* A leírás egy sorban, levágva — a teljes szöveg a tétel megnyitásakor. */}
        {window.procDescription(item) && (
          <div className="muted" style={{ fontSize: 11, marginTop: 4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {window.procDescription(item)}
          </div>
        )}

        <div className="row" style={{ gap: 6, marginTop: 8, flexWrap: 'wrap', alignItems: 'center' }}>
          <span onClick={(e) => e.stopPropagation()}>
            <ProcStatusPill status={item.status} small onClick={canEdit ? () => onStatus(item) : null}/>
          </span>
          {task && (
            <span className="chip" style={{ padding: '3px 8px', fontSize: 10, background: 'var(--surface-2)', border: 'none', color: 'var(--ink-2)' }}>
              {task.name}
            </span>
          )}
          {item.vendor && <span className="muted" style={{ fontSize: 11 }}>{item.vendor}</span>}
          {item.url && (
            <a href={item.url} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()}
              title="Termék megnyitása" style={{ color: 'var(--accent-d)', display: 'inline-flex', alignItems: 'center' }}>
              <Icon name="link" size={13}/>
            </a>
          )}
        </div>
      </div>
    </div>
  );
};

// ─── fő nézet ──────────────────────────────────────────────────────────────
const Procurement = ({ user, onToast }) => {
  const [query, setQuery] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [phaseFilter, setPhaseFilter] = React.useState('all');
  const [taskFilter, setTaskFilter] = React.useState('all');
  const [sheet, setSheet] = React.useState(null);          // { item } | { item: null }
  const [statusFor, setStatusFor] = React.useState(null);  // állapotváltó lap
  const [busyId, setBusyId] = React.useState(null);

  const canEdit = !!(window.hasPerm && window.hasPerm('procurement.edit', user, true));
  const items = window.PROCUREMENT || [];

  const toast = (msg) => (onToast ? onToast(msg) : null);

  // Szűrés: állapot + fázis + költségvetési tétel + szabad szavas keresés.
  const filtered = items.filter(it => {
    if (statusFilter !== 'all' && it.status !== statusFilter) return false;
    if (phaseFilter !== 'all' && String(it.phaseId) !== String(phaseFilter)) return false;
    if (taskFilter !== 'all' && String(it.parentTaskId || '') !== String(taskFilter)) return false;
    return window.procMatchesQuery(it, query);
  });

  // Fázisonként csoportosítva, a fázisok sorrendjében; egy fázison belül a
  // költségvetési tételek sorrendje, azon belül a legújabb elöl.
  const taskOrder = new Map((window.PARENT_TASKS || []).map((t, i) => [t.id, i]));
  const groups = (window.PHASES || [])
    .map(p => ({
      phase: p,
      items: filtered.filter(it => it.phaseId === p.id).sort((a, b) => {
        const ta = taskOrder.has(a.parentTaskId) ? taskOrder.get(a.parentTaskId) : 9999;
        const tb = taskOrder.has(b.parentTaskId) ? taskOrder.get(b.parentTaskId) : 9999;
        if (ta !== tb) return ta - tb;
        return b.id - a.id;
      }),
    }))
    .filter(g => g.items.length > 0);

  // Az összesítő a SZŰRT listára vonatkozik, hogy a keresés eredménye is
  // azonnal számot adjon.
  const sumOf = (list) => list.reduce((s, it) => s + window.procTotal(it), 0);
  const statTotals = window.PROC_STATUSES.map(s => {
    const list = filtered.filter(it => it.status === s);
    return { status: s, count: list.length, sum: sumOf(list) };
  });
  const grandTotal = sumOf(filtered);

  const tasksForFilter = phaseFilter === 'all'
    ? (window.PARENT_TASKS || [])
    : (window.PARENT_TASKS || []).filter(t => String(t.phaseId) === String(phaseFilter));
  const filtersActive = phaseFilter !== 'all' || taskFilter !== 'all' || !!query;

  const changeStatus = async (item, status) => {
    setStatusFor(null);
    if (item.status === status) return;
    setBusyId(item.id);
    try {
      await window.api.procurement.status(item.id, status);
      await window.refreshData();
      toast('✓ ' + window.procStatusLabel(status));
    } catch (err) {
      alert(window.apiErrorMessage(err));
    } finally {
      setBusyId(null);
    }
  };

  return (
    <div className="main fade-in">
      <div className="row between">
        <div>
          <div className="eyebrow">Projekt</div>
          <h2 style={{ marginTop: 4 }}>Beszerzés</h2>
        </div>
        {canEdit && (
          <button className="btn accent sm" onClick={() => setSheet({ item: null })}>
            <Icon name="plus" size={14}/> Új tétel
          </button>
        )}
      </div>

      {/* Összesítő — a szűrt listára. Az állapot-cellák egyben szűrők is. */}
      <div className="card" style={{ padding: 16 }}>
        <div className="row between" style={{ alignItems: 'flex-start', gap: 12 }}>
          <div style={{ minWidth: 0 }}>
            <div className="eyebrow">Beszerzési lista értéke</div>
            <div className="num" style={{ fontSize: 26, fontWeight: 700, marginTop: 2 }}>
              {window.formatHufShort(grandTotal)} Ft
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{`${filtered.length} tétel`}</div>
          </div>
          {statusFilter !== 'all' && (
            <button className="btn ghost sm" onClick={() => setStatusFilter('all')} style={{ whiteSpace: 'nowrap' }}>
              <Icon name="x" size={14}/> Szűrő törlése
            </button>
          )}
        </div>

        {/* Keskeny kijelzőn 2×2-be törik, szélesen egy sorba rendeződik. */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 8, marginTop: 14 }}>
          {statTotals.map(s => {
            const color = window.PROC_STATUS_COLORS[s.status];
            const active = statusFilter === s.status;
            return (
              <button key={s.status} className="bare tap"
                onClick={() => setStatusFilter(active ? 'all' : s.status)}
                style={{
                  textAlign: 'left', padding: '8px 9px', borderRadius: 'var(--r-sm)',
                  background: active ? color + '1F' : 'transparent',
                  border: '1px solid ' + (active ? color + '55' : 'var(--line-2)'),
                  cursor: 'pointer', minWidth: 0,
                }}>
                <div style={{ fontSize: 10, fontWeight: 700, color, textTransform: 'uppercase', letterSpacing: '0.03em', lineHeight: 1.2 }}>
                  {window.procStatusLabel(s.status)}
                </div>
                <div className="num" style={{ fontSize: 13, fontWeight: 700, marginTop: 4 }}>
                  {window.formatHufShort(s.sum)} Ft
                </div>
                <div className="muted" style={{ fontSize: 10 }}>{`${s.count} tétel`}</div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Szűrők — keresés mindenben, fázis és költségvetési tétel szerint. */}
      <FilterPanel active={filtersActive}
        onClear={() => { setQuery(''); setPhaseFilter('all'); setTaskFilter('all'); }}>
        <div className="filter-search">
          <Icon name="search" size={16}/>
          <input type="text" className="input" value={query} onChange={e => setQuery(e.target.value)}
            placeholder="Keresés név, bolt, leírás, fázis, ár…" autoComplete="off" spellCheck={false}/>
          {query && (
            <button className="login-search-clear" onClick={() => setQuery('')} aria-label="Keresés törlése">
              <Icon name="x" size={14}/>
            </button>
          )}
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end' }}>
          <div className="field" style={{ margin: 0, flex: '1 1 160px', minWidth: 0 }}>
            <label className="label">Fázis</label>
            <select className="select" value={phaseFilter}
              onChange={e => { setPhaseFilter(e.target.value); setTaskFilter('all'); }}>
              <option value="all">Mind</option>
              {(window.PHASES || []).map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
          <div className="field" style={{ margin: 0, flex: '1 1 160px', minWidth: 0 }}>
            <label className="label">Költségvetési tétel</label>
            <select className="select" value={taskFilter} onChange={e => setTaskFilter(e.target.value)}>
              <option value="all">Mind</option>
              {tasksForFilter.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
          </div>
        </div>
      </FilterPanel>

      {/* Lista — fázisonként csoportosítva, a keret melletti összesítéssel. */}
      <div className="stack-2">
        {groups.map(g => {
          const totals = window.procPhaseTotals(g.phase.id);
          const budget = window.phaseBudget(g.phase.id);
          const groupSum = sumOf(g.items);
          return (
            <div key={g.phase.id}>
              <div className="row" style={{ gap: 10, alignItems: 'center', margin: '4px 2px 8px' }}>
                <span className="phase-stripe" style={{ background: g.phase.color, height: 28, width: 4, borderRadius: 2, flexShrink: 0 }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>
                    <span className="mono muted" style={{ fontSize: 11 }}>{g.phase.code}</span> {g.phase.name}
                  </div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 1 }}>
                    {`${g.items.length} tétel · tervezett ${window.formatHufShort(totals.planned)} Ft`
                      + ` · megvásárolt ${window.formatHufShort(totals.bought)} Ft`}
                  </div>
                </div>
                <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                  <div className="num" style={{ fontSize: 13, fontWeight: 700 }}>
                    {window.formatHufShort(groupSum)} Ft
                  </div>
                  {budget > 0 && (
                    <div className="num muted" style={{ fontSize: 10, marginTop: 1 }}>
                      {`/ ${window.formatHufShort(budget)} Ft keret`}
                    </div>
                  )}
                </div>
              </div>
              <div className="stack-2">
                {g.items.map(it => (
                  <ProcurementRow key={it.id} item={it} canEdit={canEdit} busy={busyId === it.id}
                    onOpen={(x) => setSheet({ item: x })}
                    onStatus={(x) => setStatusFor(x)}/>
                ))}
              </div>
            </div>
          );
        })}

        {groups.length === 0 && (
          <div className="muted" style={{ padding: 24, textAlign: 'center', fontSize: 13 }}>
            {items.length === 0
              ? 'Még nincs beszerzési tétel. Vedd fel az elsőt kézzel, vagy illeszd be a termék linkjét.'
              : 'Nincs a szűrőnek megfelelő beszerzési tétel.'}
          </div>
        )}
      </div>

      {/* Gyors állapotváltás a listából. */}
      {statusFor && (
        <Sheet open onClose={() => setStatusFor(null)} title="Állapot módosítása">
          <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>
            <b style={{ color: 'var(--ink)' }}>{window.procName(statusFor)}</b>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {window.PROC_STATUSES.map(s => {
              const c = window.PROC_STATUS_COLORS[s];
              const active = statusFor.status === s;
              return (
                <button key={s} className="chip" onClick={() => changeStatus(statusFor, s)}
                  style={{ background: active ? c : c + '22', color: active ? '#fff' : c, border: active ? '1px solid ' + c : 'none', cursor: 'pointer' }}>
                  <span className="dot" style={{ background: active ? 'white' : c }}/> {window.procStatusLabel(s)}{active ? ' ✓' : ''}
                </button>
              );
            })}
          </div>
        </Sheet>
      )}

      {sheet && (
        <ProcurementSheet
          item={sheet.item}
          user={user}
          onClose={() => setSheet(null)}
          onDone={(msg) => { setSheet(null); if (msg) toast(msg); }}/>
      )}
    </div>
  );
};

// ─── rögzítő / szerkesztő űrlap ────────────────────────────────────────────
const ProcurementSheet = ({ item, user, onClose, onDone }) => {
  const isNew = !item;
  const canEdit = !!(window.hasPerm && window.hasPerm('procurement.edit', user, true));
  const isManager = user && (user.role === 'admin' || user.role === 'approver');
  const canDelete = !isNew && canEdit && (isManager || item.createdBy === user.id);

  // A felhasználó a SAJÁT nyelvén ír; a másik nyelvű változatot a szerver
  // készíti el mentéskor, ezért itt csak egy megnevezés/leírás mező van.
  // A `other*` állapot a linkes beolvasásból már meglévő másik nyelvű szöveget
  // viszi tovább (ilyenkor a szervernek nem kell újrafordítania).
  const lang = window.LANG === 'en' ? 'en' : 'hu';
  const [link, setLink] = React.useState(item?.url || '');
  const [name, setName] = React.useState(item ? window.procName(item) : '');
  const [desc, setDesc] = React.useState(item ? window.procDescription(item) : '');
  const [otherName, setOtherName] = React.useState('');
  const [otherDesc, setOtherDesc] = React.useState('');
  const [vendor, setVendor] = React.useState(item?.vendor || '');
  const [imageUrl, setImageUrl] = React.useState(item?.imageUrl || '');
  const [phaseId, setPhaseId] = React.useState(item ? String(item.phaseId) : '');
  const [taskId, setTaskId] = React.useState(item?.parentTaskId ? String(item.parentTaskId) : '');
  const [price, setPrice] = React.useState(item ? String(item.unitPrice) : '');
  const [currency, setCurrency] = React.useState(item?.currency || 'HUF');
  const [qty, setQty] = React.useState(item ? String(item.quantity) : '1');
  const [unit, setUnit] = React.useState(item?.unit || 'db');
  const [status, setStatus] = React.useState(item?.status || 'shortlisted');
  const [note, setNote] = React.useState(item?.note || '');

  const [fetching, setFetching] = React.useState(false);
  const [fetchNote, setFetchNote] = React.useState('');
  // Igaz, ha a fázist/tételt a beolvasás töltötte ki — ilyenkor jelezzük, hogy
  // ez javaslat, és nyugodtan átállítható.
  const [suggested, setSuggested] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [dirty, setDirty] = React.useState(false);
  const touch = () => setDirty(true);

  // Lezárt fázisba csak admin/jóváhagyó vehet fel új tételt; a MÁR ott lévő
  // tétel fázisa viszont mindig szerepel a listában, hogy szerkesztéskor ne
  // essen ki a kiválasztott érték.
  const phases = (window.PHASES || []).filter(p => !p.locked || isManager || (item && item.phaseId === p.id));
  const tasks = phaseId
    ? (window.PARENT_TASKS || []).filter(t => String(t.phaseId) === String(phaseId))
    : [];

  const fx = window.FX_RATES || { HUF: 1 };
  const priceNum = parseFloat(String(price).replace(',', '.')) || 0;
  const qtyNum = parseFloat(String(qty).replace(',', '.')) || 0;
  const unitHuf = Math.round(priceNum * (fx[currency] || 1));
  const totalHuf = Math.round(unitHuf * qtyNum);

  // Link-beolvasás: a szerver kiolvassa a termékadatokat, mi csak előtöltjük az
  // űrlapot. A már kitöltött mezőket nem írjuk felül vakon — a név/ár/kép igen,
  // hiszen épp azért kérte a felhasználó.
  const fetchLink = async () => {
    const url = link.trim();
    if (!url) return;
    setFetching(true);
    setFetchNote('');
    try {
      const res = await window.api.procurement.fetchLink(url);
      const p = res.product || {};
      // A saját nyelvünkön töltjük ki a mezőt; a másik nyelvű változat (ha a
      // beolvasás adott ilyet) rejtve utazik tovább a mentésig.
      const mine = lang === 'en' ? (p.nameEn || p.name) : p.name;
      const theirs = lang === 'en' ? p.name : p.nameEn;
      const mineDesc = lang === 'en' ? (p.descriptionEn || p.description) : p.description;
      const theirsDesc = lang === 'en' ? p.description : p.descriptionEn;
      if (mine) setName(mine);
      if (mineDesc) setDesc(mineDesc);
      setOtherName(theirs && theirs !== mine ? theirs : '');
      setOtherDesc(theirsDesc && theirsDesc !== mineDesc ? theirsDesc : '');
      if (p.vendor) setVendor(p.vendor);
      if (p.imageUrl) setImageUrl(p.imageUrl);
      if (p.url) setLink(p.url);
      if (p.unit) setUnit(p.unit);
      if (p.price > 0) {
        setPrice(String(p.price));
        setCurrency(p.currency || 'HUF');
      }
      // Fázis + költségvetési tétel a termék alapján. Csak az üres mezőket
      // töltjük ki: ha a felhasználó már választott, az ő döntése marad.
      const s = res.suggestion || {};
      let applied = false;
      if (!phaseId && s.phaseId) {
        setPhaseId(String(s.phaseId));
        applied = true;
        if (s.parentTaskId) setTaskId(String(s.parentTaskId));
      } else if (phaseId && !taskId && s.parentTaskId && String(s.phaseId) === String(phaseId)) {
        setTaskId(String(s.parentTaskId));
        applied = true;
      }
      setSuggested(applied);
      touch();
      setFetchNote(
        p.price > 0
          ? (res.aiUsed ? '✓ Beolvasva (AI kiegészítéssel)' : '✓ Beolvasva')
          : '✓ Beolvasva — az árat nem találtam, írd be kézzel'
      );
    } catch (err) {
      setFetchNote('Nem sikerült: ' + window.apiErrorMessage(err));
    } finally {
      setFetching(false);
    }
  };

  const save = async () => {
    if (!name.trim()) { alert(window.t('Adj nevet a tételnek')); return; }
    if (!phaseId) { alert(window.t('Válassz fázist')); return; }
    setBusy(true);
    try {
      await window.api.procurement.save({
        id: item ? item.id : 0,
        phase_id: parseInt(phaseId, 10),
        parent_task_id: taskId ? parseInt(taskId, 10) : null,
        name: name.trim(),
        description: desc.trim(),
        source_lang: lang,
        name_other: otherName.trim(),
        description_other: otherDesc.trim(),
        vendor: vendor.trim(),
        url: link.trim(),
        image_url: imageUrl.trim(),
        price: priceNum,
        currency,
        quantity: qtyNum || 1,
        unit: unit.trim(),
        status,
        note: note.trim(),
      });
      await window.refreshData();
      onDone(isNew ? '✓ Beszerzési tétel felvéve' : '✓ Módosítások mentve');
    } catch (err) {
      alert(window.apiErrorMessage(err));
      setBusy(false);
    }
  };

  const remove = async () => {
    if (!window.confirm(window.t('Biztosan törlöd ezt a beszerzési tételt?') + '\n\n' + window.procName(item))) return;
    setBusy(true);
    try {
      await window.api.procurement.del(item.id);
      await window.refreshData();
      onDone('✓ Tétel törölve');
    } catch (err) {
      alert(window.apiErrorMessage(err));
      setBusy(false);
    }
  };

  // Keret-környezet a kiválasztott költségvetési tételhez: mennyi a keret,
  // mennyi ment el jóváhagyott teljesítésre, és mennyi van a beszerzési listán.
  const task = taskId ? window.getParentTask(parseInt(taskId, 10)) : null;
  const taskSpent = task ? window.parentTaskSpent(task.id) : 0;
  const taskProc = task ? window.procTaskTotals(task.id) : null;

  return (
    <Sheet open onClose={onClose} dirty={dirty}
      discardText="A beszerzési tétel nincs mentve. Biztosan bezárod?"
      title={isNew ? 'Új beszerzési tétel' : 'Beszerzési tétel'}>

      {/* Link-beolvasás — a leggyorsabb út egy webáruházi termék felvételéhez. */}
      {canEdit && (
        <div className="card" style={{ padding: 12, marginBottom: 14, background: 'var(--surface-2)', boxShadow: 'none' }}>
          <label className="label">Termék linkje</label>
          <div className="row" style={{ gap: 8 }}>
            <input className="input" value={link} style={{ flex: 1, minWidth: 0 }}
              onChange={e => { setLink(e.target.value); touch(); }}
              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); fetchLink(); } }}
              placeholder="https://…" autoComplete="off" spellCheck={false} inputMode="url"/>
            <button className="btn accent" onClick={fetchLink} disabled={fetching || !link.trim()}
              style={{ whiteSpace: 'nowrap', opacity: fetching || !link.trim() ? 0.6 : 1 }}>
              <Icon name="download" size={14}/> {fetching ? 'Beolvasás…' : 'Beolvasás'}
            </button>
          </div>
          <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>
            {fetchNote || 'Illeszd be a termék linkjét — a név, a leírás, az ár és a kép magától kitöltődik.'}
          </div>
        </div>
      )}

      {/* Termékkép — a beolvasott előnézet, elvethető. */}
      {imageUrl && (
        <div className="row" style={{ gap: 10, alignItems: 'center', marginBottom: 14 }}>
          <img src={imageUrl} alt="" style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 'var(--r-sm)', background: 'var(--surface-2)' }}/>
          <div className="muted" style={{ fontSize: 11, flex: 1, minWidth: 0, wordBreak: 'break-all' }}>{imageUrl}</div>
          <button className="btn ghost sm" onClick={() => { setImageUrl(''); touch(); }} aria-label="Kép eltávolítása">
            <Icon name="x" size={14}/>
          </button>
        </div>
      )}

      {/* Megnevezés + leírás a felhasználó nyelvén. A másik nyelvű változat
          mentéskor, automatikusan készül el — nincs külön mezője. */}
      <div className="field">
        <label className="label">Megnevezés</label>
        <input className="input" value={name} onChange={e => { setName(e.target.value); setOtherName(''); touch(); }}
          placeholder="Pl. Grohe zuhanyszett" autoComplete="off"/>
      </div>

      <div className="field">
        <label className="label">Leírás</label>
        <textarea className="textarea" value={desc} onChange={e => { setDesc(e.target.value); setOtherDesc(''); touch(); }}
          placeholder="Rövid leírás, méret, típus…" rows={2}/>
      </div>

      {/* Költségvetési hovatartozás — enélkül a tétel nem köthető kerethez.
          Linkes rögzítésnél a termék alapján előre kitöltjük. */}
      <div className="field">
        <label className="label">Fázis</label>
        <select className="select" value={phaseId}
          onChange={e => { setPhaseId(e.target.value); setTaskId(''); setSuggested(false); touch(); }}>
          <option value="">Válassz fázist…</option>
          {phases.map(p => <option key={p.id} value={p.id}>{p.code} · {p.name}</option>)}
        </select>
        {suggested && (
          <div className="muted" style={{ fontSize: 11, marginTop: 6, display: 'flex', gap: 5, alignItems: 'center' }}>
            <Icon name="sparkle" size={12}/> A termék alapján javasolva — átállíthatod.
          </div>
        )}
      </div>

      <div className="field">
        <label className="label">Költségvetési tétel</label>
        <select className="select" value={taskId} onChange={e => { setTaskId(e.target.value); setSuggested(false); touch(); }}
          disabled={!phaseId}>
          <option value="">Nincs megadva</option>
          {tasks.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
        </select>
        {!taskId && phaseId && (
          <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>
            Költségvetési tétel nélkül a beszerzés csak a fázis szintjén jelenik meg.
          </div>
        )}
      </div>

      {/* Keret-környezet: hol tart ez a költségvetési tétel. */}
      {task && (
        <div className="card" style={{ padding: 12, marginTop: 14, background: 'var(--surface-2)', boxShadow: 'none' }}>
          <div className="row between" style={{ fontSize: 12 }}>
            <span className="muted">Keret</span>
            <span className="num" style={{ fontWeight: 700 }}>{window.formatHuf(task.budget)}</span>
          </div>
          <div style={{ margin: '8px 0' }}>
            <BudgetBar spent={taskSpent} budget={task.budget} height={6} marker={taskSpent > task.budget}/>
          </div>
          <div className="row between" style={{ fontSize: 11 }}>
            <span className="muted">Elköltve (jóváhagyott)</span>
            <span className="num">{window.formatHuf(taskSpent)}</span>
          </div>
          <div className="row between" style={{ fontSize: 11, marginTop: 3 }}>
            <span className="muted">Beszerzési listán</span>
            <span className="num">
              {`${window.formatHufShort(taskProc.planned)} Ft tervezett · ${window.formatHufShort(taskProc.bought)} Ft megvásárolt`}
            </span>
          </div>
        </div>
      )}

      {/* Ár, pénznem, mennyiség. */}
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 14 }}>
        <div className="field" style={{ margin: 0, flex: '2 1 130px', minWidth: 0 }}>
          <label className="label">Egységár</label>
          <input className="input num" value={price} onChange={e => { setPrice(e.target.value); touch(); }}
            placeholder="0" inputMode="decimal" autoComplete="off"/>
        </div>
        <div className="field" style={{ margin: 0, flex: '1 1 90px', minWidth: 0 }}>
          <label className="label">Pénznem</label>
          <select className="select" value={currency} onChange={e => { setCurrency(e.target.value); touch(); }}>
            {['HUF', 'EUR', 'USD'].map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
        <div className="field" style={{ margin: 0, flex: '1 1 90px', minWidth: 0 }}>
          <label className="label">Mennyiség</label>
          <input className="input num" value={qty} onChange={e => { setQty(e.target.value); touch(); }}
            placeholder="1" inputMode="decimal" autoComplete="off"/>
        </div>
        <div className="field" style={{ margin: 0, flex: '1 1 90px', minWidth: 0 }}>
          <label className="label">Egység</label>
          <input className="input" value={unit} onChange={e => { setUnit(e.target.value); touch(); }}
            list="proc-units" placeholder="db" autoComplete="off"/>
          <datalist id="proc-units">
            {PROC_UNITS.map(u => <option key={u} value={u}/>)}
          </datalist>
        </div>
      </div>

      <div className="row between" style={{ marginTop: 10, padding: '10px 12px', borderRadius: 'var(--r-md)', background: 'var(--accent-l)', color: 'var(--accent-d)' }}>
        <span style={{ fontSize: 12, fontWeight: 600 }}>Összesen</span>
        <span className="num" style={{ fontSize: 15, fontWeight: 700 }}>{window.formatHuf(totalHuf)}</span>
      </div>
      {currency !== 'HUF' && (
        <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
          {`Árfolyam: 1 ${currency} = ${window.formatHuf(fx[currency] || 0)}`}
        </div>
      )}

      <div className="field" style={{ marginTop: 14 }}>
        <label className="label">Bolt / gyártó</label>
        <input className="input" value={vendor} onChange={e => { setVendor(e.target.value); touch(); }}
          placeholder="Pl. Praktiker" autoComplete="off"/>
      </div>

      <div className="field">
        <label className="label">Állapot</label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {window.PROC_STATUSES.map(s => {
            const c = window.PROC_STATUS_COLORS[s];
            const active = status === s;
            return (
              <button key={s} className="chip" onClick={() => { setStatus(s); touch(); }}
                style={{ background: active ? c : c + '22', color: active ? '#fff' : c, border: active ? '1px solid ' + c : 'none', cursor: 'pointer' }}>
                <span className="dot" style={{ background: active ? 'white' : c }}/> {window.procStatusLabel(s)}
              </button>
            );
          })}
        </div>
      </div>

      <div className="field">
        <label className="label">Megjegyzés</label>
        <textarea className="textarea" value={note} onChange={e => { setNote(e.target.value); touch(); }}
          placeholder="Pl. szállítási idő, alternatíva, döntés indoklása…" rows={2}/>
      </div>

      {!isNew && (
        <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
          <span>Rögzítette: </span>
          {`${(window.getUser(item.createdBy) || {}).name || '—'} · ${window.formatDate(item.createdAt)}`}
          {item.purchasedAt && <span>{` · megvásárolva ${window.formatDate(item.purchasedAt)}`}</span>}
          {item.installedAt && <span>{` · beépítve ${window.formatDate(item.installedAt)}`}</span>}
        </div>
      )}

      <div className="row" style={{ gap: 8, marginTop: 18 }}>
        <button className="btn full" onClick={onClose}>Mégse</button>
        {canEdit && (
          <button className="btn primary full" onClick={save} disabled={busy} style={{ opacity: busy ? 0.6 : 1 }}>
            <Icon name="check" size={16}/> {busy ? 'Mentés…' : 'Mentés'}
          </button>
        )}
      </div>
      {canDelete && (
        <button className="btn ghost full" onClick={remove} disabled={busy}
          style={{ marginTop: 8, color: 'var(--danger)' }}>
          <Icon name="trash" size={14}/> Tétel törlése
        </button>
      )}
    </Sheet>
  );
};

Object.assign(window, { Procurement, ProcurementSheet, ProcStatusPill });