// Dental Records — fresh account state

function MedicalRecords() {
  const consults = useConsults();
  const records = useRecords();
  const { user } = useAuth();
  const fileRef = React.useRef(null);
  const consult = consults[0] || null;
  const uploadFile = (file) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      createRecord({
        name: file.name,
        type: file.type || 'application/octet-stream',
        size: file.size,
        patientName: user?.name || 'Patient',
        dataUrl: reader.result,
      });
    };
    reader.readAsDataURL(file);
  };

  return (
    <PortalShell active="records" title="Dental Records" subtitle="Your records will build from consultations you complete"
      action={<>
        <input ref={fileRef} type="file" accept="image/*,.pdf" style={{ display: 'none' }} onChange={(e) => uploadFile(e.target.files?.[0])}/>
        <button onClick={() => fileRef.current && fileRef.current.click()} className="ml-btn ml-btn--primary"><I.upload size={14}/> Upload</button>
      </>}>
      <div style={{ padding: '24px 32px', maxWidth: 1040 }}>
        <div className="ml-card" style={{ padding: 28, marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 54, height: 54, borderRadius: 14, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center' }}>
              <I.doc size={24}/>
            </div>
            <div>
              <h2 style={{ fontSize: 26, marginBottom: 4 }}>No past dental records yet.</h2>
              <p className="ml-muted" style={{ fontSize: 14, margin: 0 }}>
                Visit summaries, prescriptions, referrals and uploaded dental files will appear here after your first consultation.
              </p>
            </div>
          </div>
        </div>

        {records.length > 0 && (
          <div className="ml-card" style={{ padding: 24, marginBottom: 18 }}>
            <div className="ml-label" style={{ marginBottom: 14 }}>UPLOADED PATIENT RECORDS</div>
            <div style={{ display: 'grid', gap: 10 }}>
              {records.map((r) => (
                <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 12, alignItems: 'center', padding: 12, border: '1px solid var(--line)', borderRadius: 10 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--paper-2)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center' }}>
                    <I.doc size={18}/>
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{r.name}</div>
                    <div className="ml-muted" style={{ fontSize: 12 }}>{r.type || 'file'} · {Math.max(1, Math.round((r.size || 0) / 1024))} KB</div>
                  </div>
                  <a href={r.url || r.dataUrl} target="_blank" rel="noreferrer" className="ml-btn ml-btn--ghost" style={{ textDecoration: 'none', fontSize: 12 }}>Open</a>
                </div>
              ))}
            </div>
          </div>
        )}

        {consult && (
          <div className="ml-card" style={{ padding: 24 }}>
            <div className="ml-label" style={{ marginBottom: 14 }}>CURRENT INTAKE FOR UPCOMING CONSULT</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, fontSize: 13.5 }}>
              <RecordField label="Visit ID" value={consult.id} mono/>
              <RecordField label="Dentist" value={DOC_BY_ID(consult.docId).n}/>
              <RecordField label="Reason" value={consult.reason}/>
              <RecordField label="Pain level" value={`${consult.severity} / 10`}/>
              <RecordField label="Time" value={`${consult.date} · ${consult.time}`}/>
              <RecordField label="Patient note" value={consult.note || 'No extra note added'}/>
            </div>
          </div>
        )}
      </div>
    </PortalShell>
  );
}

function RecordField({ label, value, mono }) {
  return (
    <div>
      <div className="ml-label" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 14, color: 'var(--ink-2)', fontFamily: mono ? 'var(--mono)' : 'inherit' }}>{value}</div>
    </div>
  );
}

window.MedicalRecords = MedicalRecords;