// Catalogue visuel des primitives officielles.
// Accessible en développement avec ?ui-kit=1, sans session ni données métier.

// L’encre du « rien à faire ici » : le hachuré des heures révolues et le fond
// des journées de congé partagent la même teinte neutre, à la même densité.
const UI_KIT_ABSENT_TINT = 'rgba(10,10,10,0.06)';
const UI_KIT_ABSENT_HATCH = 'repeating-linear-gradient(135deg, rgba(10,10,10,0.05) 0 5px, rgba(10,10,10,0) 5px 11px)';

function VascoUiKitSection({ title, children }) {
  const tokens = window.VascoUI.tokens;
  return <section style={{ marginBottom: 24 }}>
    <div className="mono" style={{ ...tokens.type.caption, color: tokens.color.secondary,
      textTransform: 'uppercase', marginBottom: 10 }}>{title}</div>
    {children}
  </section>;
}

function VascoUiKitIcon({ kind }) {
  const paths = {
    profile: <><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a8 8 0 0 1 16 0v1"/></>,
    bell: <><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>,
    trash: <path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6"/>,
  };
  return paths[kind] || paths.profile;
}

// Contexte manquant du catalogue : un panneau qui se ferme sur un appui né
// hors de sa boîte, comme la cloche « Rappels » de la référence gelée. Ce n'est
// pas une primitive concurrente, c'est le décor qui permet de démontrer qu'une
// feuille du socle ne laisse pas fuir ses appuis jusqu'à `document`. Sans cette
// retenue, le premier jour touché dans le calendrier fermait ce panneau et
// emportait la feuille avec lui.
function VascoUiKitOutsidePanel({ children }) {
  const { tokens, Button } = window.VascoUI;
  const [open, setOpen] = React.useState(false);
  const boxRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return undefined;
    const closeOutside = (event) => {
      if (!boxRef.current?.contains(event.target)) setOpen(false);
    };
    document.addEventListener('mousedown', closeOutside);
    return () => document.removeEventListener('mousedown', closeOutside);
  }, [open]);

  return <div ref={boxRef}>
    <Button id="ui-kit-panel-trigger" grow aria-expanded={open}
      onClick={() => setOpen((current) => !current)}>
      {open ? 'Fermer le panneau' : 'Ouvrir le panneau'}
    </Button>
    {open && <div id="ui-kit-panel" style={{ marginTop: 8, padding: 12,
      background: tokens.color.surface, border: `1px solid ${tokens.color.border}`,
      borderRadius: tokens.radius.lg }}>{children}</div>}
  </div>;
}

// Deux populations de démonstration, sans donnée réelle : le catalogue montre
// ce que l'onglet change, le filtrage vrai reste au serveur.
const UI_KIT_SCOPED_PATIENTS = {
  living: [
    ['kit-p1', 'MARTIN Jean', 'IPP VASCO-000001 · 62 ans'],
    ['kit-p2', 'PETIT Aline', 'IPP VASCO-000002 · 54 ans'],
  ],
  deceased: [
    ['kit-p3', 'THOMAS Gabriel', 'IPP VASCO-000006 · décédé'],
  ],
};

