'use client';

import { useState, useEffect } from 'react';
import styles from './AdmissionsView.module.css';

/* ─── Date helpers ─────────────────────────────────────── */

function daysUntil(month: number, day: number): number {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const y = today.getFullYear();
  let target = new Date(y, month - 1, day);
  if (target < today) target = new Date(y + 1, month - 1, day);
  return Math.round((target.getTime() - today.getTime()) / 86_400_000);
}

function nextDate(month: number, day: number): Date {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const y = today.getFullYear();
  const target = new Date(y, month - 1, day);
  if (target <= today) return new Date(y + 1, month - 1, day);
  return target;
}

function fmtDate(month: number, day: number): string {
  return nextDate(month, day).toLocaleDateString('en-GB', {
    weekday: 'short',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
}

/* ─── Data ─────────────────────────────────────────────── */

interface Chip {
  type: 'deadline' | 'offer';
  track: string;
  milestone: string;
  month: number;
  day: number;
}

const CHIPS: Chip[] = [
  { type: 'offer',    track: 'Primary · Offer Day',   milestone: 'Primary National Offer Day',   month: 4,  day: 16 },
  { type: 'deadline', track: 'Secondary · Deadline',  milestone: 'Secondary applications close', month: 10, day: 31 },
  { type: 'deadline', track: 'Primary · Deadline',    milestone: 'Primary applications close',   month: 1,  day: 15 },
  { type: 'offer',    track: 'Secondary · Offer Day', milestone: 'Secondary National Offer Day', month: 3,  day: 1  },
];

interface Step {
  date?: string;
  title: string;
  body: string;
  highlight?: 'deadline' | 'offer';
  /* Easy-to-miss, deadline-sensitive warnings surfaced as callout boxes
     rather than buried in the body prose. */
  callouts?: { title: string; body: string }[];
  /* How SchoolCompare helps at this stage of the journey */
  tool?: { label: string; href: string };
}

const SECONDARY_STEPS: Step[] = [
  {
    title: 'Check entry criteria',
    body: 'Look at each school\'s admissions policy. Catchment areas, faith criteria, sibling priority and aptitude tests vary widely.',
    callouts: [
      {
        title: 'Selective schools register earlier',
        body: 'Grammar and other selective schools need separate entrance-test registration months earlier, often by September and well before the 31 October deadline.',
      },
      {
        title: 'Faith schools may need an extra form',
        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, on top of the council application.',
      },
    ],
    tool: { label: 'Find schools & view their admissions history', href: '/' },
  },
  {
    date: 'September',
    title: 'Portal opens',
    body: 'Your local council opens its online admissions portal. Register early to avoid last-minute technical issues. You apply through your home council even if you prefer schools in neighbouring boroughs.',
    tool: { label: 'Compare schools side by side', href: '/compare' },
  },
  {
    date: '31 October',
    title: 'Application deadline',
    body: 'Submit your ranked list of schools. Most councils allow three to six preferences (London boroughs typically six). Councils treat all preferences equally, so list schools in the genuine order you want them, not strategically.',
    highlight: 'deadline',
    tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
  },
  {
    date: '1 March',
    title: 'National Offer Day',
    body: 'Your allocated school appears on the council\'s online admissions portal and is sent by email. Release times are set by each council (often from late afternoon, though some publish overnight), so check your council\'s page rather than refreshing at midnight.',
    highlight: 'offer',
    tool: { label: 'Look up your allocated school', href: '/' },
  },
  {
    date: '~15 March',
    title: 'Accept or decline',
    body: 'Respond by the deadline your council gives, typically around 15 March. Accepting does not prevent you from keeping a place on a waiting list for a preferred school.',
    tool: { label: 'Weigh your offer against your other choices', href: '/compare' },
  },
  {
    title: 'Appeals',
    body: 'If unsuccessful, you can appeal within 20 school days of the refusal letter. Secondary appeals consider whether prejudice to the school outweighs your case, and success rates vary.',
    tool: { label: 'Gather performance evidence for your case', href: '/rankings' },
  },
];

const PRIMARY_STEPS: Step[] = [
  {
    title: 'Research entry criteria',
    body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy on their website or the council\'s website.',
    callouts: [
      {
        title: 'Faith schools may need an extra form',
        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, in addition to the council application.',
      },
    ],
    tool: { label: 'Find schools & view their admissions history', href: '/' },
  },
  {
    date: 'September',
    title: 'Portal opens',
    body: 'Apply through your home council\'s portal, even if your preferred school is in another borough. Most councils accept applications from September.',
    tool: { label: 'Compare schools side by side', href: '/compare' },
  },
  {
    date: '15 January',
    title: 'Application deadline',
    body: 'List up to 3–6 schools (the number varies by council) in genuine preference order. The equal preference rule means all preferences are considered before any offers are made.',
    highlight: 'deadline',
    tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
  },
  {
    date: '16 April',
    title: 'National Offer Day',
    body: 'Results are published online. Reception offers are sent on 16 April (or the next working day if that falls on a weekend or bank holiday).',
    highlight: 'offer',
    tool: { label: 'Look up your allocated school', href: '/' },
  },
  {
    date: '~1 May',
    title: 'Accept or decline',
    body: 'Respond by your council\'s deadline, typically around 1 May. Accepting secures the place while you wait to see if a preferred school\'s waiting list moves.',
    tool: { label: 'Weigh your offer against your other choices', href: '/compare' },
  },
  {
    title: 'Appeals',
    body: 'Infant class-size appeals (Reception to Year 2) have a very narrow legal test and a low success rate. For Year 3+, appeals follow the same process as secondary.',
    tool: { label: 'Gather performance evidence for your case', href: '/rankings' },
  },
];

interface Tip {
  heading: string;
  body: string;
}

const TIPS: Tip[] = [
  {
    heading: 'Equal preference rule',
    body: 'Councils consider every school you list before making any offer, then give you the highest-ranked one you qualify for. Your order only decides which qualifying school you get. You can\'t game it, so list schools in the order you genuinely want them.',
  },
  {
    heading: 'Late applications go to the back',
    body: 'Submit before the deadline even if your child does not turn the required age until later in the year. Late applicants are only considered after all on-time applications.',
  },
  {
    heading: 'Waiting lists',
    body: 'You can go on waiting lists for multiple schools simultaneously. Lists are ordered by admissions criteria, not when you joined. They can move significantly over the summer.',
  },
];

/* ─── Component ────────────────────────────────────────── */

const NAV_ITEMS = [
  { id: 'primary',   label: 'Primary' },
  { id: 'secondary', label: 'Secondary' },
  { id: 'tips',      label: 'Tips' },
] as const;

type NavId = typeof NAV_ITEMS[number]['id'];

export function AdmissionsView() {
  const [chipDays, setChipDays] = useState<(number | null)[]>(CHIPS.map(() => null));
  const [activeId, setActiveId] = useState<NavId>('primary');

  useEffect(() => {
    setChipDays(CHIPS.map(c => daysUntil(c.month, c.day)));
  }, []);

  useEffect(() => {
    const sections = NAV_ITEMS
      .map(item => document.getElementById(item.id))
      .filter((el): el is HTMLElement => el !== null);

    if (sections.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) setActiveId(visible[0].target.id as NavId);
      },
      { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] },
    );

    sections.forEach(s => observer.observe(s));
    return () => observer.disconnect();
  }, []);

  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: NavId) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 16;
    window.scrollTo({ top, behavior: 'smooth' });
    setActiveId(id);
  };

  return (
    <div className={styles.shell}>

      {/* In-page nav — sticky left rail on desktop, sticky top pills on mobile */}
      <aside className={styles.nav} aria-label="On this page">
        <div className={styles.navLabel}>On this page</div>
        <ul className={styles.navList}>
          {NAV_ITEMS.map(item => {
            const isActive = activeId === item.id;
            return (
              <li key={item.id}>
                <a
                  href={`#${item.id}`}
                  onClick={(e) => handleNavClick(e, item.id)}
                  className={[styles.navLink, isActive ? styles.navLinkActive : ''].filter(Boolean).join(' ')}
                  aria-current={isActive ? 'true' : undefined}
                >
                  <span className={styles.navDot} aria-hidden="true" />
                  <span>{item.label}</span>
                </a>
              </li>
            );
          })}
        </ul>
      </aside>

      <div className={styles.page}>

      {/* Hero */}
      <section className={styles.hero}>
        <span className={styles.eyebrow}>
          <span className={styles.eyebrowDot} aria-hidden="true" />
          England · Primary &amp; Secondary
        </span>
        <h1 className={styles.heroTitle}>School Admissions Guide</h1>
        <p className={styles.heroSub}>
          Everything parents need to know about applying for a school place in England, from opening dates to National Offer Day, with live countdowns to every key milestone.
        </p>
      </section>

      {/* Countdown strip */}
      <section className={styles.countdownSection}>
        <div className={styles.stripHeader}>
          <span className={styles.stripLabel}>Days until next milestone</span>
        </div>
        <div className={styles.countdownRail}>
          {CHIPS.map((chip, i) => {
            const days = chipDays[i];
            const isUrgent = days !== null && days <= 14;
            const chipClass = [
              styles.chip,
              chip.type === 'deadline' ? styles.chipDeadline : styles.chipOffer,
              isUrgent ? styles.chipUrgent : '',
            ].filter(Boolean).join(' ');
            return (
              <div key={chip.milestone} className={chipClass}>
                <span className={[styles.chipTrack, chip.type === 'deadline' ? styles.chipTrackDeadline : styles.chipTrackOffer].join(' ')}>
                  <span className={styles.chipTrackDot} aria-hidden="true" />
                  {chip.track}
                </span>
                <div>
                  <span className={styles.chipDays}>{days === 0 ? 'Today' : (days ?? '—')}</span>
                  {days !== null && days > 0 && <span className={styles.chipDaysUnit}>days</span>}
                </div>
                <div className={styles.chipMilestone}>{chip.milestone}</div>
                <div className={styles.chipDate}>{days !== null ? fmtDate(chip.month, chip.day) : ''}</div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Primary track */}
      <section id="primary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
        <div className={styles.trackHeader}>
          <div className={styles.trackHeaderLeft}>
            <span className={styles.trackKicker}>Reception entry</span>
            <h2 className={styles.trackTitle}>Primary school admissions</h2>
            <p className={styles.trackSub}>For children starting Reception (Year R) in September. Applications are submitted in the autumn of the year before entry.</p>
          </div>
          <div className={styles.trackDates}>
            <div className={styles.trackDateRow}>
              <span className={styles.trackDateLabel}>Deadline</span>
              <span className={styles.trackDateVal}>{fmtDate(1, 15)}</span>
            </div>
            <div className={styles.trackDateRow}>
              <span className={styles.trackDateLabel}>Offer Day</span>
              <span className={styles.trackDateVal}>{fmtDate(4, 16)}</span>
            </div>
          </div>
        </div>

        <ol className={styles.timeline}>
          {PRIMARY_STEPS.map((step, i) => (
            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
              <div className={styles.stepDotCol}>
                <div className={styles.stepDot} />
                {i < PRIMARY_STEPS.length - 1 && <div className={styles.stepLine} />}
              </div>
              <div className={styles.stepContent}>
                {step.date && <div className={styles.stepDate}>{step.date}</div>}
                <div className={styles.stepTitle}>{step.title}</div>
                <p className={styles.stepBody}>{step.body}</p>
                {step.callouts && step.callouts.length > 0 && (
                  <div className={styles.calloutGroup}>
                    {step.callouts.map((c) => (
                      <div key={c.title} className={styles.callout}>
                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
                        <div className={styles.calloutText}>
                          <div className={styles.calloutTitle}>{c.title}</div>
                          <p className={styles.calloutBody}>{c.body}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
                {step.tool && (
                  <a
                    href={step.tool.href}
                    className={styles.stepTool}
                    data-umami-event="admissions_tool_clicked"
                    data-umami-event-target={step.tool.href}
                  >
                    {step.tool.label}
                    <span className={styles.stepToolArrow} aria-hidden="true">→</span>
                  </a>
                )}
              </div>
            </li>
          ))}
        </ol>
      </section>

      {/* Secondary track */}
      <section id="secondary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
        <div className={styles.trackHeader}>
          <div className={styles.trackHeaderLeft}>
            <span className={styles.trackKicker}>Year 7 entry</span>
            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
          </div>
          <div className={styles.trackDates}>
            <div className={styles.trackDateRow}>
              <span className={styles.trackDateLabel}>Deadline</span>
              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
            </div>
            <div className={styles.trackDateRow}>
              <span className={styles.trackDateLabel}>Offer Day</span>
              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
            </div>
          </div>
        </div>

        <ol className={styles.timeline}>
          {SECONDARY_STEPS.map((step, i) => (
            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
              <div className={styles.stepDotCol}>
                <div className={styles.stepDot} />
                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
              </div>
              <div className={styles.stepContent}>
                {step.date && <div className={styles.stepDate}>{step.date}</div>}
                <div className={styles.stepTitle}>{step.title}</div>
                <p className={styles.stepBody}>{step.body}</p>
                {step.callouts && step.callouts.length > 0 && (
                  <div className={styles.calloutGroup}>
                    {step.callouts.map((c) => (
                      <div key={c.title} className={styles.callout}>
                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
                        <div className={styles.calloutText}>
                          <div className={styles.calloutTitle}>{c.title}</div>
                          <p className={styles.calloutBody}>{c.body}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
                {step.tool && (
                  <a
                    href={step.tool.href}
                    className={styles.stepTool}
                    data-umami-event="admissions_tool_clicked"
                    data-umami-event-target={step.tool.href}
                  >
                    {step.tool.label}
                    <span className={styles.stepToolArrow} aria-hidden="true">→</span>
                  </a>
                )}
              </div>
            </li>
          ))}
        </ol>
      </section>

      {/* Tips */}
      <section id="tips" className={styles.tips} style={{ scrollMarginTop: '1rem' }}>
        <h2 className={styles.tipsHeading}>Three things most parents get wrong</h2>
        <div className={styles.tipsGrid}>
          {TIPS.map((tip, i) => (
            <div key={i} className={styles.tipCard}>
              <div className={styles.tipNumber}>{String(i + 1).padStart(2, '0')}</div>
              <h3 className={styles.tipHeading}>{tip.heading}</h3>
              <p className={styles.tipBody}>{tip.body}</p>
            </div>
          ))}
        </div>
      </section>

      </div>
    </div>
  );
}