// Per-asset document storage — drag-and-drop uploads + a saved document list.
// Stores file metadata in localStorage['homehub.docs.v1']. (Real file bytes move to
// cloud storage at go-time.)

const { FONT_DISPLAY: DOC_DISPLAY, FONT_BODY: DOC_BODY, FONT_MONO: DOC_MONO } = window.HIFI;

// ---------- Document store (per asset, persisted) ----------
window.Docs = (function () {
  const KEY = 'homehub.docs.v2';
  function load() { try { return JSON.parse(localStorage.getItem(KEY)); } catch (e) { return null; } }
  let map = load() || {};
  function save() { try { localStorage.setItem(KEY, JSON.stringify(map)); } catch (e) {} }
  return {
    forAsset: (id) => map[id] || [],
    count: (id) => (map[id] || []).length,
    add: (id, doc) => {
      map[id] = map[id] || [];
      map[id].push({ id: 'd' + Date.now().toString(36) + Math.random().toString(36).slice(2, 5), date: 'May 27, 2026', ...doc });
      save();
    },
    remove: (id, docId) => { map[id] = (map[id] || []).filter(d => d.id !== docId); save(); },
  };
})();

const DOC_TONE = (t, type) =>
  type === "Owner's manual" ? t.ok :
  type === 'Spec sheet'     ? t.soon :
  type === 'Warranty'       ? t.accentDeep :
  type === 'Install guide'  ? t.inkSoft : t.inkSoft;

// ---------- Documents card (asset detail) ----------
const DocRow = ({ t, assetId, d, nav }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 12px', border: `1px solid ${t.border}`, borderRadius: 10, background: t.card }}>
    <span style={{ width: 32, height: 32, borderRadius: 8, flex: '0 0 auto', background: t.inputBg, border: `1px solid ${t.border}`, color: DOC_TONE(t, d.type), display: 'flex', alignItems: 'center', justifyContent: 'center' }}><HIcon kind="file" size={16}/></span>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 13.5, color: t.ink, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.title}</div>
      <div style={{ fontSize: 11.5, color: t.inkSoft, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
        {d.type}{d.fileType ? ` · ${d.fileType}` : ''}{d.source ? ` · ${d.source}` : ''}
      </div>
    </div>
    <button title="Remove" onClick={() => { window.Docs.remove(assetId, d.id); nav.refresh(); }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: t.inkFaint, display: 'flex', padding: 4, flex: '0 0 auto' }}><HIcon kind="trash" size={15}/></button>
  </div>
);

const DocumentsCard = ({ t, assetId, nav }) => {
  const docs = window.Docs.forAsset(assetId);
  const [drag, setDrag] = React.useState(false);
  const inputRef = React.useRef(null);
  const onFiles = (files) => {
    [...files].forEach(f => window.Docs.add(assetId, { title: f.name, type: 'Upload', kind: 'upload', source: 'Uploaded', fileType: (f.name.split('.').pop() || 'file').toUpperCase() }));
    nav.refresh();
  };
  return (
    <Card t={t} pad={18}>
      <PanelHeader t={t} title={`Documents · ${docs.length}`}/>
      {docs.length > 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10, marginBottom: 14 }}>
          {docs.map(d => <DocRow key={d.id} t={t} assetId={assetId} d={d} nav={nav}/>)}
        </div>
      )}
      <div
        onClick={() => inputRef.current && inputRef.current.click()}
        onDragOver={e => { e.preventDefault(); setDrag(true); }}
        onDragLeave={() => setDrag(false)}
        onDrop={e => { e.preventDefault(); setDrag(false); if (e.dataTransfer.files) onFiles(e.dataTransfer.files); }}
        style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
          padding: '20px 16px', borderRadius: 12, cursor: 'pointer', textAlign: 'center',
          border: `1.5px dashed ${drag ? t.accent : t.border}`, background: drag ? t.okBg : t.inputBg,
          transition: 'background 0.12s ease, border-color 0.12s ease',
        }}>
        <HIcon kind="upload" size={20} style={{ color: drag ? t.accentDeep : t.inkSoft }}/>
        <div style={{ fontSize: 13, color: t.ink, fontWeight: 500 }}>Drag &amp; drop manuals, receipts, or photos</div>
        <div style={{ fontSize: 12, color: t.inkSoft }}>or click to browse · PDF, JPG, PNG</div>
        <input ref={inputRef} type="file" multiple style={{ display: 'none' }}
          onChange={e => { if (e.target.files) onFiles(e.target.files); e.target.value = ''; }}/>
      </div>
      {docs.length === 0 && (
        <div style={{ fontSize: 12.5, color: t.inkFaint, marginTop: 12, textAlign: 'center' }}>
          No documents yet — drop the manual, warranty, or a photo of the rating plate above.
        </div>
      )}
    </Card>
  );
};

Object.assign(window, { DocumentsCard });