// Suivi actionnable du dossier patient, connecté uniquement à des faits stockés.
// Cette couche produit remplace l'écran hérité sans modifier la référence figée.

const PATIENT_FOLLOW_UP_TAB_EVENT = 'vasco:patient-follow-up-tab';

function requestPatientTab(tab) {
  window.dispatchEvent(new CustomEvent(PATIENT_FOLLOW_UP_TAB_EVENT, { detail: { tab } }));
}

// Le composant hérité garde son onglet en état local. Cette enveloppe produit lui
// transmet les raccourcis du Suivi comme un changement d'onglet normal.
const PatientFollowUpDetailBase = PatientDetail;
PatientDetail = function PatientFollowUpDetail(props) {
  const [requestedTab, setRequestedTab] = React.useState(props.initialTab || 'resume');
  React.useEffect(() => { setRequestedTab(props.initialTab || 'resume'); }, [props.initialTab, props.patientId]);
  React.useEffect(() => {
    const onTabRequest = (event) => {
      if (['docs', 'agenda'].includes(event.detail?.tab)) setRequestedTab(event.detail.tab);
    };
    window.addEventListener(PATIENT_FOLLOW_UP_TAB_EVENT, onTabRequest);
    return () => window.removeEventListener(PATIENT_FOLLOW_UP_TAB_EVENT, onTabRequest);
  }, []);
  return <PatientFollowUpDetailBase {...props} initialTab={requestedTab} />;
};

function PatientFollowUpTabsStrip({ active, onChange }) {
  const { ChoiceChip, IconButton, InteractiveRow } = window.VascoUI;
  const [more, setMore] = React.useState(false);
  const inMore = active === 'stats';
  const stripRef = React.useRef(null);
  const [canScroll, setCanScroll] = React.useState(false);
  const measure = () => {
    const element = stripRef.current;
    if (element) setCanScroll(element.scrollWidth - element.clientWidth - element.scrollLeft > 4);
  };
  React.useLayoutEffect(measure, [active]);
  React.useEffect(() => {
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 5, background: P_PAPER,
      marginTop: 16, padding: '8px 16px', display: 'flex', alignItems: 'center', gap: 6,
    }}>
      <div style={{ flex: 1, minWidth: 0, position: 'relative' }}>
        <div ref={stripRef} onScroll={measure} className="vasco-scroll" style={{
          display: 'flex', gap: 6, overflowX: 'auto',
          background: 'rgba(10,10,10,0.04)', borderRadius: 16, padding: 3,
        }}>
          {TABS.map((item) => {
            const selected = item.id === active;
            return (
              <ChoiceChip key={item.id} onClick={() => onChange(item.id)} selected={selected}
                style={{
                  background: selected ? '#fff' : 'transparent', border: 'none', cursor: 'pointer',
                  padding: '8px 6px', borderRadius: 12, fontFamily: 'inherit', fontSize: 12,
                  fontWeight: selected ? 700 : 500, color: selected ? P_INK : P_SUB,
                  letterSpacing: '0.1px', whiteSpace: 'nowrap', flex: '1 1 auto',
                  minWidth: 'max-content', boxShadow: selected ? '0 1px 3px rgba(10,10,10,0.08)' : 'none',
                }}>
                {item.label}
              </ChoiceChip>
            );
          })}
        </div>
        {canScroll && <div aria-hidden="true" style={{
          position: 'absolute', top: 3, bottom: 3, right: 0, width: 28,
          borderRadius: '0 16px 16px 0', pointerEvents: 'none',
          background: `linear-gradient(to right, rgba(246,245,241,0), ${P_PAPER})`,
        }} />}
      </div>

      <div style={{ position: 'relative', flexShrink: 0 }}>
        <IconButton onClick={() => setMore((open) => !open)} label="Plus" expanded={more} size={34}
          style={{
            borderRadius: 12, background: inMore ? '#fff' : 'rgba(10,10,10,0.04)',
            border: 'none', cursor: 'pointer', boxShadow: inMore ? '0 1px 3px rgba(10,10,10,0.08)' : 'none',
          }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill={inMore ? PD_MED : P_SUB} aria-hidden="true">
            <circle cx="5" cy="12" r="1.7" /><circle cx="12" cy="12" r="1.7" /><circle cx="19" cy="12" r="1.7" />
          </svg>
        </IconButton>
        {more && <>
          <div onClick={() => setMore(false)} style={{ position: 'fixed', inset: 0, zIndex: 20 }} />
          <div style={{
            position: 'absolute', top: 'calc(100% + 6px)', right: 0, zIndex: 21,
            background: '#fff', borderRadius: 12, border: `1px solid ${P_HAIR2}`,
            boxShadow: '0 12px 32px rgba(10,10,10,0.12)', padding: 4, minWidth: 178,
          }}>
            <InteractiveRow onClick={() => { onChange('stats'); setMore(false); }} selected={inMore}
              style={{
                width: '100%', display: 'flex', alignItems: 'center', gap: 9,
                background: inMore ? PD_MED_TINT : 'none', border: 'none', borderRadius: 8,
                padding: '9px 10px', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
                fontSize: 13, fontWeight: 600, color: inMore ? PD_MED : P_INK,
              }}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"
                stroke={inMore ? PD_MED : P_SUB} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12l4 4L19 6" /><path d="M5 6h5" /><path d="M5 18h14" />
              </svg>
              Suivi
            </InteractiveRow>

            {/* Entrées ajoutées par les extensions connectées. Elles ouvrent une
                feuille et ne deviennent jamais l'onglet actif : le menu « Plus »
                reste une liste d'accès, pas une barre d'onglets bis. */}
            {(window.VASCO_PATIENT_MORE || []).map((entry) => (
              <InteractiveRow key={entry.id}
                onClick={() => { setMore(false); entry.onSelect(); }}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', gap: 9,
                  background: 'none', border: 'none', borderRadius: 8,
                  padding: '9px 10px', cursor: 'pointer', fontFamily: 'inherit',
                  textAlign: 'left', fontSize: 13, fontWeight: 600, color: P_INK,
                }}>
                {entry.icon ? entry.icon(P_SUB) : null}
                {entry.label}
              </InteractiveRow>
            ))}
          </div>
        </>}
      </div>
    </div>
  );
}

