const { ParcelPeekCard, ParcelExpandedCard, SegmentedPicker, SecondaryButton, CarrierBadge, PhotoThumbnail, Eyebrow } = window.PaketQRDesignSystem_892c85;

function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.75, style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color, 'stroke-width': strokeWidth } });
    }
  }, [name, size, color, strokeWidth]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size, color, ...style }} />;
}

function Phone({ children, scale = 1 }) {
  return (
    <div style={{ width: 410 * scale, height: 864 * scale, flex: 'none' }}>
      <div style={{ width: 410, padding: 10, background: 'oklch(0.34 0.006 80)', borderRadius: 'var(--radius-device-bezel)', transform: `scale(${scale})`, transformOrigin: 'top left' }}>
        <div style={{ width: 390, height: 844, borderRadius: 'var(--radius-device)', overflow: 'hidden', position: 'relative', background: 'var(--surface-app)', color: 'var(--text-primary)', fontFamily: 'var(--font-sans)' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

function StatusBar() {
  const ink = 'rgba(0,0,0,.68)';
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 30px 0', font: '600 14px var(--font-sans)' }}>
      <span>12:48</span>
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        <div style={{ width: 16, height: 10, borderRadius: 2, background: ink }} />
        <div style={{ width: 14, height: 10, borderRadius: 2, background: 'rgba(0,0,0,.5)' }} />
        <div style={{ width: 22, height: 11, borderRadius: 3, background: ink }} />
      </div>
    </div>
  );
}

function DeckScreen() {
  const [focused, setFocused] = React.useState(3);
  const parcels = window.LANDING_PARCELS;
  const focus = parcels.find((p) => p.id === focused) || parcels[2];
  const collapsed = parcels.filter((p) => p !== focus);
  const archiveTint = focus.carrier === 'dhl' ? 'rgba(255,204,0,.16)' : 'rgba(0,142,193,.16)';
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', padding: '22px var(--gutter-screen) 0' }}>
        <div>
          <h2 style={{ margin: 0, font: 'var(--type-screen-title)', letterSpacing: 'var(--tracking-title)' }}>Parcels</h2>
          <p style={{ margin: '6px 0 0', font: 'var(--type-body-small)', color: 'var(--text-tertiary)' }}>3 open · 1 due this week</p>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'var(--surface-raised)', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="circle-user-round" size={22} />
        </div>
      </div>
      <div style={{ padding: '16px var(--gutter-screen) 0' }}>
        <SegmentedPicker value="all" onChange={() => {}} options={[{ value: 'all', title: 'All' }, { value: 'dhl', title: 'DHL' }, { value: 'hermes', title: 'Hermes' }]} />
      </div>
      <div style={{ flex: 1, overflow: 'hidden', padding: '20px var(--gutter-deck) 0' }}>
        {collapsed.map((p) => (
          <ParcelPeekCard key={p.id} label={p.label} deadline={p.short} carrier={p.carrier} onClick={() => setFocused(p.id)} style={{ marginBottom: -40 }} />
        ))}
        <ParcelExpandedCard label={focus.label} subtitle={focus.subtitle} carrier={focus.carrier} qrSrc={focus.qr} deadline={focus.deadline} days={focus.days} shortCode={focus.shortCode} />
      </div>
      <div style={{ position: 'absolute', left: 20, right: 20, bottom: 30, display: 'flex', gap: 10 }}>
        <div style={{ flex: 1, padding: 18, borderRadius: 'var(--radius-section)', background: 'var(--ink-button)', color: 'var(--on-ink-button)', font: 'var(--type-button)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
          <Icon name="plus" size={18} strokeWidth={2.25} /> Add
        </div>
        <div style={{ padding: '18px 22px', borderRadius: 'var(--radius-section)', background: archiveTint, color: 'var(--text-primary)', font: 'var(--type-button)' }}>Archive</div>
      </div>
    </div>
  );
}

function DropOffScreen() {
  const p = window.LANDING_PARCELS[0];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--surface-app)', position: 'relative' }}>
      <StatusBar />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px var(--gutter-screen) 0' }}>
        <Icon name="share" size={22} color="var(--text-primary)" />
        <span style={{ font: 'var(--type-nav-action)', fontSize: 19, color: 'var(--text-secondary)' }}>Done</span>
      </div>
      <div style={{ margin: '22px 14px 0', borderRadius: 'var(--radius-card)', overflow: 'hidden', boxShadow: 'var(--shadow-card)', border: '1px solid var(--border-card)' }}>
        <div style={{ background: '#FFCC00', padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 13 }}>
          <PhotoThumbnail size={44} ink="#1A1206" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: 'var(--type-card-title)', letterSpacing: 'var(--tracking-card-title)', color: '#1A1206' }}>{p.label}</div>
            <div style={{ marginTop: 3, font: 'var(--type-body-small)', color: 'rgba(26,18,6,.62)' }}>Päckchen S · 45</div>
          </div>
          <CarrierBadge carrier="dhl" surface="carrierCard" />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '13px 18px', background: 'var(--surface-card-warm)', borderBottom: '1px solid var(--separator)' }}>
          <div>
            <Eyebrow>Deadline</Eyebrow>
            <div style={{ marginTop: 4, font: 'var(--type-metric-value)', color: 'var(--accent)' }}>{p.deadline}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <Eyebrow>Tracking number</Eyebrow>
            <div style={{ marginTop: 4, font: 'var(--type-mono)', fontSize: 15 }}>356404864213</div>
          </div>
        </div>
        <div style={{ background: 'var(--code-panel)', padding: '26px 0', display: 'flex', justifyContent: 'center' }}>
          <img src="assets/qr-dhl.svg" alt="" style={{ width: 260, height: 260, imageRendering: 'pixelated' }} />
        </div>
      </div>
      <div style={{ position: 'absolute', left: 14, right: 14, bottom: 34, display: 'flex', gap: 10 }}>
        <SecondaryButton>Copy number</SecondaryButton>
        <SecondaryButton>Photograph receipt</SecondaryButton>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Phone, DeckScreen, DropOffScreen });