// KLIK Admin — Manufacturer Parts Management Panel

const { useState, useEffect, useCallback } = React;

const ADMIN_PW_KEY = 'klik.admin.auth';
const ADMIN_PASSWORD = 'klik2026'; // Simple gate — change before production

// ── Helpers ──────────────────────────────────────────────────────────────────
function genId(type) {
  return `${type.toUpperCase()}-${Math.random().toString(36).slice(2,7).toUpperCase()}`;
}

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

// ── Login gate ──────────────────────────────────────────────────────────────
function LoginGate({ onAuth }) {
  const [pw, setPw] = useState('');
  const [err, setErr] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (pw === ADMIN_PASSWORD) { onAuth(); }
    else { setErr(true); setTimeout(() => setErr(false), 1200); }
  };
  return (
    <div className="adm-login-wrap">
      <div className="adm-login-box">
        <div className="adm-login-logo">
          <svg viewBox="0 0 32 32" width="28" height="28">
            <circle cx="16" cy="16" r="14" fill="none" stroke="#7fd4ff" strokeWidth="1.5"/>
            <rect x="14" y="2" width="4" height="10" fill="#7fd4ff"/>
            <rect x="14" y="20" width="4" height="10" fill="#7fd4ff"/>
            <circle cx="16" cy="16" r="3" fill="#7fd4ff"/>
          </svg>
          <span className="adm-login-brand">KLIK</span>
          <span className="adm-login-tag">MANUFACTURER PANEL</span>
        </div>
        <form onSubmit={submit} className="adm-login-form">
          <label className="adm-login-label">ACCESS CODE</label>
          <input
            type="password"
            value={pw}
            onChange={e => setPw(e.target.value)}
            className={"adm-login-input " + (err ? 'is-error' : '')}
            placeholder="Enter manufacturer code"
            autoFocus
          />
          {err && <div className="adm-login-err">Invalid code</div>}
          <button type="submit" className="adm-login-btn">UNLOCK PANEL →</button>
        </form>
        <div className="adm-login-hint">Demo code: <code>klik2026</code></div>
      </div>
    </div>
  );
}

// ── Part type constants ──────────────────────────────────────────────────────
const PART_TYPES = ['heads', 'tubes', 'mouthpieces'];
const PART_LABELS = { heads: 'Heads', tubes: 'Tubes', mouthpieces: 'Mouthpieces' };
const PART_COLORS = { heads: '#e8a878', tubes: '#7fd4ff', mouthpieces: '#e8c878' };

// ── Default field sets for new parts ────────────────────────────────────────
function defaultNewPart(type) {
  if (type === 'heads') return {
    id: genId('H'), label: 'HEAD / NEW', name: 'New Head',
    desc: 'Description here.', capacity: '0.25 g',
    price: 60, weight: 80, vbWidth: 260, vbHeight: 200,
  };
  if (type === 'tubes') return {
    id: genId('T'), label: 'TUBE / NEW', diameter: 16, lengthMm: 127,
    lengthIn: '5.0"', price: 28, weight: 42,
    vbWidth: 380, vbHeight: 200, drawDia: 36,
  };
  return {
    id: genId('M'), label: 'MTH / NEW', name: 'New Mouthpiece',
    desc: 'Description here.', price: 24, weight: 16,
    vbWidth: 130, vbHeight: 200,
  };
}

// ── Field renderer for inline editing ───────────────────────────────────────
function PartField({ label, value, onChange, type='text', small=false }) {
  return (
    <div className="adm-field">
      <div className="adm-field-label">{label}</div>
      <input
        type={type}
        value={value ?? ''}
        onChange={e => onChange(type==='number' ? (parseFloat(e.target.value)||0) : e.target.value)}
        className={"adm-field-input " + (small ? 'adm-field-input--sm' : '')}
      />
    </div>
  );
}

