/* Deadline-detail components — built on foundation-shared + stapel-components.
   BottomSheet shell, sticky header/footer, progress stacked-bar, toets-ladder,
   gekoppeld cards, acties rows, edit-modus inputs, alert-dialog. */

/* ─── Backdrop ─── */
function SheetBackdrop({ t }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 2,
      background: t.mode === 'dark' ? 'rgba(0,0,0,0.55)' : 'rgba(15,23,42,0.42)',
      pointerEvents: 'none',
    }} />
  );
}

/* ─── BottomSheet shell ─── */
function BottomSheet({ t, height = 'medium', children, zIndex = 3 }) {
  const heightMap = { small: '40%', medium: '65%', full: 'calc(100% - 24px)' };
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, zIndex,
      height: heightMap[height] || heightMap.medium,
      background: t.card,
      borderTopLeftRadius: 24, borderTopRightRadius: 24,
      border: `1px solid ${t.border}`,
      borderBottom: 'none',
      boxShadow: t.mode === 'dark' ? '0 -20px 50px rgba(0,0,0,0.45)' : '0 -16px 48px rgba(15,23,42,0.18)',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
        width: 32, height: 4, borderRadius: 999,
        background: t.mode === 'dark' ? 'rgba(255,255,255,0.20)' : 'rgba(15,23,42,0.18)',
      }} />
      {children}
    </div>
  );
}

