// Asset detail screens for each type + Profile + supporting components
const { useState: useStateA } = React;

function AssetDetail({ asset, isRead, onBack, onToggleRead, formData, onSaveForm }) {
  const TypeIcon = TYPE_ICONS[asset.type];
  const cat = WITNESS_DATA.CATEGORIES.find(c => c.id === asset.category)?.label;

  const sideMeta = (
    <div className="side-card">
      <h4>Details</h4>
      <div className="row"><span className="k">Type</span><span>{WITNESS_DATA.ASSET_TYPES[asset.type].label}</span></div>
      <div className="row"><span className="k">Category</span><span>{cat}</span></div>
      <div className="row"><span className="k">Updated</span><span>{new Date(asset.updated).toLocaleDateString("en-GB", {day: "numeric", month: "short", year: "numeric"})}</span></div>
      {asset.requiredBy && <div className="row"><span className="k">Due by</span><span>{new Date(asset.requiredBy).toLocaleDateString("en-GB", {day: "numeric", month: "short", year: "numeric"})}</span></div>}
      {asset.pages && <div className="row"><span className="k">Pages</span><span>{asset.pages}</span></div>}
      {asset.duration && <div className="row"><span className="k">Duration</span><span>{asset.duration}</span></div>}
      {asset.fileSize && <div className="row"><span className="k">File size</span><span>{asset.fileSize}</span></div>}
      {asset.fileExt && <div className="row"><span className="k">Format</span><span>{asset.fileExt}</span></div>}
      {asset.url && <div className="row"><span className="k">URL</span><span style={{fontFamily: 'var(--font-mono)', fontSize: 11}}>{asset.url}</span></div>}
      <div className="row"><span className="k">Status</span><span>{isRead ? "Completed" : asset.required ? "Required" : "Optional"}</span></div>
    </div>
  );

  return (
    <div className="detail-shell">
      <div className="crumb">
        <button onClick={onBack}>← Library</button>
        <span>/</span>
        <span>{cat}</span>
        <span>/</span>
        <span style={{color: 'var(--ink)'}}>{asset.title}</span>
      </div>

      <div className="detail-grid">
        <div className="detail-main">
          <div className="head">
            <h1>{asset.title}</h1>
            <div className="meta">
              <span><TypeIcon width="11" height="11" style={{verticalAlign: '-1px'}}/> {WITNESS_DATA.ASSET_TYPES[asset.type].label}</span>
              <span>·</span>
              <span>{cat}</span>
              <span>·</span>
              <span>Updated {new Date(asset.updated).toLocaleDateString("en-GB", {day: "numeric", month: "short"})}</span>
              {asset.required && !isRead && (<><span>·</span><span style={{color: 'var(--ink)'}}>Required</span></>)}
            </div>
          </div>
          <div className="body">
            {asset.body === "pdf" && <PDFView/>}
            {asset.body === "video" && <VideoView duration={asset.duration}/>}
            {asset.body === "form" && <FormView assetId={asset.id} initial={formData} onSave={onSaveForm}/>}
            {asset.body === "download" && <DownloadView asset={asset}/>}
            {asset.body === "link" && <LinkView asset={asset}/>}
            {asset.body === "ack" && <AckView asset={asset} isRead={isRead} onConfirm={() => onToggleRead(true)}/>}
          </div>
        </div>

        <div className="detail-side">
          {sideMeta}
          <div className="side-card">
            <h4>Actions</h4>
            <div className="actions">
              {asset.body === "pdf" && (
                <>
                  <button className="primary"><I.Download style={{marginRight: 6}}/> Download PDF</button>
                  <button className="ghost" onClick={() => onToggleRead()}>
                    {isRead ? <><I.CircleCheck/> Marked as read</> : <><I.Circle/> Mark as read</>}
                  </button>
                </>
              )}
              {asset.body === "download" && (
                <>
                  <button className="primary"><I.Download style={{marginRight: 6}}/> Download {asset.fileExt}</button>
                  <button className="ghost" onClick={() => onToggleRead()}>
                    {isRead ? <><I.CircleCheck/> Marked as read</> : <><I.Circle/> Mark as read</>}
                  </button>
                </>
              )}
              {asset.body === "video" && (
                <button className="ghost" onClick={() => onToggleRead()}>
                  {isRead ? <><I.CircleCheck/> Completed</> : <><I.Circle/> Mark as watched</>}
                </button>
              )}
              {asset.body === "link" && (
                <>
                  <button className="primary">Open in new tab <I.Arrow style={{marginLeft: 6}}/></button>
                  <button className="ghost" onClick={() => onToggleRead()}>
                    {isRead ? <><I.CircleCheck/> Visited</> : <><I.Circle/> Mark as visited</>}
                  </button>
                </>
              )}
            </div>
          </div>

          <div className="side-card">
            <h4>Need help?</h4>
            <p style={{margin: 0, fontSize: 12, color: 'var(--ink-3)'}}>
              Contact your line manager or HR for clarification on this item.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

function PDFView() {
  return (
    <div className="pdf-viewer">
      <div className="pdf-page">
        <div className="lh title"/>
        <div className="lh"/>
        <div className="lh med"/>
        <div className="lh"/>
        <div className="lh short"/>
        <div style={{height: 12}}/>
        <div className="lh"/>
        <div className="lh med"/>
        <div className="lh"/>
        <div className="lh short"/>
        <div style={{height: 12}}/>
        <div className="lh med"/>
        <div className="lh"/>
        <div style={{marginTop: 'auto', textAlign: 'right'}} className="muted">Page 1 / 14</div>
      </div>
    </div>
  );
}

function VideoView({ duration }) {
  return (
    <div className="video-viewer">
      <div className="play"><I.Play width="20" height="20"/></div>
      <div className="scrub"><span/></div>
      <div style={{position: 'absolute', bottom: 28, left: 16}}>
        00:04:21 / {duration}
      </div>
    </div>
  );
}

function DownloadView({ asset }) {
  return (
    <div style={{textAlign: 'center', padding: '40px 20px'}}>
      <div style={{
        width: 96, height: 120,
        margin: '0 auto 20px',
        border: '1px solid var(--line)',
        background: 'var(--surface)',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        <I.Doc width="36" height="36" style={{opacity: 0.5}}/>
        <div style={{
          position: 'absolute', bottom: 12,
          fontFamily: 'var(--font-mono)', fontSize: 11,
          textTransform: 'uppercase', letterSpacing: '0.06em',
          color: 'var(--ink-3)',
        }}>{asset.fileExt}</div>
      </div>
      <div style={{fontWeight: 600, marginBottom: 4}}>{asset.title}</div>
      <div className="muted" style={{marginBottom: 24}}>{asset.fileExt} · {asset.fileSize}</div>
      <button className="primary"><I.Download style={{marginRight: 6}}/> Download file</button>
    </div>
  );
}

function LinkView({ asset }) {
  return (
    <div style={{textAlign: 'center', padding: '40px 20px'}}>
      <div style={{
        width: 88, height: 88,
        margin: '0 auto 20px',
        border: '1px solid var(--line)',
        borderRadius: '50%',
        display: 'grid', placeItems: 'center',
      }}>
        <I.Link width="32" height="32" style={{opacity: 0.5}}/>
      </div>
      <div style={{fontWeight: 600, marginBottom: 4}}>External resource</div>
      <div className="muted" style={{marginBottom: 6}}>You'll be redirected to:</div>
      <div style={{fontFamily: 'var(--font-mono)', fontSize: 13, marginBottom: 24}}>{asset.url}</div>
      <button className="primary">Open external link <I.Arrow style={{marginLeft: 6}}/></button>
    </div>
  );
}

function AckView({ asset, isRead, onConfirm }) {
  return (
    <div>
      <div style={{
        border: '1px solid var(--line)',
        background: 'var(--surface-2)',
        padding: 24,
        marginBottom: 20,
        maxHeight: 360,
        overflow: 'auto',
      }}>
        <h3 style={{margin: '0 0 12px'}}>{asset.title}</h3>
        <p style={{margin: '0 0 12px', color: 'var(--ink-2)'}}>
          By acknowledging this document you confirm that you have read, understood and
          agree to abide by the terms set out herein. This declaration is recorded against
          your staff account with a timestamp and is auditable.
        </p>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '100%'}}/>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '92%'}}/>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '70%'}}/>
        <div style={{height: 12}}/>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '88%'}}/>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '95%'}}/>
        <div className="lh" style={{height: 8, background: 'var(--line-2)', marginBottom: 8, width: '60%'}}/>
        <p className="muted" style={{marginTop: 16}}>… {asset.pages} pages of full document available above ↑</p>
      </div>

      <div style={{
        border: isRead ? '1px solid var(--ink)' : '1px dashed var(--ink-3)',
        background: isRead ? 'var(--surface-2)' : 'var(--surface)',
        padding: 16,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div className={`checkbox ${isRead ? 'checked' : ''}`} onClick={onConfirm} style={{width: 20, height: 20, cursor: 'pointer'}}>
          {isRead && <I.Check width="14" height="14"/>}
        </div>
        <div style={{flex: 1}}>
          <div style={{fontWeight: 500}}>I have read and understood this document.</div>
          <div className="muted" style={{marginTop: 4}}>
            {isRead ? `Confirmed by Alex Morgan · ${new Date().toLocaleDateString("en-GB")}` : "Tap the checkbox to confirm"}
          </div>
        </div>
      </div>
    </div>
  );
}