TabsStrip = PatientFollowUpTabsStrip;

function FollowUpArrow() {
  return (
    <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}

function FollowUpActionCard({ eyebrow, title, detail, tone = 'neutral', onClick, children }) {
  const palette = tone === 'attention'
    ? { background: '#fff9ea', border: '#ead8a6', color: '#70541c' }
    : { background: '#fff', border: P_HAIR2, color: P_SUB };
  const Tag = onClick ? 'button' : 'div';
  return (
    <Tag type={onClick ? 'button' : undefined} onClick={onClick} className={onClick ? 'press' : undefined}
      style={{
        width: '100%', minWidth: 0, padding: '14px', border: `1px solid ${palette.border}`,
        borderRadius: 17, background: palette.background, boxShadow: VT.shadowMd,
        display: 'flex', alignItems: 'center', gap: 12, color: P_INK,
        fontFamily: 'inherit', textAlign: 'left', cursor: onClick ? 'pointer' : 'default',
      }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="mono" style={{
          color: palette.color, fontSize: 9.5, fontWeight: 600, letterSpacing: '0.75px',
          textTransform: 'uppercase',
        }}>{eyebrow}</div>
        <div style={{
          marginTop: 5, color: P_INK, fontSize: 15, fontWeight: 650, lineHeight: 1.25,
          overflowWrap: 'anywhere',
        }}>{title}</div>
        {detail && <div style={{
          marginTop: 4, color: P_SUB, fontSize: 11, fontWeight: 500, lineHeight: 1.35,
          overflowWrap: 'anywhere',
        }}>{detail}</div>}
        {children}
      </div>
      {onClick && <span style={{ flexShrink: 0, color: palette.color }}><FollowUpArrow /></span>}
    </Tag>
  );
}

function FollowUpMetric({ label, value, detail, featured = false }) {
  return (
    <div style={{
      minWidth: 0, padding: '12px 10px', borderRadius: 15,
      border: `1px solid ${featured ? 'rgba(61,107,143,0.22)' : P_HAIR2}`,
      background: featured ? 'rgba(61,107,143,0.065)' : '#fff',
    }}>
      <div aria-live="polite" style={{
        color: featured ? PD_MED : P_INK, fontSize: 25, fontWeight: 700,
        lineHeight: 1, letterSpacing: '-0.7px',
      }}>{value}</div>
      <div style={{ marginTop: 7, color: P_INK, fontSize: 10.5, fontWeight: 600 }}>{label}</div>
      <div style={{ marginTop: 2, color: P_SUB, fontSize: 9.5, lineHeight: 1.25 }}>{detail}</div>
    </div>
  );
}

function PatientFollowUpLoading() {
  return (
    <div role="status" aria-live="polite" style={{ padding: '34px 24px', color: P_SUB, textAlign: 'center' }}>
      <div style={{ fontSize: 12.5, fontWeight: 600 }}>Chargement du suivi…</div>
      <div style={{ marginTop: 5, fontSize: 10.5 }}>Rendez-vous et documents du dossier</div>
    </div>
  );
}

function PatientStatisticsTab({ p, accent = PD_MED, runtime = null }) {
  const { Button, InteractiveRow } = window.VascoUI;
  const [stats, setStats] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [requestVersion, setRequestVersion] = React.useState(0);

  React.useEffect(() => {
    if (!runtime?.statistics) {
      setError('Suivi indisponible');
      return undefined;
    }
    let cancelled = false;
    setStats(null);
    setError(null);
    runtime.statistics(p.id)
      .then((view) => { if (!cancelled) setStats(view); })
      .catch((failure) => { if (!cancelled) setError(failure?.message || 'Suivi indisponible'); });
    return () => { cancelled = true; };
  }, [runtime, p.id, requestVersion]);

  const zone = stats?.timezone || 'Europe/Paris';
  const formatDate = (value, withTime = false) => {
    if (!value) return 'Aucune';
    return new Intl.DateTimeFormat('fr-FR', {
      day: 'numeric', month: 'short', year: 'numeric',
      ...(withTime ? { hour: '2-digit', minute: '2-digit' } : {}),
      timeZone: zone,
    }).format(new Date(value));
  };
  const next = stats?.next_appointment;
  const pending = Number(stats?.awaiting_validation_document_count || 0);
  const pendingLabel = pending === 1 ? '1 document à valider' : `${pending} documents à valider`;
  const nextDetail = next
    ? [formatDate(next.starts_at, true), next.location].filter(Boolean).join(' · ')
    : null;
  const latest = stats?.latest_document;
  const documentStatusLabels = {
    awaiting_validation: 'À valider', validated: 'Validé', draft: 'Brouillon',
    in_progress: 'En cours', archived: 'Archivé',
  };

  if (!stats && !error) return <PatientFollowUpLoading />;

  if (error) {
    return (
      <div style={{ padding: '20px 24px 26px' }}>
        <div role="alert" style={{
          padding: '16px', borderRadius: 17, border: '1px solid rgba(185,28,28,0.14)',
          background: 'rgba(185,28,28,0.05)', color: P_INK,
        }}>
          <div style={{ fontSize: 14, fontWeight: 650 }}>Impossible de charger le suivi</div>
          <div style={{ marginTop: 4, color: P_SUB, fontSize: 11.5, lineHeight: 1.4 }}>{error}</div>
          <Button variant="solid" size="small"
            onClick={() => setRequestVersion((value) => value + 1)}
            style={{ marginTop: 12, borderRadius: 11, fontSize: 11 }}>Réessayer</Button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '18px 24px 28px' }}>
      <section aria-labelledby="patient-follow-up-actions">
        <PCaption><span id="patient-follow-up-actions">À traiter</span></PCaption>
        <div style={{ display: 'grid', gap: 10, marginTop: 10 }}>
          {pending > 0 ? (
            <FollowUpActionCard eyebrow="Documents" title={pendingLabel}
              detail="Ouvrir la liste des documents" tone="attention"
              onClick={() => requestPatientTab('docs')} />
          ) : (
            <FollowUpActionCard eyebrow="Documents" title="Aucun document en attente"
              detail="Toutes les validations sont à jour" />
          )}

          {next ? (
            <FollowUpActionCard eyebrow="Prochain rendez-vous" title={next.reason}
              detail={nextDetail} onClick={() => requestPatientTab('agenda')}>
              {stats.upcoming_appointment_count > 1 && <div style={{
                marginTop: 7, color: accent, fontSize: 10.5, fontWeight: 600,
              }}>+ {stats.upcoming_appointment_count - 1} autre{stats.upcoming_appointment_count > 2 ? 's' : ''} à venir</div>}
            </FollowUpActionCard>
          ) : (
            <FollowUpActionCard eyebrow="Prochain rendez-vous" title="Aucun rendez-vous programmé"
              detail="Le dossier ne contient aucun rendez-vous à venir" />
          )}
        </div>
      </section>

      <section aria-labelledby="patient-follow-up-appointments" style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
          <PCaption><span id="patient-follow-up-appointments">Rendez-vous</span></PCaption>
          <span style={{ color: P_SUB, fontSize: 10.5 }}>12 derniers mois</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 8, marginTop: 10 }}>
          <FollowUpMetric label="Réalisés" value={stats.completed_appointments_last_12_months} detail="sur 12 mois" />
          <FollowUpMetric label="Annulés" value={stats.cancelled_appointments_last_12_months} detail="sur 12 mois" />
          <FollowUpMetric label="À venir" value={stats.upcoming_appointment_count} detail="programmés" featured />
        </div>
      </section>

      <section aria-labelledby="patient-follow-up-continuity" style={{ marginTop: 24 }}>
        <PCaption><span id="patient-follow-up-continuity">Continuité du suivi</span></PCaption>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', marginTop: 10, padding: '13px 14px',
          borderRadius: 17, border: `1px solid ${P_HAIR2}`, background: '#fff', boxShadow: VT.shadowMd,
        }}>
          <div style={{ minWidth: 0, paddingRight: 12 }}>
            <div style={{ color: P_SUB, fontSize: 10 }}>Dernière visite</div>
            <div style={{ marginTop: 5, color: P_INK, fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>
              {formatDate(stats.last_visit_at)}
            </div>
          </div>
          <div style={{ minWidth: 0, paddingLeft: 14, borderLeft: `1px solid ${P_HAIR}` }}>
            <div style={{ color: P_SUB, fontSize: 10 }}>Prochain suivi</div>
            <div style={{ marginTop: 5, color: next ? accent : P_SUB, fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>
              {next ? formatDate(next.starts_at) : 'Non programmé'}
            </div>
          </div>
        </div>
      </section>

      <section aria-labelledby="patient-follow-up-documents" style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
          <PCaption><span id="patient-follow-up-documents">Documents</span></PCaption>
          <span style={{ color: P_SUB, fontSize: 10.5 }}>
            {stats.document_count} au total
          </span>
        </div>
        {latest ? (
          <InteractiveRow onClick={() => requestPatientTab('docs')} style={{
            width: '100%', minWidth: 0, marginTop: 10, padding: '13px 14px', borderRadius: 17,
            border: `1px solid ${P_HAIR2}`, background: '#fff', boxShadow: VT.shadowMd,
            display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'inherit', textAlign: 'left', cursor: 'pointer',
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ color: P_SUB, fontSize: 10, fontWeight: 500 }}>Dernier document</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap' }}>
                <span className="mono" style={{ color: accent, fontSize: 9.5, fontWeight: 650 }}>
                  {latest.document_type || 'DOCUMENT'}
                </span>
                <span style={{ color: P_SUB, fontSize: 9.5 }}>
                  {documentStatusLabels[latest.status] || latest.status}
                </span>
              </div>
              <div style={{
                marginTop: 6, color: P_INK, fontSize: 13.5, fontWeight: 600,
                lineHeight: 1.3, overflowWrap: 'anywhere',
              }}>{latest.title}</div>
              <div style={{ marginTop: 4, color: P_SUB, fontSize: 10.5 }}>
                Ajouté le {formatDate(latest.created_at)}
              </div>
            </div>
            <span style={{ flexShrink: 0, color: P_SUB }}><FollowUpArrow /></span>
          </InteractiveRow>
        ) : (
          <div style={{
            marginTop: 10, padding: '15px', borderRadius: 17, border: `1px solid ${P_HAIR2}`,
            background: '#fff', color: P_SUB, fontSize: 11.5, textAlign: 'center',
          }}>Aucun document dans ce dossier</div>
        )}
      </section>
    </div>
  );
}

TabStats = PatientStatisticsTab;