/* ─── Sheet header — subject + title + meta-row ─── */
function DetailHeader({ t, subject, title, dateLabel, urgency }) {
  const urgConfig = urgency.kind === 'danger'
    ? { bg: hexToRgba(t.red, 0.14), fg: t.redFg, bd: hexToRgba(t.red, 0.32) }
    : { bg: hexToRgba(t.primary, 0.14), fg: t.primary, bd: hexToRgba(t.primary, 0.32) };
  return (
    <div style={{
      position: 'relative', flexShrink: 0,
      padding: '20px 16px 12px',
      borderBottom: `1px solid ${t.border}`,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      {/* Top-right action cluster */}
      <div style={{
        position: 'absolute', top: 16, right: 12, zIndex: 1,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <button style={{
          height: 28, padding: '0 10px', borderRadius: 8,
          background: 'transparent', border: 'none', cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, letterSpacing: 0.2,
          color: t.primary,
        }}>Bewerken</button>
        <button style={{
          width: 32, height: 32, borderRadius: 8, background: 'transparent',
          border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="x" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
      </div>

      <div><SubjectChip t={t} subject={subject} /></div>

      <div style={{
        fontFamily: 'Fredoka One', fontSize: 22, lineHeight: 1.15,
        color: t.fg, letterSpacing: '-0.01em',
        paddingRight: 100, /* leave room for top-right cluster */
      }}>{title}</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <MI name="calendar" size={14} color={t.fgDim} strokeWidth={2.2} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 600, fontSize: 12.5, color: t.fgDim,
        }}>{dateLabel}</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center',
          padding: '2px 8px', borderRadius: 4,
          background: urgConfig.bg, color: urgConfig.fg,
          border: `1px solid ${urgConfig.bd}`,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5, letterSpacing: 0.5,
        }}>{urgency.label}</span>
      </div>
    </div>
  );
}

/* ─── Sheet footer — ⋯ + Start quiz ─── */
function DetailFooter({ t }) {
  return (
    <div style={{
      flexShrink: 0, padding: '12px 16px 16px',
      borderTop: `1px solid ${t.border}`,
      background: t.card,
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <button style={{
        width: 40, height: 40, borderRadius: 10,
        background: t.card, border: `1px solid ${t.border}`,
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="more-vertical" size={20} color={t.fgDim} strokeWidth={2.2} /></button>
      <div style={{ flex: 1 }}>
        <Btn t={t} variant="primary" size="md" icon="play" full>Start quiz</Btn>
      </div>
    </div>
  );
}

/* ─── Detail body wrapper — scrollable ─── */
function DetailBody({ children }) {
  return (
    <div style={{
      flex: 1, overflow: 'hidden',
      padding: 16, display: 'flex', flexDirection: 'column', gap: 16,
    }}>{children}</div>
  );
}

function SectionOverline({ t, children }) {
  return (
    <div style={{
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
      color: t.fgDim, letterSpacing: 0.8, textTransform: 'uppercase',
      marginBottom: -4,
    }}>{children}</div>
  );
}

/* ─── Stacked progress bar with legend ─── */
function StackedBar({ t, segments }) {
  // segments: [{ kind: 'done'|'planned'|'todo', pct, label }]
  const colorFor = (kind) => {
    if (kind === 'done')    return { bg: t.green, dim: hexToRgba(t.green, 0.22) };
    if (kind === 'planned') return { bg: t.primary, dim: hexToRgba(t.primary, 0.22) };
    return { bg: t.warn, dim: hexToRgba(t.warn, 0.22) };
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{
        height: 10, borderRadius: 5, overflow: 'hidden',
        background: t.cardSunken,
        border: `1px solid ${t.border}`,
        display: 'flex',
      }}>
        {segments.map((seg, i) => {
          const c = colorFor(seg.kind);
          if (seg.kind === 'todo') {
            return (
              <div key={i} style={{
                width: `${seg.pct}%`, height: '100%',
                background: `repeating-linear-gradient(45deg, ${c.bg} 0 4px, ${c.dim} 4px 8px)`,
                opacity: 0.85,
              }} />
            );
          }
          return (
            <div key={i} style={{
              width: `${seg.pct}%`, height: '100%',
              background: c.bg,
              opacity: seg.kind === 'planned' ? 0.78 : 1,
            }} />
          );
        })}
      </div>
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        {segments.map((seg, i) => {
          const c = colorFor(seg.kind);
          return (
            <div key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 11.5, color: t.fgDim,
            }}>
              <span style={{
                width: 10, height: 10, borderRadius: 2,
                background: seg.kind === 'todo'
                  ? `repeating-linear-gradient(45deg, ${c.bg} 0 2px, ${c.dim} 2px 4px)`
                  : c.bg,
                opacity: seg.kind === 'planned' ? 0.78 : 1,
              }} />
              {seg.label}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── Status banner — op schema / loopt achter ─── */
function StatusBanner({ t, kind, headline, body, cta }) {
  const cfg = kind === 'success'
    ? { bg: hexToRgba(t.green, 0.10), bd: hexToRgba(t.green, 0.30), fg: t.green, icon: 'check-circle-2' }
    : { bg: hexToRgba(t.warn, 0.10),  bd: hexToRgba(t.warn, 0.30),  fg: t.warnFg, icon: 'alert-circle' };
  return (
    <div style={{
      background: cfg.bg, border: `1px solid ${cfg.bd}`,
      borderRadius: 12, padding: 12,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <MI name={cfg.icon} size={18} color={cfg.fg} strokeWidth={2.4} style={{ marginTop: 1, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5,
            color: t.fg, lineHeight: 1.3,
          }}>{headline}</div>
          <div style={{
            marginTop: 3,
            fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
            color: t.fgDim, lineHeight: 1.4,
          }}>{body}</div>
        </div>
      </div>
      {cta && (
        <div style={{ paddingLeft: 28 }}>
          <Btn t={t} variant="primary" size="sm" iconRight="arrow-right">{cta}</Btn>
        </div>
      )}
    </div>
  );
}

/* ─── Toets-ladder step ─── */
function LadderStep({ t, status, title, meta }) {
  // status: 'done' | 'now' | 'planned' | 'todo'
  const cfg = {
    done:    { color: t.green,   icon: 'check' },
    now:     { color: t.primary, icon: 'play' },
    planned: { color: t.primary, icon: 'play' },
    todo:    { color: t.warn,    icon: 'circle' },
  }[status] || { color: t.fgMute, icon: 'circle' };
  const titleColor = status === 'done' ? t.fgDim : t.fg;
  const titleDecoration = status === 'done' ? 'line-through' : 'none';
  return (
    <div style={{
      background: t.card, borderRadius: 10,
      border: `1px solid ${t.border}`,
      borderLeft: `4px solid ${cfg.color}`,
      padding: '10px 12px',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 999, flexShrink: 0,
        background: hexToRgba(cfg.color, 0.14),
        border: `1px solid ${hexToRgba(cfg.color, 0.30)}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <MI name={cfg.icon} size={12} color={cfg.color} strokeWidth={2.8}
            fill={status === 'todo' ? 'none' : (status === 'done' || status === 'now' ? cfg.color : 'none')} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
          color: titleColor, textDecoration: titleDecoration, lineHeight: 1.3,
        }}>{title}</div>
        <div style={{
          marginTop: 2,
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 11.5,
          color: t.fgDim, lineHeight: 1.3,
        }}>{meta}</div>
      </div>
    </div>
  );
}

/* ─── Gekoppeld row ─── */
function LinkRow({ t, icon, title, meta }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8, flexShrink: 0,
        background: t.primaryDim,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name={icon} size={16} color={t.primary} strokeWidth={2.2} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
          color: t.fg, lineHeight: 1.3,
        }}>{title}</div>
        <div style={{
          marginTop: 2,
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 11.5,
          color: t.fgDim, lineHeight: 1.3,
        }}>{meta}</div>
      </div>
      <MI name="chevron-right" size={18} color={t.fgMute} strokeWidth={2.2} />
    </div>
  );
}

/* ─── Acties row ─── */
function ActieRow({ t, icon, label, destructive = false, divider = false }) {
  return (
    <div style={{
      padding: '14px 14px',
      borderTop: divider ? `1px solid ${t.border}` : 'none',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <MI name={icon} size={18} color={destructive ? t.red : t.fg} strokeWidth={2.2} />
      <div style={{
        flex: 1,
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
        color: destructive ? t.red : t.fg,
      }}>{label}</div>
      <MI name="chevron-right" size={18} color={t.fgMute} strokeWidth={2.2} />
    </div>
  );
}

function ActieGroup({ t, children }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, overflow: 'hidden',
    }}>{children}</div>
  );
}

function ExpandLink({ t, children }) {
  return (
    <div style={{
      padding: '8px 4px 0',
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
      color: t.primary, letterSpacing: 0.1,
      display: 'inline-flex', alignItems: 'center', gap: 4,
    }}>{children} <MI name="chevron-down" size={14} color={t.primary} strokeWidth={2.4} /></div>
  );
}

/* ─── Edit-mode bits ─── */
function EditHeader({ t, title = 'Bewerken' }) {
  return (
    <div style={{
      position: 'relative', flexShrink: 0,
      padding: '20px 16px 12px',
      borderBottom: `1px solid ${t.border}`,
    }}>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
        letterSpacing: '-0.01em',
      }}>{title}</div>
      <button style={{
        position: 'absolute', top: 16, right: 12,
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="x" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
    </div>
  );
}

function FieldLabel({ t, children }) {
  return (
    <div style={{
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
      color: t.fgDim, letterSpacing: 0.8, textTransform: 'uppercase',
      marginBottom: 6,
    }}>{children}</div>
  );
}

function TextInput({ t, value }) {
  return (
    <div style={{
      height: 44, padding: '0 14px', borderRadius: 10,
      background: t.input, border: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center',
      fontFamily: 'Nunito', fontWeight: 600, fontSize: 14, color: t.fg,
    }}>{value}</div>
  );
}

function TypeSegmented({ t, active = 'toets' }) {
  const items = [
    { k: 'toets', label: 'Toets', icon: 'target' },
    { k: 'so',    label: 'SO',    icon: 'edit-3' },
    { k: 'inlev', label: 'Inlev', icon: 'upload' },
    { k: 'maak',  label: 'Maak',  icon: 'wrench' },
    { k: 'leer',  label: 'Leer',  icon: 'book-open' },
  ];
  return (
    <div style={{ display: 'flex', gap: 6, overflow: 'hidden' }}>
      {items.map(it => {
        const on = it.k === active;
        return (
          <div key={it.k} style={{
            height: 36, padding: '0 12px', borderRadius: 999, flex: 1,
            background: on ? t.primary : t.cardSunken,
            border: `1px solid ${on ? t.primary : t.border}`,
            color: on ? '#FFFFFF' : t.fgDim,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5, letterSpacing: 0.3,
          }}>
            <MI name={it.icon} size={13} color={on ? '#FFFFFF' : t.fgDim} strokeWidth={2.4} />
            {it.label.toUpperCase()}
          </div>
        );
      })}
    </div>
  );
}

function DateInputRow({ t }) {
  return (
    <div style={{
      height: 48, padding: '0 14px', borderRadius: 10,
      background: t.input, border: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <MI name="calendar" size={16} color={t.fgDim} strokeWidth={2.2} />
      <span style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5, color: t.fg,
      }}>zaterdag 25 april</span>
      <span style={{ flex: 1 }} />
      <span style={{
        display: 'inline-flex', alignItems: 'center',
        padding: '2px 8px', borderRadius: 4,
        background: hexToRgba(t.primary, 0.14),
        color: t.primary,
        border: `1px solid ${hexToRgba(t.primary, 0.32)}`,
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10, letterSpacing: 0.5,
      }}>OVER 3D</span>
      <MI name="chevron-down" size={16} color={t.fgDim} strokeWidth={2.4} />
    </div>
  );
}

function UrenStepper({ t }) {
  const Btnn = ({ children }) => (
    <button style={{
      height: 36, padding: '0 10px', borderRadius: 10,
      background: t.cardSunken, border: `1px solid ${t.border}`,
      cursor: 'pointer',
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, color: t.fg,
    }}>{children}</button>
  );
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 8, padding: '8px 4px',
    }}>
      <div style={{ display: 'flex', gap: 6 }}>
        <Btnn>−1u</Btnn>
        <Btnn>−15m</Btnn>
      </div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 24, color: t.fg, letterSpacing: '-0.01em',
      }}>3u 00m</div>
      <div style={{ display: 'flex', gap: 6 }}>
        <Btnn>+15m</Btnn>
        <Btnn>+1u</Btnn>
      </div>
    </div>
  );
}

function EditFooter({ t }) {
  return (
    <div style={{
      flexShrink: 0, padding: '12px 16px 16px',
      borderTop: `1px solid ${t.border}`, background: t.card,
      display: 'flex', gap: 8,
    }}>
      <div style={{ flex: 1 }}>
        <Btn t={t} variant="ghost" size="md" full>Annuleren</Btn>
      </div>
      <div style={{ flex: 2 }}>
        <Btn t={t} variant="primary" size="md" full>Opslaan</Btn>
      </div>
    </div>
  );
}

/* ─── Alert dialog ─── */
function AlertDialog({ t, icon, iconColor, title, body, primaryLabel, primaryVariant = 'destructive' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 5,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16,
      background: t.mode === 'dark' ? 'rgba(0,0,0,0.62)' : 'rgba(15,23,42,0.48)',
    }}>
      <div style={{
        width: '100%', maxWidth: 320,
        background: t.card, borderRadius: 16,
        border: `1px solid ${t.border}`,
        padding: 20,
        boxShadow: t.mode === 'dark' ? '0 24px 60px rgba(0,0,0,0.55)' : '0 16px 48px rgba(15,23,42,0.22)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 999,
          background: hexToRgba(iconColor, 0.14),
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name={icon} size={28} color={iconColor} strokeWidth={2.4} /></div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 18, color: t.fg,
          textAlign: 'center', letterSpacing: '-0.01em',
        }}>{title}</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 13, color: t.fgDim,
          textAlign: 'center', lineHeight: 1.45,
        }}>{body}</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 8, width: '100%' }}>
          <div style={{ flex: 1 }}><Btn t={t} variant="ghost" size="md" full>Annuleren</Btn></div>
          <div style={{ flex: 1 }}>
            {primaryVariant === 'destructive'
              ? <button style={{
                  width: '100%', height: 40, padding: '0 14px', borderRadius: 10,
                  background: t.red, color: '#FFFFFF', border: 'none', cursor: 'pointer',
                  fontFamily: 'Nunito', fontWeight: 800, fontSize: 13, letterSpacing: 0.2,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                }}>
                  <MI name="trash-2" size={15} color="#FFFFFF" strokeWidth={2.6} />
                  {primaryLabel}
                </button>
              : <Btn t={t} variant="primary" size="md" full>{primaryLabel}</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  SheetBackdrop, BottomSheet, DetailHeader, DetailFooter, DetailBody,
  SectionOverline, StackedBar, StatusBanner, LadderStep, LinkRow,
  ActieRow, ActieGroup, ExpandLink,
  EditHeader, FieldLabel, TextInput, TypeSegmented, DateInputRow,
  UrenStepper, EditFooter, AlertDialog,
});