// ── Single part card (editable) ──────────────────────────────────────────────
function PartCard({ part, type, onSave, onDelete, isNew=false }) {
  const [draft, setDraft] = useState(() => deepClone(part));
  const [dirty, setDirty] = useState(isNew);
  const [expanded, setExpanded] = useState(isNew);
  const mats = window.MATERIALS;

  const set = (key, val) => {
    setDraft(d => ({ ...d, [key]: val }));
    setDirty(true);
  };

  const handleSave = () => { onSave(draft); setDirty(false); };
  const handleDiscard = () => { setDraft(deepClone(part)); setDirty(false); };

  const accentColor = PART_COLORS[type];

  // Preview SVG
  const PreviewSvg = () => {
    try {
      if (type === 'heads') return (
        <svg viewBox={`0 0 ${draft.vbWidth || 260} 200`} style={{width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid meet">
          <window.HeadGeo part={draft} material="brushed-copper"/>
        </svg>
      );
      if (type === 'tubes') return (
        <svg viewBox={`0 0 ${draft.vbWidth || 380} 200`} style={{width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid meet">
          <window.TubeGeo part={draft} material="brushed-steel"/>
        </svg>
      );
      return (
        <svg viewBox={`0 0 ${draft.vbWidth || 130} 200`} style={{width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid meet">
          <window.MouthpieceGeo part={draft} material="polished-steel"/>
        </svg>
      );
    } catch(e) { return <text fill="#7fd4ff" fontSize="10" x="10" y="100">Preview unavailable</text>; }
  };

  return (
    <div className={"adm-card " + (dirty?'adm-card--dirty':'') + (isNew?' adm-card--new':'')} style={{'--accent': accentColor}}>
      {/* Card header */}
      <div className="adm-card-head" onClick={() => setExpanded(e=>!e)}>
        <div className="adm-card-head-left">
          <div className="adm-card-id" style={{color:accentColor}}>{draft.id}</div>
          <div className="adm-card-name">{type==='tubes' ? `⌀${draft.diameter}mm × ${draft.lengthIn}` : draft.name}</div>
        </div>
        <div className="adm-card-head-right">
          {dirty && <span className="adm-dirty-badge">UNSAVED</span>}
          <span className="adm-card-price">${draft.price}</span>
          <span className="adm-card-chevron">{expanded ? '▲' : '▼'}</span>
        </div>
      </div>

      {expanded && (
        <div className="adm-card-body">
          {/* Preview */}
          <div className="adm-card-preview">
            <PreviewSvg/>
          </div>

          {/* Fields */}
          <div className="adm-card-fields">
            <PartField label="ID" value={draft.id} onChange={v=>set('id',v)} small/>
            <PartField label="Label" value={draft.label} onChange={v=>set('label',v)}/>
            {type !== 'tubes' && <PartField label="Name" value={draft.name} onChange={v=>set('name',v)}/>}
            {type !== 'tubes' && <PartField label="Description" value={draft.desc} onChange={v=>set('desc',v)}/>}
            {type === 'heads' && <PartField label="Capacity" value={draft.capacity} onChange={v=>set('capacity',v)} small/>}
            {type === 'tubes' && <PartField label="Diameter (mm)" value={draft.diameter} onChange={v=>set('diameter',v)} type="number" small/>}
            {type === 'tubes' && <PartField label="Length (mm)" value={draft.lengthMm} onChange={v=>set('lengthMm',v)} type="number" small/>}
            {type === 'tubes' && <PartField label='Length (in)' value={draft.lengthIn} onChange={v=>set('lengthIn',v)} small/>}
            {type === 'tubes' && <PartField label="Draw Dia" value={draft.drawDia} onChange={v=>set('drawDia',v)} type="number" small/>}
            <PartField label="Price ($)" value={draft.price} onChange={v=>set('price',v)} type="number" small/>
            <PartField label="Weight (g)" value={draft.weight} onChange={v=>set('weight',v)} type="number" small/>
            <PartField label="ViewBox Width" value={draft.vbWidth} onChange={v=>set('vbWidth',v)} type="number" small/>
          </div>

          {/* Actions */}
          <div className="adm-card-actions">
            {dirty && (
              <>
                <button className="adm-btn adm-btn--save" onClick={handleSave}>✓ Save Changes</button>
                {!isNew && <button className="adm-btn adm-btn--ghost" onClick={handleDiscard}>Discard</button>}
              </>
            )}
            <button className="adm-btn adm-btn--danger" onClick={() => onDelete(draft.id)}>✕ Remove Part</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ── Section (heads / tubes / mouthpieces) ───────────────────────────────────
function PartSection({ type, parts, onUpdate }) {
  const accentColor = PART_COLORS[type];

  const handleSave = (updated) => {
    onUpdate(type, parts.map(p => p.id === updated.id ? updated : p));
  };

  const handleDelete = (id) => {
    if (!confirm(`Remove part ${id}? This cannot be undone.`)) return;
    onUpdate(type, parts.filter(p => p.id !== id));
  };

  const handleAdd = () => {
    const newPart = defaultNewPart(type);
    onUpdate(type, [...parts, newPart]);
  };

  return (
    <section className="adm-section">
      <div className="adm-section-head">
        <div className="adm-section-title" style={{color:accentColor}}>
          {PART_LABELS[type]} <span className="adm-section-count">× {parts.length}</span>
        </div>
        <button className="adm-btn adm-btn--add" onClick={handleAdd} style={{'--accent':accentColor}}>
          + Add {PART_LABELS[type].slice(0,-1)}
        </button>
      </div>
      <div className="adm-cards">
        {parts.length === 0 && (
          <div className="adm-empty">No {PART_LABELS[type].toLowerCase()} — add one above.</div>
        )}
        {parts.map(p => (
          <PartCard
            key={p.id}
            part={p}
            type={type}
            onSave={handleSave}
            onDelete={handleDelete}
          />
        ))}
      </div>
    </section>
  );
}

// ── Stats bar ────────────────────────────────────────────────────────────────
function StatsBar({ catalog }) {
  const total = catalog.heads.length * catalog.tubes.length * catalog.mouthpieces.length;
  return (
    <div className="adm-stats">
      <div className="adm-stat-pill">
        <span className="adm-stat-n">{catalog.heads.length}</span>
        <span className="adm-stat-k">heads</span>
      </div>
      <span className="adm-stat-op">×</span>
      <div className="adm-stat-pill">
        <span className="adm-stat-n">{catalog.tubes.length}</span>
        <span className="adm-stat-k">tubes</span>
      </div>
      <span className="adm-stat-op">×</span>
      <div className="adm-stat-pill">
        <span className="adm-stat-n">{catalog.mouthpieces.length}</span>
        <span className="adm-stat-k">mouthpieces</span>
      </div>
      <span className="adm-stat-op">=</span>
      <div className="adm-stat-pill adm-stat-pill--result">
        <span className="adm-stat-n">{total}</span>
        <span className="adm-stat-k">combinations</span>
      </div>
    </div>
  );
}

// ── Admin panel root ─────────────────────────────────────────────────────────
function AdminPanel() {
  const [authed, setAuthed] = useState(() => {
    try { return localStorage.getItem(ADMIN_PW_KEY) === '1'; } catch(e) { return false; }
  });
  const [catalog, setCatalog] = useState(() => window.loadCatalog());
  const [saved, setSaved] = useState(false);

  const handleAuth = () => {
    try { localStorage.setItem(ADMIN_PW_KEY, '1'); } catch(e) {}
    setAuthed(true);
  };

  const handleLogout = () => {
    try { localStorage.removeItem(ADMIN_PW_KEY); } catch(e) {}
    setAuthed(false);
  };

  const updateSection = (type, parts) => {
    setCatalog(c => ({ ...c, [type]: parts }));
  };

  const handleSaveAll = () => {
    window.saveCatalog(catalog);
    window._setCatalog(catalog);
    setSaved(true);
    setTimeout(() => setSaved(false), 2400);
  };

  const handleReset = () => {
    if (!confirm('Reset catalog to factory defaults? All custom parts will be lost.')) return;
    const def = window.DEFAULT_CATALOG;
    setCatalog(deepClone(def));
    window.saveCatalog(def);
    window._setCatalog(deepClone(def));
    setSaved(true);
    setTimeout(() => setSaved(false), 2400);
  };

  if (!authed) return <LoginGate onAuth={handleAuth}/>;

  const combinCount = catalog.heads.length * catalog.tubes.length * catalog.mouthpieces.length;

  return (
    <div className="adm-wrap">
      {/* Top bar */}
      <header className="adm-top">
        <div className="adm-top-left">
          <a href="/" className="adm-back">← Storefront</a>
          <div className="adm-topbar-logo">
            <svg viewBox="0 0 32 32" width="18" height="18">
              <circle cx="16" cy="16" r="14" fill="none" stroke="#7fd4ff" strokeWidth="1.5"/>
              <rect x="14" y="2" width="4" height="10" fill="#7fd4ff"/>
              <rect x="14" y="20" width="4" height="10" fill="#7fd4ff"/>
              <circle cx="16" cy="16" r="3" fill="#7fd4ff"/>
            </svg>
            <span className="adm-topbar-brand">KLIK</span>
            <span className="adm-topbar-tag">MANUFACTURER PANEL</span>
          </div>
        </div>
        <div className="adm-top-right">
          <span className="adm-doc-meta">DOC.KLK-ADM · REV.06.2026</span>
          <button className="adm-btn adm-btn--ghost adm-logout" onClick={handleLogout}>Logout</button>
        </div>
      </header>

      {/* Main */}
      <main className="adm-main">
        {/* Page header */}
        <div className="adm-page-head">
          <div>
            <div className="adm-page-eyebrow">MANUFACTURER CONTROL</div>
            <h1 className="adm-page-title">Parts Catalog</h1>
            <p className="adm-page-sub">Add, edit or remove parts from the storefront. Changes publish immediately to the configurator when saved.</p>
          </div>
          <div className="adm-page-actions">
            <button className="adm-btn adm-btn--reset" onClick={handleReset}>↺ Factory Reset</button>
            <button className={"adm-btn adm-btn--publish " + (saved?'adm-btn--saved':'')} onClick={handleSaveAll}>
              {saved ? '✓ Published!' : '↑ Publish Changes'}
            </button>
          </div>
        </div>

        {/* Stats */}
        <StatsBar catalog={catalog}/>

        {/* Part sections */}
        {PART_TYPES.map(type => (
          <PartSection
            key={type}
            type={type}
            parts={catalog[type]}
            onUpdate={updateSection}
          />
        ))}

        {/* Footer */}
        <div className="adm-footer">
          <span className="adm-footer-note">Changes are saved to browser localStorage and sync to the storefront configurator. Export a JSON snapshot below to back up your catalog.</span>
          <button className="adm-btn adm-btn--ghost" onClick={() => {
            const json = JSON.stringify(catalog, null, 2);
            const blob = new Blob([json], {type:'application/json'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a'); a.href=url; a.download='klik-catalog.json'; a.click();
          }}>↓ Export JSON</button>
          <label className="adm-btn adm-btn--ghost" style={{cursor:'pointer'}}>
            ↑ Import JSON
            <input type="file" accept=".json" style={{display:'none'}} onChange={e => {
              const file = e.target.files[0]; if(!file) return;
              const reader = new FileReader();
              reader.onload = (ev) => {
                try {
                  const parsed = JSON.parse(ev.target.result);
                  if (parsed.heads && parsed.tubes && parsed.mouthpieces) {
                    setCatalog(parsed);
                  } else { alert('Invalid catalog JSON format.'); }
                } catch(err) { alert('Could not parse JSON.'); }
              };
              reader.readAsText(file);
              e.target.value = '';
            }}/>
          </label>
        </div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<AdminPanel/>);