/* ============================================================
   KODILA — Šifrant: Valute
   ============================================================ */

const CURRENCY_STATUS_LABEL = { active: 'Aktivna', inactive: 'Nedejavna' };

function currencyStatusRenderer(p) {
  const label = CURRENCY_STATUS_LABEL[p.value] || p.value;
  const cls = (window.STATUS_MAP[label] || 'default');
  const c = cls === 'default' ? '' : cls;
  return `<span class="badge ${c}"><span class="dot"></span>${label}</span>`;
}

const CURRENCY_COLS = [
  { field: 'id', headerName: 'ID', width: 70, cellClass: 'cell-mono', pinned: 'left' },
  { field: 'code', headerName: 'Oznaka', width: 110, cellClass: 'cell-mono cell-strong' },
  { field: 'name', headerName: 'Ime', flex: 2, minWidth: 200 },
  { field: 'symbol', headerName: 'Simbol', width: 100, valueFormatter: p => p.value || '—' },
  { field: 'status', headerName: 'Status', width: 130, cellRenderer: currencyStatusRenderer },
];

const EMPTY_CURRENCY = { id: null, code: '', name: '', symbol: '', status: 'active' };

const CURRENCY_ERROR_MESSAGES = {
  code: {
    required: 'Oznaka valute je obvezna.',
    invalid: 'Oznaka mora biti sestavljena iz 3 črk (ISO 4217, npr. EUR).',
    taken: 'Ta oznaka valute že obstaja.',
  },
  name: { required: 'Ime valute je obvezno.' },
};

function ValutaForm({ initial, onSave, onClose }) {
  const isEdit = !!(initial && initial.id);
  const [f, setF] = useState(initial && initial.id
    ? { ...EMPTY_CURRENCY, ...initial, symbol: initial.symbol || '' }
    : { ...EMPTY_CURRENCY });
  const [errors, setErrors] = useState({});
  const [saving, setSaving] = useState(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));

  const save = async () => {
    setSaving(true);
    const payload = {
      code: f.code.trim().toUpperCase(),
      name: f.name.trim(),
      symbol: f.symbol.trim() || null,
      status: f.status,
    };
    const ok = await onSave(f.id, payload, isEdit, setErrors);
    setSaving(false);
    if (ok) onClose();
  };

  const fieldError = (field) => {
    const codes = errors[field];
    if (!codes || !codes.length) return null;
    const map = CURRENCY_ERROR_MESSAGES[field] || {};
    return codes.map(c => map[c] || c).join(' ');
  };

  return (
    <div className="overlay" onMouseDown={(e) => { if (e.target.classList.contains('overlay')) onClose(); }}>
      <div className="drawer" onMouseDown={e => e.stopPropagation()}>
        <div className="drawer-head">
          <div className="app-ico" style={tintStyle('brand')} dangerouslySetInnerHTML={{ __html: I('euro', 20) }} />
          <div className="grow">
            <div className="drawer-title">{isEdit ? 'Uredi valuto' : 'Nova valuta'}</div>
            <div className="muted" style={{ fontSize: 12.5 }}>{isEdit ? f.name : 'Šifrant valut'}</div>
          </div>
          <button className="btn btn-icon btn-ghost" onClick={onClose} dangerouslySetInnerHTML={{ __html: I('x', 18) }} />
        </div>

        <div className="drawer-body">
          <div className="form-grid">
            <div className="form-sec-title"><span dangerouslySetInnerHTML={{ __html: I('tag', 14) }} /> Osnovni podatki</div>

            <div className="field">
              <label>Oznaka (ISO 4217) <span className="req">*</span></label>
              <input className="input mono" value={f.code} maxLength={3}
                onChange={e => set('code', e.target.value.toUpperCase())}
                placeholder="EUR"
                style={fieldError('code') ? { borderColor: 'var(--danger)' } : null} />
              {fieldError('code') && <span style={{ color: 'var(--danger)', fontSize: 12 }}>{fieldError('code')}</span>}
            </div>
            <div className="field">
              <label>Simbol</label>
              <input className="input" value={f.symbol} onChange={e => set('symbol', e.target.value)} placeholder="€" />
            </div>

            <div className="field col-2">
              <label>Ime <span className="req">*</span></label>
              <input className="input" value={f.name} onChange={e => set('name', e.target.value)}
                placeholder="npr. Evro"
                style={fieldError('name') ? { borderColor: 'var(--danger)' } : null} />
              {fieldError('name') && <span style={{ color: 'var(--danger)', fontSize: 12 }}>{fieldError('name')}</span>}
            </div>

            <div className="form-sec-title"><span dangerouslySetInnerHTML={{ __html: I('settings', 14) }} /> Status</div>
            <div className="field col-2">
              <select className="select" value={f.status} onChange={e => set('status', e.target.value)}>
                <option value="active">Aktivna</option>
                <option value="inactive">Nedejavna</option>
              </select>
            </div>
          </div>
        </div>

        <div className="drawer-foot">
          <span className="muted grow" style={{ fontSize: 12.5 }}>
            <span className="req">*</span> obvezna polja
          </span>
          <button className="btn" onClick={onClose}>Prekliči</button>
          <button className="btn btn-primary" onClick={save} disabled={saving}>
            <span dangerouslySetInnerHTML={{ __html: I('save', 16) }} /> {isEdit ? 'Shrani' : 'Dodaj valuto'}
          </button>
        </div>
      </div>
    </div>
  );
}

function Valute({ currentUser }) {
  const isAdmin = !!(currentUser && currentUser.role === 'administrator');
  const toast = useToast();
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [editing, setEditing] = useState(null);

  const load = async () => {
    setLoading(true);
    setError('');
    const { ok, data } = await api('/api/currencies');
    if (ok) {
      setRows(data.currencies);
    } else {
      setError('Šifranta valut ni bilo mogoče naložiti.');
    }
    setLoading(false);
  };

  useEffect(() => { load(); }, []);

  const save = async (id, payload, isEdit, setErrors) => {
    const { ok, data } = isEdit
      ? await api(`/api/currencies/${id}`, { method: 'PUT', body: JSON.stringify(payload) })
      : await api('/api/currencies', { method: 'POST', body: JSON.stringify(payload) });

    if (!ok) {
      setErrors(data.errors || {});
      return false;
    }

    setRows(rs => isEdit ? rs.map(r => r.id === data.currency.id ? data.currency : r) : [data.currency, ...rs]);
    toast(isEdit ? 'Valuta posodobljena' : 'Valuta dodana: ' + data.currency.code, 'check');
    return true;
  };

  return (
    <div>
      {error && <div className="badge dng" style={{ marginBottom: 12 }}>{error}</div>}

      <DataGrid
        columnDefs={CURRENCY_COLS}
        rowData={rows}
        getRowId={(d) => d.id}
        selectable
        exportName="kodila-valute"
        exportTitle="Šifrant valut"
        searchPlaceholder="Išči po oznaki, imenu…"
        onRowOpen={isAdmin ? (d) => setEditing(d) : undefined}
        actions={isAdmin ? (
          <button className="btn btn-primary btn-sm" onClick={() => setEditing({})} disabled={loading}>
            <span dangerouslySetInnerHTML={{ __html: I('plus', 15) }} /> Nova valuta
          </button>
        ) : null}
      />

      {isAdmin && editing !== null && (
        <ValutaForm
          initial={editing}
          onSave={save}
          onClose={() => setEditing(null)}
        />
      )}
    </div>
  );
}
Object.assign(window, { Valute });