/* HighProfile.jsx — Profile tab (high-risk). No gamification at all.
   Heavy on care team + clinical context. Persona family-context touch. */

const { DEMO_HIGH, CARE_TEAM } = window.MunaHighConfig;

const CONDITIONS = [
  { title: 'Type 2 diabetes', status: 'Identified today', tone: 'clay' },
  { title: 'Severe periodontitis', status: 'Identified today', tone: 'clay' },
  { title: 'High cardiovascular risk', status: 'Under assessment', tone: 'clay' },
];

function CareTeamRow({ c, onTap }) {
  return (
    <Card padding={0} onClick={onTap} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px' }}>
      <Avatar initials={c.initials} size={46} bg={c.bg}/>
      <div style={{ flex: 1 }}>
        <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{c.name}</div>
        <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{c.role} · {c.detail}</div>
      </div>
      <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
    </Card>
  );
}

function HighProfile({ onClinician, onTrackRx }) {
  const d = DEMO_HIGH;
  return (
    <div style={{ padding: '58px var(--gutter-screen) 0' }}>
      {/* Identity */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', marginBottom: 24 }}>
        <Avatar initials={d.initials} size={84} bg="var(--clay-500)"/>
        <div style={{ font: 'var(--type-h1)', color: 'var(--fg-1)', marginTop: 14 }}>{d.name} {d.last}</div>
        <div style={{ marginTop: 8 }}>
          <StatPill icon="shield" bg="var(--clay-50)" fg="var(--clay-700)">High risk · Care plan active</StatPill>
        </div>
      </div>

      {/* Care team */}
      <div className="overline" style={{ marginBottom: 10 }}>Your care team</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
        <CareTeamRow c={CARE_TEAM.physician} onTap={onClinician}/>
        <CareTeamRow c={CARE_TEAM.dentist} onTap={onClinician}/>
      </div>

      {/* Conditions */}
      <div className="overline" style={{ marginBottom: 10 }}>Your conditions</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
        {CONDITIONS.map(c => (
          <Card key={c.title} padding={16} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--clay-500)', flexShrink: 0 }}/>
            <div style={{ flex: 1 }}>
              <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>{c.title}</div>
              <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>{c.status}</div>
            </div>
          </Card>
        ))}
      </div>

      {/* Medications */}
      <div className="overline" style={{ marginBottom: 10 }}>Your medications</div>
      <Card padding={0} onClick={onTrackRx} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', marginBottom: 18 }}>
        <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="pill" size={20}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Metformin 500mg</div>
          <div style={{ font: 'var(--type-body-s)', color: 'var(--fg-3)', marginTop: 1 }}>Twice daily, with food</div>
        </div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>

      {/* Family context — persona touch */}
      <div className="overline" style={{ marginBottom: 10 }}>Family context</div>
      <Card padding={18} style={{ marginBottom: 18, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <div style={{ width: 40, height: 40, borderRadius: 'var(--radius-s)', background: 'var(--amber-50)', color: 'var(--amber-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="calendar" size={20}/></div>
        <p style={{ flex: 1, font: 'var(--type-body)', color: 'var(--fg-2)', textWrap: 'pretty' }}>
          You shared that your daughter’s wedding is in 6 months. We’re tracking that as a milestone for your care plan.
        </p>
      </Card>

      {/* Settings */}
      <Card padding={0} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px' }}>
        <div style={{ width: 38, height: 38, borderRadius: 'var(--radius-s)', background: 'var(--stone-100)', color: 'var(--fg-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="settings" size={20}/></div>
        <div style={{ flex: 1, font: 'var(--type-h3)', color: 'var(--fg-1)' }}>Settings & notifications</div>
        <Icon name="chevron-right" size={20} color="var(--fg-4)"/>
      </Card>
      <div style={{ height: 24 }}/>
    </div>
  );
}

window.MunaHighProfile = { HighProfile };