function VascoUiKitScreen() {
  const { tokens, Button, IconButton, InlineAction, ChoiceChip, InteractiveRow, StatusNotice,
    SettingGroup, SettingRow, Toggle,
    FormSheet, BottomSheet, DetailSheet, ConfirmDialog,
    Field, TextField, SimpleSelect, SearchSelect, CreatableSelect, DayPicker,
    ScreenHeader, icons } = window.VascoUI;
  const [notifications, setNotifications] = React.useState(true);
  const [displayName, setDisplayName] = React.useState('Dr. Camille Martin');
  const [multiline, setMultiline] = React.useState('');
  const [days, setDays] = React.useState('3');
  const [invalidText, setInvalidText] = React.useState('Valeur refusée');
  const [role, setRole] = React.useState('doctor');
  const [practitioner, setPractitioner] = React.useState('martin');
  // La recherche à onglets : deux populations distinctes, une seule primitive.
  // Le catalogue joue le filtrage que le serveur fait en vrai.
  const [scope, setScope] = React.useState('living');
  const [scopedPatient, setScopedPatient] = React.useState(null);
  const [category, setCategory] = React.useState('cro');
  // Les dates du catalogue sont fixes : une démonstration ne doit pas changer
  // de rendu selon le jour où on la regarde.
  const [controlDay, setControlDay] = React.useState('2026-09-24');
  const [compactDay, setCompactDay] = React.useState('2026-09-24');
  const [leave, setLeave] = React.useState({ start: '2026-09-10', end: '2026-09-13' });
  const [due, setDue] = React.useState('2026-09-24T18:00');
  const [panelDue, setPanelDue] = React.useState('2026-09-24T18:00');
  const [categories, setCategories] = React.useState([
    ['cro', 'Compte rendu opératoire'], ['staff', 'Compte rendu de staff'],
    ['biology', 'Biologie'],
  ]);
  const [sheetOpen, setSheetOpen] = React.useState(false);
  const [bottomSheetOpen, setBottomSheetOpen] = React.useState(false);
  const [detailOpen, setDetailOpen] = React.useState(false);
  const [sideDetailOpen, setSideDetailOpen] = React.useState(false);
  const [confirmOpen, setConfirmOpen] = React.useState(false);
  const swatches = [
    ['Accent', tokens.color.accent], ['Succès', tokens.color.success],
    ['Attention', tokens.color.warning], ['Danger', tokens.color.danger],
  ];

  return <main aria-label="UI Kit Vasco" style={{ position: 'absolute', inset: 0,
    background: tokens.color.canvas, color: tokens.color.ink,
    fontFamily: tokens.type.body, display: 'flex', flexDirection: 'column' }}>
    <ScreenHeader title="UI Kit Vasco" right={<span className="mono" style={{
      padding: '5px 8px', borderRadius: tokens.radius.pill,
      background: tokens.color.accentTint, color: tokens.color.accent,
      fontSize: 9.5, fontWeight: 600, letterSpacing: '.4px',
    }}>RÉFÉRENCE</span>} />
    <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', padding: '8px 16px 40px' }}>
      <p style={{ margin: '0 0 24px', color: tokens.color.secondary,
        fontSize: 13, fontWeight: 500, lineHeight: 1.45 }}>
        Les écrans Vasco réutilisent ces composants et leurs états. Une variation métier compose ces primitives ; elle ne les redessine pas.
      </p>

      <VascoUiKitSection title="Couleurs sémantiques">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {swatches.map(([label, color]) => <div key={label} style={{
            background: tokens.color.surface, border: `1px solid ${tokens.color.border}`,
            borderRadius: tokens.radius.md, padding: 10, display: 'flex', alignItems: 'center', gap: 9,
          }}><span style={{ width: 24, height: 24, borderRadius: 8, background: color }} />
            <span style={{ fontSize: 12, fontWeight: 600 }}>{label}</span></div>)}
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="États de disponibilité">
        <div style={{ display: 'grid', gap: 8 }}>
          <StatusNotice tone="warning" title="Assistant indisponible"
            message="Le contrôle concerné reste désactivé et sa raison est visible." />
          <StatusNotice tone="info" compact title="Mode simulation"
            message="Données synthétiques uniquement." />
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="Boutons">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <Button variant="solid" grow>Principal</Button>
          <Button grow>Secondaire</Button>
          <Button variant="accent" grow>Accent plein</Button>
          <Button variant="accent-soft" grow>Accent doux</Button>
          <Button variant="success-soft" grow>Succès doux</Button>
          <Button variant="neutral-soft" grow>Neutre doux</Button>
          <Button variant="danger" grow>Destructif</Button>
          <Button disabled grow>Désactivé</Button>
          <Button busy variant="solid" grow>Chargement</Button>
          <div style={{ display: 'flex', gap: 8 }}>
            <IconButton label="Retour"><icons.Chevron direction="left" /></IconButton>
            <IconButton label="Fermer" variant="ghost"><icons.Close /></IconButton>
          </div>
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="Actions et choix">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <InlineAction>Modifier</InlineAction>
          <InlineAction danger>Supprimer</InlineAction>
          <ChoiceChip selected>Actifs</ChoiceChip>
          <ChoiceChip>Archivés</ChoiceChip>
        </div>
        <InteractiveRow title="Dr. Camille Martin" subtitle="Chirurgie vasculaire"
          trailing={<icons.Chevron />} style={{ marginTop: 10 }} />
      </VascoUiKitSection>

      <VascoUiKitSection title="Lignes et états">
        <div style={{ margin: '0 -16px' }}>
          <SettingGroup title="Préférences">
            <SettingRow icon={<VascoUiKitIcon kind="profile" />} label="Ligne interactive"
              sub="Information secondaire" onClick={() => {}} />
            <SettingRow icon={<VascoUiKitIcon kind="bell" />} label="Notifications"
              sub="État contrôlé par la ligne" role="switch" checked={notifications}
              onClick={() => setNotifications((value) => !value)}
              right={<Toggle on={notifications} />} />
            <SettingRow icon={<VascoUiKitIcon kind="trash" />} label="Action indisponible"
              reason="La raison reste visible." danger />
          </SettingGroup>
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="Champs">
        <div style={{ background: tokens.color.surface, borderRadius: tokens.radius.lg,
          border: `1px solid ${tokens.color.border}`, padding: 14 }}>
          <Field label="Nom affiché" hint="Une aide courte explique la saisie.">
            <TextField id="ui-kit-display-name" aria-label="Nom affiché"
              value={displayName} onChange={setDisplayName} maxLength={120} />
          </Field>
          <Field label="Saisie multiligne"
            hint="Le même contrôle, sur plusieurs lignes : une note, un matériel de bloc.">
            <TextField id="ui-kit-multiline" aria-label="Saisie multiligne" multiline rows={2}
              value={multiline} onChange={setMultiline} maxLength={300}
              placeholder="Ce qu'il faudra prévoir…" />
          </Field>
          <Field label="Nombre borné"
            hint="Un nombre reste une saisie : les bornes disent ce que le serveur accepte.">
            <TextField id="ui-kit-number" aria-label="Nombre borné" kind="number"
              value={days} onChange={setDays} min={1} max={60} width={96} />
          </Field>
          <Field label="Saisie indisponible" hint="L'état désactivé reste lisible.">
            <TextField id="ui-kit-disabled-text" aria-label="Saisie indisponible"
              value="Valeur portée par le serveur" onChange={() => {}} disabled />
          </Field>
          <Field label="Saisie refusée" hint="Une valeur refusée se voit sans couleur seule : `aria-invalid` la dit.">
            <TextField id="ui-kit-invalid-text" aria-label="Saisie refusée"
              value={invalidText} onChange={setInvalidText} invalid />
          </Field>
          <Field label="Civilité">
            <SimpleSelect id="ui-kit-role" aria-label="Civilité" value={role}
              options={[["doctor", "Docteur"], ["professor", "Professeur"], ["none", "Aucune"]]}
              onChange={setRole} />
          </Field>
          <Field label="Choix désactivé" hint="L’état indisponible reste lisible sans ouvrir la liste.">
            <SimpleSelect id="ui-kit-disabled-role" aria-label="Choix désactivé" value="doctor"
              options={[["doctor", "Docteur"]]} onChange={() => {}} disabled />
          </Field>
          <Field label="Choix avec recherche" hint="Le clavier et le filtre utilisent le même composant partout.">
            <SearchSelect id="ui-kit-practitioner" aria-label="Choix avec recherche"
              value={practitioner} onChange={setPractitioner}
              searchPlaceholder="Rechercher un praticien"
              options={[["martin", "Dr. Camille Martin", "Chirurgie vasculaire"],
                ["bernard", "Dr. Nicolas Bernard", "Médecine vasculaire"],
                ["durand", "Dr. Alice Durand", "Cardiologie"]]} />
          </Field>
          <Field label="Recherche à deux onglets"
            hint="Deux populations séparées – vivants et décédés – dans la même primitive : l’onglet choisit celle qu’on cherche.">
            <SearchSelect id="ui-kit-scoped-patient" aria-label="Recherche à deux onglets"
              value={scopedPatient} onChange={setScopedPatient}
              placeholder="Choisir un patient"
              searchPlaceholder="Rechercher par nom ou IPP"
              emptyLabel="Aucun patient ne correspond"
              scopes={[{ id: 'living', label: 'Vivants' }, { id: 'deceased', label: 'Décédés' }]}
              scope={scope} onScopeChange={setScope}
              scopesLabel="Population cherchée"
              options={UI_KIT_SCOPED_PATIENTS[scope]} />
          </Field>
          <Field label="Date" hint="Le calendrier de l’application, jamais celui du navigateur : il vient par-dessus l’écran.">
            <DayPicker id="ui-kit-day" aria-label="Date" value={controlDay}
              todayKey="2026-09-09" min="2026-09-09" onChange={setControlDay} />
          </Field>
          <Field label="Période" hint="Deux touchers : le début, puis la fin. Toucher avant le début en rouvre une.">
            <DayPicker id="ui-kit-range" aria-label="Période" mode="range"
              value={leave.start} end={leave.end} todayKey="2026-09-09"
              onChange={(start, end) => setLeave({ start, end })} />
          </Field>
          <Field label="Échéance" hint="Une date et son heure, par demi-heures : « Terminé » dit quand c’est fini.">
            <DayPicker id="ui-kit-due" aria-label="Échéance" withTime
              value={due} todayKey="2026-09-09" min="2026-09-09"
              placeholder="Choisir une échéance" onChange={setDue} />
          </Field>
          <Field label="Date compacte" hint="Deux dates côte à côte dans un champ étroit : le jour, le mois abrégé, l’année.">
            <DayPicker id="ui-kit-day-compact" aria-label="Date compacte" format="compact"
              value={compactDay} todayKey="2026-09-09" placeholder="Aucune"
              onChange={setCompactDay} />
          </Field>
          <Field label="Date indisponible" hint="L’état éteint se voit sans ouvrir le calendrier.">
            <DayPicker id="ui-kit-day-disabled" aria-label="Date indisponible"
              value="2026-09-24" onChange={() => {}} disabled />
          </Field>
          <Field label="Choix avec création" hint="La création reste la dernière action de la liste.">
            <CreatableSelect id="ui-kit-category" aria-label="Choix avec création"
              value={category} onChange={setCategory} options={categories}
              searchPlaceholder="Rechercher ou créer une catégorie"
              onCreate={(label) => {
                const created = `custom-${categories.length + 1}`;
                setCategories((current) => [...current, [created, label]]);
                setCategory(created);
              }} />
          </Field>
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="Panneau qui se ferme au clic extérieur">
        <p style={{ margin: '0 0 8px', color: tokens.color.secondary,
          fontSize: 12.5, fontWeight: 500, lineHeight: 1.45 }}>
          Le panneau se ferme dès qu'un appui naît hors de sa boîte. Une feuille du
          socle ouverte depuis lui retient ses propres appuis : choisir un jour, une
          heure, puis « Terminé » ne le referme pas, et toucher le fond de la feuille
          la referme sans changer la valeur.
        </p>
        <VascoUiKitOutsidePanel>
          <Field label="Échéance du rappel"
            hint="Le calendrier s'ouvre par-dessus l'écran, hors de ce panneau.">
            <DayPicker id="ui-kit-panel-due" aria-label="Échéance du rappel" withTime
              value={panelDue} todayKey="2026-09-09" min="2026-09-09"
              placeholder="Choisir une échéance" onChange={setPanelDue} />
          </Field>
          <Field label="Choix dans le panneau"
            hint="Une liste ouverte dans une feuille se referme encore au premier appui à côté.">
            <SimpleSelect id="ui-kit-panel-role" aria-label="Choix dans le panneau" value={role}
              options={[["doctor", "Docteur"], ["professor", "Professeur"], ["none", "Aucune"]]}
              onChange={setRole} />
          </Field>
        </VascoUiKitOutsidePanel>
      </VascoUiKitSection>

      {/* Une journée sans travail possible : congé posé, heures révolues. Elle
          se lit en GRIS, jamais en rouge – le rouge est celui du danger, et
          partir en vacances n’en est pas un. La même encre sert au hachuré de
          l’axe et au fond de la cellule de jour, pour que « rien à faire ici »
          se dise d’une seule façon. Ce qui reste posé dessus se lit par-dessus :
          la hachure ne cache rien. */}
      <VascoUiKitSection title="Journée indisponible">
        <div style={{ display: 'grid', gap: 8 }}>
          <div style={{
            position: 'relative', height: 84, borderRadius: tokens.radius.lg,
            border: `1px solid ${tokens.color.border}`, background: tokens.color.surface,
            overflow: 'hidden',
          }}>
            <div aria-hidden="true" data-ui-kit-absent-band="true" style={{
              position: 'absolute', inset: 0,
              background: UI_KIT_ABSENT_HATCH, pointerEvents: 'none',
            }} />
            <div style={{
              position: 'absolute', left: 12, right: 12, top: 18, padding: '8px 10px',
              borderRadius: tokens.radius.md, background: tokens.color.surface,
              border: `1px solid ${tokens.color.border}`, fontSize: 12, fontWeight: 600,
            }}>Un rendez-vous posé reste lisible par-dessus</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['Lun', 'Mar', 'Mer'].map((label, index) => (
              <div key={label} data-ui-kit-absent-day={index > 0 ? 'true' : undefined}
                style={{
                  flex: '1 1 0', textAlign: 'center', padding: '10px 0',
                  borderRadius: tokens.radius.md,
                  background: index > 0 ? UI_KIT_ABSENT_TINT : 'transparent',
                  fontSize: 12, fontWeight: 600, color: tokens.color.ink,
                }}>{label}</div>
            ))}
          </div>
          <StatusNotice tone="info" compact title="Congé posé"
            message="Les journées couvertes sont grisées dans la semaine et dans le mois." />
        </div>
      </VascoUiKitSection>

      <VascoUiKitSection title="Feuille modale">
        <Button onClick={() => setSheetOpen(true)} grow>Ouvrir l’exemple</Button>
      </VascoUiKitSection>

      <VascoUiKitSection title="Feuille basse">
        <Button onClick={() => setBottomSheetOpen(true)} grow>Ouvrir depuis le bas</Button>
      </VascoUiKitSection>
      <VascoUiKitSection title="Écran de détail">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <Button onClick={() => setDetailOpen(true)} grow>Détail standard</Button>
          <Button onClick={() => setSideDetailOpen(true)} grow>Panneau latéral</Button>
        </div>
      </VascoUiKitSection>
      <VascoUiKitSection title="Confirmation">
        <Button onClick={() => setConfirmOpen(true)} grow>Ouvrir la confirmation</Button>
      </VascoUiKitSection>
    </div>

    <FormSheet open={sheetOpen} title="Feuille sans croix"
      subtitle="Une action d’annulation explicite peut remplacer la croix sans supprimer la fermeture extérieure."
      showClose={false}
      onClose={() => setSheetOpen(false)}
      footer={<><Button grow onClick={() => setSheetOpen(false)}>Annuler</Button>
        <Button grow variant="solid" onClick={() => setSheetOpen(false)}>Confirmer</Button></>}>
      <div style={{ padding: '4px 0 2px', color: tokens.color.secondary,
        fontSize: 13, lineHeight: 1.5 }}>Le contenu métier vient ici sans recréer une popup.</div>
    </FormSheet>
    <BottomSheet open={bottomSheetOpen} title="Feuille basse Vasco"
      subtitle="Elle se ferme avec la croix, le fond ou la touche Échap."
      onClose={() => setBottomSheetOpen(false)}>
      <div style={{ padding: '2px 0 6px', color: tokens.color.secondary,
        fontSize: 13, lineHeight: 1.5 }}>
        L’entrée et la sortie utilisent le même mouvement dans tous les parcours mobiles.
      </div>
    </BottomSheet>
    <DetailSheet open={detailOpen} title="Détail Vasco" onClose={() => setDetailOpen(false)}>
      <div style={{ padding: 20, color: tokens.color.secondary, fontSize: 13 }}>
        Un parcours long conserve une navigation et une fermeture uniformes.
      </div>
    </DetailSheet>
    <DetailSheet open={sideDetailOpen} title="Historique" motion="slideFromLeft"
      onClose={() => setSideDetailOpen(false)}>
      <div style={{ padding: 20, color: tokens.color.secondary, fontSize: 13 }}>
        Un panneau de navigation secondaire entre et ressort par le même côté.
      </div>
    </DetailSheet>
    <ConfirmDialog open={confirmOpen} title="Confirmer l’action"
      message="La conséquence est expliquée avant de continuer."
      onClose={() => setConfirmOpen(false)} onConfirm={() => setConfirmOpen(false)} />
  </main>;
}