const PATIENT_VIEW_MOTION = window.VascoUI?.tokens?.motion || Object.freeze({ quick: 150 });

// La maquette V5 conserve sa palette d'origine. La couche produit remplace les
// tons très saturés par cinq familles plus sourdes, tout en gardant la même
// couleur pour un patient dans la pile, la liste et la fiche dépliée.
const PATIENT_FOLDER_PALETTE = [
  { id: 'sand', body: '#F2E9D8', tab: '#E8DBC3', spine: '#D5C09C', deep: '#BFA77D' },
  { id: 'sage', body: '#E2EBE4', tab: '#D2E0D5', spine: '#B4C9BA', deep: '#91AB99' },
  { id: 'dusty-rose', body: '#F0E3E5', tab: '#E4D2D6', spine: '#CFAEB7', deep: '#B88996' },
  { id: 'mist-blue', body: '#DFE8ED', tab: '#CDDCE3', spine: '#AFC4CF', deep: '#8DAAB8' },
  { id: 'soft-plum', body: '#E8E2EB', tab: '#D9CFDE', spine: '#BCAEC5', deep: '#9B899F' },
];
FOLDER_COLORS.splice(0, FOLDER_COLORS.length, ...PATIENT_FOLDER_PALETTE);

// Une icône par sexe : mêmes couleurs et tracés, indépendamment du patient.
const PATIENT_PORTRAIT_PALETTE = Object.freeze({ skin: '#E3B894', hair: '#3D2817', bg: '#9B7355' });
function PatientSexAwarePortrait({ patient, rounded = false }) {
  const palette = PATIENT_PORTRAIT_PALETTE;
  const hair = window.VascoPatientViewFilter.portraitHairForSex(patient.sex);
  return (
    <svg aria-hidden="true" data-vasco-portrait-sex={hair.sex} viewBox="0 0 100 100"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id={`pbg-${patient.id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={palette.bg} stopOpacity="0.75" />
          <stop offset="100%" stopColor={palette.bg} stopOpacity="0.95" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill={`url(#pbg-${patient.id})`} rx={rounded ? 50 : 0} />
      <path d="M6 100c0-22 18-36 44-36s44 14 44 36" fill="rgba(20,15,12,0.55)" />
      {hair.back && <path data-vasco-hair="back" d={hair.back} fill={palette.hair} />}
      <rect x="42" y="56" width="16" height="14" fill={palette.skin} opacity="0.85" />
      <ellipse cx="50" cy="42" rx="17" ry="20" fill={palette.skin} />
      <path data-vasco-hair="front" d={hair.front} fill={palette.hair} />
      <ellipse cx="50" cy="48" rx="14" ry="9" fill="rgba(0,0,0,0.07)" />
    </svg>
  );
}

Portrait = PatientSexAwarePortrait;

// L'écran Patients actif conserve les deux présentations utiles de la maquette :
// la pile détaillée et la liste compacte. La grille d'icônes répétait les mêmes
// patients avec moins d'informations, donc elle ne fait plus partie du sélecteur.
function PatientViewToggle({ mode, onChange }) {
  const { IconButton } = window.VascoUI;
  const modes = [
    {
      id: 'stack',
      label: 'Cartes superposées',
      icon: <><rect x="4" y="4" width="16" height="4" rx="1" /><rect x="6" y="10" width="12" height="4" rx="1" /><rect x="8" y="16" width="8" height="4" rx="1" /></>,
    },
    {
      id: 'list',
      label: 'Liste compacte',
      icon: <><line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" /></>,
    },
  ];
  return (
    <div style={{
      display: 'flex', gap: 2,
      background: 'rgba(10,10,10,0.04)', borderRadius: 12, padding: 2,
    }}>
      {modes.map((m) => {
        const selected = mode === m.id;
        return (
          <IconButton key={m.id} label={m.label} title={m.label} pressed={selected}
            onClick={() => onChange(m.id)} size={30} style={{
              width: 30, height: 28, borderRadius: 8,
              background: selected ? PF_SURF : 'transparent',
              border: selected ? `1px solid ${PF_HAIR}` : '1px solid transparent',
              boxShadow: selected ? '0 1px 3px rgba(10,10,10,0.08)' : 'none',
              cursor: 'pointer', padding: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: `all ${PATIENT_VIEW_MOTION.quick}ms ease`,
            }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke={selected ? PF_INK : PF_SUB} strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round">
              {m.icon}
            </svg>
          </IconButton>
        );
      })}
    </div>
  );
}

ViewToggle = PatientViewToggle;

// La V5 rassemble toutes les lignes de la fiche dépliée dans une seule carte.
// Le rendez-vous relève de l'agenda : il devient une carte autonome, tandis que
// les informations du patient conservent leur carte et leur ordre d'origine.
const PatientFocusDetailsBase = FocusDetails;

function patientViewContainsText(node, text) {
  if (typeof node === 'string') return node.includes(text);
  if (Array.isArray(node)) return node.some((child) => patientViewContainsText(child, text));
  if (!React.isValidElement(node)) return false;
  return patientViewContainsText(node.props?.children, text);
}

function patientViewNormalizeRows(rows) {
  return rows.map((row, index) => React.cloneElement(row, {
    ...row.props,
    style: {
      ...row.props.style,
      borderTop: index === 0 ? 'none' : `1px solid ${PF_HAIR}`,
    },
  }));
}

function PatientSectionedFocusDetails(props) {
  const rendered = PatientFocusDetailsBase(props);
  if (!props.patient?.nextRdv || !React.isValidElement(rendered)) return rendered;
  const sections = React.Children.toArray(rendered.props.children);
  const infoIndex = sections.findIndex((child) => (
    React.isValidElement(child)
    && child.type === 'div'
    && patientViewContainsText(child, 'Prochain RDV')
  ));
  if (infoIndex < 0) return rendered;

  const infoCard = sections[infoIndex];
  const rows = React.Children.toArray(infoCard.props.children);
  const appointmentRows = rows.filter((row) => patientViewContainsText(row, 'Prochain RDV'));
  const patientRows = rows.filter((row) => !patientViewContainsText(row, 'Prochain RDV'));
  if (!appointmentRows.length) return rendered;

  const sharedStyle = { ...infoCard.props.style };
  const replacements = [];
  if (patientRows.length) {
    replacements.push(React.cloneElement(infoCard, {
      ...infoCard.props,
      key: 'patient-focus-information',
      role: 'group',
      'aria-label': 'Informations patient',
      style: { ...sharedStyle, margin: '0 8px 8px' },
    }, patientViewNormalizeRows(patientRows)));
  }
  replacements.push(
    <PatientNextAppointmentCard key="patient-focus-appointment"
      appointment={props.patient.nextRdv} accent={VT.medBlue}
      style={{ margin: '0 8px 12px' }} />,
  );
  sections.splice(
    infoIndex,
    1,
    ...replacements,
  );
  return React.cloneElement(rendered, rendered.props, sections);
}

FocusDetails = PatientSectionedFocusDetails;

// Le filtre s'insère à côté du tri sans recopier l'écran Patients gelé. Un
// contexte porte le choix, puis les deux vues actives reçoivent la même liste.
const LegacyPatientFoldersForFilter = PatientFolders;
const LegacyPatientSortPickerForFilter = SortPicker;
const LegacyPatientWalletCardsForFilter = WalletCards;
const LegacyPatientListViewForFilter = PatientListView;
const PatientFilterContext = React.createContext({
  criteria: { status: 'all', sex: 'all' }, setCriteria: () => {},
});

function PatientFilterPicker() {
  const { Button, IconButton, InteractiveRow } = window.VascoUI;
  const { criteria, setCriteria } = React.useContext(PatientFilterContext);
  const [open, setOpen] = React.useState(false);
  const { FILTERS: statusFilters, SEX_FILTERS: sexFilters } = window.VascoPatientViewFilter;
  const active = criteria.status !== 'all' || criteria.sex !== 'all';
  const activeLabels = [
    criteria.status === 'all' ? null : statusFilters.find((item) => item.id === criteria.status)?.label,
    criteria.sex === 'all' ? null : sexFilters.find((item) => item.id === criteria.sex)?.label,
  ].filter(Boolean);
  const change = (key, value) => setCriteria((current) => ({ ...current, [key]: value }));
  const choices = (items, key) => items.map((item) => {
    const checked = item.id === criteria[key];
    return (
      <InteractiveRow role="menuitemradio" aria-checked={checked}
        key={`${key}-${item.id}`}
        onClick={() => change(key, item.id)} style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 9,
          padding: '7px 10px', borderRadius: 9, border: 'none',
          background: checked ? PF_MED_TINT : 'transparent',
          color: checked ? PF_MED : PF_INK, cursor: 'pointer',
          fontFamily: 'inherit', fontSize: 12.5, fontWeight: 600,
          textAlign: 'left',
        }}>
        <span aria-hidden="true" style={{
          width: 7, height: 7, borderRadius: '50%', flexShrink: 0,
          background: checked ? PF_MED : 'rgba(10,10,10,0.16)',
        }} />
        {item.label}
      </InteractiveRow>
    );
  });
  return (
    <div style={{ position: 'relative' }}>
      <IconButton label="Filtrer les patients" expanded={open} size={34}
        title={active ? `Filtres : ${activeLabels.join(' · ')}` : 'Filtres : aucun'}
        onClick={() => setOpen((value) => !value)} style={{
          height: 32, borderRadius: 12,
          background: active ? PF_MED_TINT : 'rgba(10,10,10,0.04)',
          border: 'none', cursor: 'pointer', position: 'relative',
        }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
          stroke={active ? PF_MED : PF_SUB} strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round">
          <path d="M4 6h16M7 12h10M10 18h4" />
        </svg>
        {active && <span aria-hidden="true" style={{
          position: 'absolute', top: 5, right: 5, width: 5, height: 5,
          borderRadius: '50%', background: PF_MED,
        }} />}
      </IconButton>
      {open && <>
        <div aria-hidden="true" onClick={() => setOpen(false)} style={{
          position: 'fixed', inset: 0, zIndex: 30,
        }} />
        <div role="menu" aria-label="Filtres patients" style={{
          position: 'absolute', top: 38, right: 0, zIndex: 31, width: 218,
          padding: 6, borderRadius: 14, background: PF_SURF,
          border: `1px solid ${PF_HAIR}`,
          boxShadow: '0 12px 32px rgba(10,10,10,0.14)',
        }}>
          <div style={{
            padding: '6px 9px 7px', fontSize: 10, fontWeight: 650,
            letterSpacing: '0.5px', textTransform: 'uppercase', color: PF_SUB,
          }}>Statut clinique</div>
          <div role="group" aria-label="Statut clinique">{choices(statusFilters, 'status')}</div>
          <div style={{ height: 1, background: PF_HAIR, margin: '6px 4px 2px' }} />
          <div style={{
            padding: '6px 9px 7px', fontSize: 10, fontWeight: 650,
            letterSpacing: '0.5px', textTransform: 'uppercase', color: PF_SUB,
          }}>Sexe</div>
          <div role="group" aria-label="Sexe">{choices(sexFilters, 'sex')}</div>
          <div style={{ display: 'flex', gap: 6, padding: '7px 4px 2px' }}>
            <Button size="small" grow disabled={!active}
              onClick={() => setCriteria({ status: 'all', sex: 'all' })}>Réinitialiser</Button>
            <Button size="small" variant="solid" onClick={() => setOpen(false)}>Terminé</Button>
          </div>
        </div>
      </>}
    </div>
  );
}

function PatientSortAndFilter(props) {
  return <><LegacyPatientSortPickerForFilter {...props} /><PatientFilterPicker /></>;
}

function FilteredPatientWalletCards(props) {
  const { criteria } = React.useContext(PatientFilterContext);
  const patients = window.VascoPatientViewFilter.filterPatients(props.patients, criteria);
  return <LegacyPatientWalletCardsForFilter {...props} patients={patients} />;
}

function FilteredPatientListView(props) {
  const { criteria } = React.useContext(PatientFilterContext);
  const patients = window.VascoPatientViewFilter.filterPatients(props.patients, criteria);
  return <LegacyPatientListViewForFilter {...props} patients={patients} />;
}

function FilterablePatientFolders(props) {
  const [criteria, setCriteria] = React.useState({ status: 'all', sex: 'all' });
  const state = React.useMemo(() => ({ criteria, setCriteria }), [criteria]);
  return (
    <PatientFilterContext.Provider value={state}>
      <LegacyPatientFoldersForFilter {...props} />
    </PatientFilterContext.Provider>
  );
}

SortPicker = PatientSortAndFilter;
WalletCards = FilteredPatientWalletCards;
PatientListView = FilteredPatientListView;
PatientFolders = FilterablePatientFolders;