const { AppBar, HeroBanner, ActionCard, MediaCard, FeatureCard, CategoryTile, HelpBar, Button } = window.HormelBenefitsPortalDesignSystem_962a19;
const A = 'assets/';

const CATEGORIES = [
  { title: 'Medical', href: 'medical.html', body: 'Coverage for you and your family.', icon: 'heart_plus', accent: 'var(--cat-medical)' },
  { title: 'Dental / Vision', href: 'dental-vision.html', body: 'Keep your smile healthy and your vision sharp.', icon: 'dentistry', accent: 'var(--cat-dental)' },
  { title: 'Disability', href: 'disability.html', body: 'Financial protection when you need it most.', icon: 'accessible', accent: 'var(--cat-disability)' },
  { title: 'Voluntary', href: 'voluntary.html', body: 'Additional coverage options for life\u2019s unexpected.', icon: 'verified_user', accent: 'var(--cat-voluntary)' },
  { title: 'Life Insurance', href: 'life-insurance.html', body: 'Support for your loved ones\u2019 future.', icon: 'umbrella', accent: 'var(--cat-life)' },
  { title: 'Resources', href: 'resources.html', body: 'Helpful tools, contacts, and plan documents.', icon: 'menu_book', accent: 'var(--cat-resources)' },
];

const NOTIFICATIONS = [
  { title: 'Open enrollment closes Friday', meta: '2 days left' },
  { title: 'Tobacco attestation incomplete', meta: 'Action needed' },
  { title: 'New retirement statement available', meta: 'Yesterday' },
];

function Panel({ children, style }) {
  return (
    <div style={{
      position: 'absolute', top: 'calc(var(--appbar-height) - 6px)', right: 24, width: 320, zIndex: 40,
      background: 'var(--surface-card)', border: 'var(--border-width) solid var(--border-hairline)',
      borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-raised)', overflow: 'hidden', ...style,
    }}>{children}</div>
  );
}

function VideoModal({ onClose }) {
  return (
    <div
      onClick={onClose}
      style={{ position: 'fixed', inset: 0, background: 'var(--overlay-scrim)', display: 'grid', placeItems: 'center', zIndex: 60 }}
    >
      <div onClick={(e) => e.stopPropagation()} style={{ width: 720, background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-raised)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px' }}>
          <span style={{ font: 'var(--text-tile-title)', color: 'var(--text-heading)' }}>Benefits overview</span>
          <button onClick={onClose} aria-label="Close" style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 22, lineHeight: 1, color: 'var(--text-muted)' }}>&times;</button>
        </div>
        <div style={{ margin: '0 24px 24px', aspectRatio: '16/9', background: 'var(--navy-900)', borderRadius: 'var(--radius-md)', display: 'grid', placeItems: 'center', gap: 10, color: 'rgba(255,255,255,.7)', fontSize: 'var(--size-body-sm)', textAlign: 'center', padding: 24 }}>
          <span>Video asset not supplied in the source materials.</span>
        </div>
      </div>
    </div>
  );
}