function FormView({ assetId, initial, onSave }) {
  const tpl = WITNESS_DATA.FORM_TEMPLATES[assetId];
  const [data, setData] = useStateA(initial || {});
  const [submitted, setSubmitted] = useStateA(initial?._submitted || false);

  if (!tpl) return <div className="muted">Form unavailable.</div>;

  const set = (qid, val) => setData(d => ({...d, [qid]: val}));
  const toggleMulti = (qid, opt) => {
    const cur = data[qid] || [];
    set(qid, cur.includes(opt) ? cur.filter(x => x !== opt) : [...cur, opt]);
  };

  const saveDraft = () => onSave({...data, _draft: true});
  const submit = () => {
    setSubmitted(true);
    onSave({...data, _submitted: true});
  };

  const answeredCount = tpl.questions.filter(q => {
    const v = data[q.id];
    if (q.type === "multi") return Array.isArray(v) && v.length > 0;
    if (q.type === "text") return typeof v === "string" && v.trim().length > 0;
    return v !== undefined && v !== "";
  }).length;

  if (submitted) {
    return (
      <div style={{textAlign: 'center', padding: '40px 20px'}}>
        <div style={{
          width: 64, height: 64,
          margin: '0 auto 16px',
          border: '2px solid var(--ink)',
          borderRadius: '50%',
          display: 'grid', placeItems: 'center',
        }}>
          <I.Check width="28" height="28"/>
        </div>
        <h2 style={{margin: '0 0 4px'}}>Form submitted</h2>
        <p className="muted">Your responses have been saved &amp; recorded against your account.</p>
        <div style={{marginTop: 24}}>
          <button className="ghost" onClick={() => setSubmitted(false)}>View / edit responses</button>
        </div>
      </div>
    );
  }

  return (
    <div className="form-block">
      <div className="spread" style={{marginBottom: 4}}>
        <span className="muted">{answeredCount} of {tpl.questions.length} answered</span>
        <div className="progress-bar" style={{width: 160}}>
          <span style={{width: `${(answeredCount / tpl.questions.length) * 100}%`}}/>
        </div>
      </div>

      {tpl.questions.map((q, idx) => (
        <div key={q.id} className="question">
          <div className="qsub">Question {idx + 1} of {tpl.questions.length}</div>
          <div className="qtext">{q.q}</div>

          {q.type === "yesno" && (
            <div style={{display: 'flex', gap: 8}}>
              {["Yes", "No"].map(opt => (
                <div
                  key={opt}
                  className={`choice ${data[q.id] === opt ? "selected" : ""}`}
                  onClick={() => set(q.id, opt)}
                  style={{flex: 1, marginBottom: 0}}
                >
                  <div className="radio"/>
                  <span>{opt}</span>
                </div>
              ))}
            </div>
          )}

          {q.type === "single" && (
            <div>
              {q.options.map(opt => (
                <div
                  key={opt}
                  className={`choice ${data[q.id] === opt ? "selected" : ""}`}
                  onClick={() => set(q.id, opt)}
                >
                  <div className="radio"/>
                  <span>{opt}</span>
                </div>
              ))}
            </div>
          )}

          {q.type === "multi" && (
            <div>
              {q.options.map(opt => {
                const checked = (data[q.id] || []).includes(opt);
                return (
                  <div
                    key={opt}
                    className={`choice ${checked ? "selected" : ""}`}
                    onClick={() => toggleMulti(q.id, opt)}
                  >
                    <div className={`checkbox ${checked ? 'checked' : ''}`}>
                      {checked && <I.Check width="10" height="10"/>}
                    </div>
                    <span>{opt}</span>
                  </div>
                );
              })}
            </div>
          )}

          {q.type === "text" && (
            <textarea
              rows={3}
              value={data[q.id] || ""}
              onChange={e => set(q.id, e.target.value)}
              placeholder={q.placeholder}
            />
          )}
        </div>
      ))}

      <div className="cta-row" style={{justifyContent: 'flex-end', marginTop: 8}}>
        <button className="ghost" onClick={saveDraft}>Save draft</button>
        <button className="primary" onClick={submit} disabled={answeredCount < tpl.questions.length}>
          Submit form
        </button>
      </div>
    </div>
  );
}

window.AssetDetail = AssetDetail;