function PlaceholderView({ label, onBack }) {
  return (
    <div style={{ maxWidth: 'var(--layout-max)', margin: '0 auto', padding: '40px var(--layout-gutter) 80px' }}>
      <button onClick={onBack} style={{ background: 'none', border: 'none', padding: 0, marginBottom: 20, cursor: 'pointer', font: 'var(--font-weight-semibold) var(--size-body-sm)/1 var(--font-sans)', color: 'var(--text-link)' }}>&larr; Back to portal home</button>
      <div style={{ background: 'var(--surface-hero)', border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-xl)', padding: 56, display: 'grid', gap: 12, justifyItems: 'start' }}>
        <span style={{ font: 'var(--text-section)', color: 'var(--text-heading)' }}>{label}</span>
        <p style={{ margin: 0, font: 'var(--text-copy)', color: 'var(--text-muted)', maxWidth: '52ch' }}>
          This screen was not included in the supplied source material, so it is intentionally left blank rather than invented. Send the design or code for this view and it will be recreated here.
        </p>
      </div>
    </div>
  );
}

function Dashboard() {
  const [panel, setPanel] = React.useState(null);
  const [video, setVideo] = React.useState(false);
  const [view, setView] = React.useState(null);
  const toggle = (name) => setPanel((p) => (p === name ? null : name));

  return (
    <div style={{ minHeight: '100vh', background: 'var(--surface-page)', fontFamily: 'var(--font-sans)', position: 'relative' }}>
      <div style={{ position: 'relative' }}>
        <AppBar
          logoSrc={A + 'logo.png'}
          onNotifications={() => toggle('bell')}
          onUser={() => toggle('user')}
        />
        {panel === 'bell' ? (
          <Panel>
            <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-hairline)', font: 'var(--font-weight-bold) var(--size-body-sm)/1 var(--font-sans)', color: 'var(--text-heading)' }}>Notifications</div>
            {NOTIFICATIONS.map((n) => (
              <div key={n.title} style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-hairline)', display: 'grid', gap: 4 }}>
                <span style={{ fontSize: 'var(--size-body-sm)', fontWeight: 'var(--font-weight-semibold)', color: 'var(--text-body)' }}>{n.title}</span>
                <span style={{ fontSize: 'var(--size-caption)', color: 'var(--text-subtle)' }}>{n.meta}</span>
              </div>
            ))}
          </Panel>
        ) : null}
        {panel === 'user' ? (
          <Panel style={{ width: 220, right: 24 }}>
            {['My profile', 'Plan documents', 'Sign out'].map((item) => (
              <button key={item} onClick={() => { setPanel(null); setView(item); }} style={{ display: 'block', width: '100%', textAlign: 'left', padding: '13px 18px', background: 'none', border: 'none', borderBottom: '1px solid var(--border-hairline)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--size-body-sm)', color: 'var(--text-body)' }}>{item}</button>
            ))}
          </Panel>
        ) : null}
      </div>

      {view ? <PlaceholderView label={view} onBack={() => setView(null)} /> : (
        <main style={{ maxWidth: 'var(--layout-max)', margin: '0 auto', padding: '20px var(--layout-gutter) 40px', display: 'grid', gap: 'var(--layout-section-gap)' }}>
          <HeroBanner />
          <div className="landing-actions" style={{ display: 'grid', gridTemplateColumns: '1.03fr 1fr 1fr', gap: 'var(--layout-grid-gap)' }}>
            <ActionCard tone="brand" eyebrow="New to the portal?" title="Start Here" body="Get familiar with your benefits and take the first step." actionLabel="Get Started" icon="explore" onAction={() => setView('Start Here')} />
            <ActionCard tone="accent" eyebrow="New Hire?" title="Enroll Now" body="Explore your benefit options and enroll today." actionLabel="Enroll Now" icon="person_add" onAction={() => setView('Enrollment')} />
            <ActionCard tone="plain" title="Tobacco Attestation" body="Complete your attestation to receive applicable rewards." actionLabel="Complete Now" icon="assignment_turned_in" onAction={() => setView('Tobacco Attestation')} />
          </div>
          <div className="landing-features" style={{ display: 'grid', gridTemplateColumns: '1.62fr 1fr', gap: 'var(--layout-grid-gap)' }}>
            <MediaCard body="Get a quick look at the benefits available to you and your family." onAction={() => setVideo(true)} />
            <FeatureCard title="Retirement" body="Plan for tomorrow, live well today." actionLabel="View Retirement Benefits" onAction={() => setView('Retirement')} />
          </div>
          <div className="category-shelf" style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 'var(--layout-grid-gap)' }}>
            {CATEGORIES.map((c) => (
              <CategoryTile key={c.title} title={c.title} body={c.body} icon={c.icon} accent={c.accent} href={c.href} />
            ))}
          </div>
          <HelpBar onAction={() => setView('Contact Benefits Team')} />
        </main>
      )}

      {video ? <VideoModal onClose={() => setVideo(false)} /> : null}
    </div>
  );
}

Object.assign(window, { Dashboard });