/* ===========================================================================
   Reporting showcase
   ---------------------------------------------------------------------------
   Cycles between two scenes — Dashboards and Reports — with a bold full-cover
   title card between each. Two distinct outputs from the same data layer.
   =========================================================================== */
function ScreenReporting() {
  // step: 0 = scene shown, 1 = cover-in, 2 = title held, 3 = cover-out + new scene
  const [step, setStep] = React.useState(0);
  const [scene, setScene] = React.useState(0); // 0 = dashboards, 1 = report
  const [animKey, setAnimKey] = React.useState(0); // re-trigger entrance anims

  React.useEffect(() => {
    const timings = [4200, 480, 1000, 520]; // ms per step
    const t = setTimeout(() => {
      setStep((s) => {
        const next = (s + 1) % 4;
        if (next === 3) {
          // swap scene at the moment the cover is fully up, then reveal it
          setScene((c) => 1 - c);
          setAnimKey((k) => k + 1);
        }
        return next;
      });
    }, timings[step]);
    return () => clearTimeout(t);
  }, [step]);

  const label = scene === 0
    ? 'Dashboards · Onboarding Survey'
    : 'Reports · Anyco Homes · Employee Onboarding';

  // Title text describes the scene that is *about* to appear (i.e., the next scene)
  // step 1 (cover-in) and 2 (held): cover is rising over current scene -> show "next" title for the upcoming swap
  const upcoming = 1 - scene; // the scene about to be revealed (during step 3 it's already swapped, so this becomes wrong)
  // Simpler: pick title from current step. During steps 1 & 2 we still show current scene under cover; during step 3 the new scene is under.
  // For UX, we want the title to *announce* the new scene. So title corresponds to the scene that will be / is now shown after swap.
  const titleScene = step === 3 ? scene : 1 - scene;
  const nextTitle = titleScene === 0 ? 'Dashboards.' : 'Reports.';

  const titleVisible = step === 2;

  const sceneHidden = step === 1 || step === 2;
  const sceneEntering = step === 3;

  return (
    <FSFrame label={label}>
      <div className="relative h-full overflow-hidden bg-slate-50">
        <style>{`
          @keyframes scene-pop-in {
            from { opacity: 0; transform: scale(1.04); }
            to   { opacity: 1; transform: scale(1); }
          }
          @media (prefers-reduced-motion: reduce) {
            .scene-wrap { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
          }
        `}</style>

        {/* Scene */}
        <div
          key={animKey}
          className="scene-wrap h-full"
          style={{
            opacity: sceneHidden ? 0 : 1,
            transform: sceneHidden ? 'scale(0.92)' : 'scale(1)',
            transition: 'opacity 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1)',
            transformOrigin: 'center center',
            animation: sceneEntering ? 'scene-pop-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both' : 'none',
          }}
        >
          {scene === 0 ? <DashboardScene /> : <ReportScene />}
        </div>

        {/* Single-word title — integrated with the scene background, no overlay */}
        <div
          className="absolute inset-0 flex items-center justify-center pointer-events-none"
          aria-hidden={!titleVisible}
        >
          <h3
            className="text-[24px] sm:text-[38px] lg:text-[42px] leading-[1.08] font-bold text-slate-900 tracking-tight"
            style={{
              opacity: titleVisible ? 1 : 0,
              transform: titleVisible ? 'translateY(0) scale(1)' : 'translateY(10px) scale(0.96)',
              transition: 'opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1)',
            }}
          >
            {nextTitle}
          </h3>
        </div>
      </div>
    </FSFrame>
  );
}

/* ---------------------------------------------------------------------------
   Scene 1 — Dashboards
   --------------------------------------------------------------------------- */
function DashboardScene() {
  const scoring = [
    ['Onboarding process satisfaction', 57.9, 31.6, 5.3,  5.3, 0],
    ['Equipment provided',              57.9, 21.1, 15.8, 5.3, 0],
    ['Values, mission, culture',        47.4, 15.8, 15.8, 21.1, 0],
    ['Training satisfaction',           57.9, 31.6, 10.5, 0,   0],
    ['Colleagues welcoming',            78.9, 15.8, 5.3,  0,   0],
  ];
  // Match the live product palette (vibrant green → lime → amber → orange → dark red)
  const colours = ['#3da639', '#a3d342', '#f0c040', '#ef6c00', '#a31515'];

  return (
    <div className="p-4 sm:p-5 bg-slate-50 h-full">
      <style>{`
        @keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes donut-sweep { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--end); } }
        .ds-bar { transform-origin: left center; animation: bar-grow 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
        .ds-card { animation: fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }
        .ds-donut circle.fg { animation: donut-sweep 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .ds-bar, .ds-card, .ds-donut circle.fg { animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; }
        }
      `}</style>

      <div className="grid grid-cols-5 gap-3">
        {/* Scoring questions — stacked bars */}
        <div className="col-span-3 rounded-lg bg-white border border-slate-200 shadow-card overflow-hidden ds-card" style={{ animationDelay: '0ms' }}>
          <div className="px-3 py-2 bg-blue-600 text-white text-[11px] font-semibold tracking-tight">
            Onboarding Survey Scoring Questions
          </div>
          <div className="p-3 space-y-2">
            {scoring.map(([label, vp, p, n, vn, neu], rowIdx) => (
              <div key={label} className="flex items-center gap-2">
                <span className="w-[88px] text-[9.5px] text-slate-600 leading-tight">{label}</span>
                <div className="flex-1 h-3.5 rounded overflow-hidden flex bg-slate-100">
                  {[vp, p, neu, n, vn].map((v, i) => v > 0 && (
                    <div
                      key={i}
                      className="ds-bar h-full flex items-center justify-center text-[8px] font-bold text-white"
                      style={{ width: v + '%', backgroundColor: colours[i], animationDelay: (160 + rowIdx * 90) + 'ms' }}
                    >
                      {v >= 10 ? v + '%' : ''}
                    </div>
                  ))}
                </div>
              </div>
            ))}
            <div className="pt-2 flex flex-wrap gap-2 text-[8.5px] font-medium text-slate-600">
              {['Very positive', 'Positive', 'Neutral', 'Negative', 'Very negative'].map((l, i) => (
                <span key={l} className="inline-flex items-center gap-1">
                  <span className="h-2 w-2 rounded-full" style={{ backgroundColor: colours[i] }} />
                  {l}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Response rate dial */}
        <div className="col-span-1 rounded-lg bg-white border border-slate-200 shadow-card overflow-hidden ds-card" style={{ animationDelay: '80ms' }}>
          <div className="px-3 py-2 bg-blue-600 text-white text-[11px] font-semibold">Response Rate</div>
          <div className="p-3 flex flex-col items-center justify-center h-[calc(100%-30px)]">
            <DonutDial value={100} delay={300} />
            <div className="text-[10px] font-semibold text-slate-600 mt-1">Q3 pulse</div>
          </div>
        </div>

        {/* Understand role donut */}
        <div className="col-span-1 rounded-lg bg-white border border-slate-200 shadow-card overflow-hidden ds-card" style={{ animationDelay: '160ms' }}>
          <div className="px-3 py-2 bg-blue-600 text-white text-[11px] font-semibold leading-tight">Understand Role</div>
          <div className="p-3 flex flex-col items-center justify-center h-[calc(100%-30px)]">
            <DonutSplit yes={89.5} delay={400} />
            <div className="mt-1 flex gap-1.5 text-[8.5px] font-medium text-slate-600">
              <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-full" style={{ backgroundColor: '#3da639' }} />Yes</span>
              <span className="inline-flex items-center gap-1"><span className="h-2 w-2 rounded-full" style={{ backgroundColor: '#a31515' }} />No</span>
            </div>
          </div>
        </div>
      </div>

      {/* Lower row — three small charts */}
      <div className="mt-3 grid grid-cols-3 gap-3">
        {[
          { label: 'Informed During Onboarding', yes: 89.5, delay: 240 },
          { label: 'Introduced To Team',          yes: 89.5, delay: 320 },
          { label: 'Supported By Manager',        yes: 89.5, delay: 400 },
        ].map((c, i) => (
          <div key={c.label} className="rounded-lg bg-white border border-slate-200 shadow-card overflow-hidden ds-card" style={{ animationDelay: c.delay + 'ms' }}>
            <div className="px-2.5 py-1.5 bg-blue-600 text-white text-[10px] font-semibold leading-tight truncate">{c.label}</div>
            <div className="p-2 flex items-center justify-center">
              <DonutSplit yes={c.yes} size={54} stroke={9} delay={c.delay + 200} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DonutDial({ value = 100, delay = 0 }) {
  const r = 26, c = 2 * Math.PI * r;
  const dash = (value / 100) * c;
  return (
    <svg width="72" height="72" viewBox="0 0 72 72" className="block ds-donut" aria-hidden="true">
      <circle cx="36" cy="36" r={r} fill="none" stroke="#e2e8f0" strokeWidth="8" />
      <circle
        className="fg"
        cx="36" cy="36" r={r} fill="none" stroke="#3da639" strokeWidth="8" strokeLinecap="round"
        strokeDasharray={c}
        transform="rotate(-90 36 36)"
        style={{ '--c': c, '--end': c - dash, animationDelay: delay + 'ms' }}
      />
      <text x="36" y="40" textAnchor="middle" fontSize="13" fontWeight="800" fill="#0f172a">{value}%</text>
    </svg>
  );
}

function DonutSplit({ yes = 89.5, size = 64, stroke = 10, delay = 0 }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const yesDash = (yes / 100) * c;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block ds-donut" aria-hidden="true">
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#a31515" strokeWidth={stroke} />
      <circle
        className="fg"
        cx={size/2} cy={size/2} r={r} fill="none" stroke="#3da639" strokeWidth={stroke}
        strokeDasharray={c}
        transform={`rotate(-90 ${size/2} ${size/2})`}
        style={{ '--c': c, '--end': c - yesDash, animationDelay: delay + 'ms' }}
      />
      <text x={size/2} y={size/2 + 3} textAnchor="middle" fontSize={size >= 64 ? 11 : 9} fontWeight="800" fill="#0f172a">{yes}%</text>
    </svg>
  );
}

/* ---------------------------------------------------------------------------
   Scene 2 — Report (Word/PDF preview)
   --------------------------------------------------------------------------- */
function ReportScene() {
  return (
    <div className="p-4 sm:p-5 bg-slate-50 h-full">
      <style>{`
        @keyframes rs-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rs-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        .rs-doc { animation: rs-up 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }
        .rs-side { animation: rs-up 520ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 120ms; }
        .rs-bar { transform-origin: left center; animation: rs-bar 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
        @media (prefers-reduced-motion: reduce) {
          .rs-doc, .rs-side, .rs-bar { animation: none !important; transform: none !important; }
        }
      `}</style>

      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="text-[12px] font-semibold text-slate-900">Employee Onboarding Report</div>
          <span className="inline-flex items-center text-[9px] uppercase tracking-wider font-bold text-slate-500 bg-white border border-slate-200 rounded-full px-2 py-0.5">10 items</span>
        </div>
        <div className="flex items-center gap-1.5">
          <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-slate-700 bg-white border border-slate-200 rounded px-2 py-1">
            <IconFileText size={11} />
            Word
          </span>
          <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-white bg-blue-600 rounded px-2 py-1 shadow-card">
            <IconFileText size={11} />
            PDF
          </span>
        </div>
      </div>

      <div className="grid grid-cols-5 gap-3 h-[calc(100%-32px)]">
        {/* Document preview — 4 cols */}
        <div className="col-span-4 rounded-lg bg-white shadow-cardlg border border-slate-200 p-4 overflow-hidden rs-doc">
          <div className="text-[14px] font-bold text-blue-700 border-b border-blue-200 pb-1.5">
            Anyco Homes Employee Onboarding Report
          </div>
          <div className="mt-1.5 text-[9px] text-slate-500 leading-tight">
            John Smith<br/>10/02/26
          </div>
          <p className="mt-2 text-[9.5px] leading-snug text-slate-700">
            The onboarding survey findings indicate a generally positive experience for new employees. Overall satisfaction with the onboarding process is strong, with 89.5% of respondents rating it positively. Equipment provision scored well at 79% positive, although 21.1% expressed negative views. The lowest-rated area was values, mission and culture.
          </p>

          {/* Embedded chart */}
          <div className="mt-2.5 rounded border border-slate-200 overflow-hidden">
            <div className="px-2 py-1 bg-blue-600 text-white text-[9px] font-semibold">Onboarding Survey Scoring Questions</div>
            <div className="p-2 space-y-1.5">
              {[
                ['Onboarding process', 57.9, 31.6, 10.5],
                ['Equipment provided', 57.9, 21.1, 21.0],
                ['Values & culture',   47.4, 15.8, 36.8],
                ['Training',           57.9, 31.6, 10.5],
                ['Welcoming',          78.9, 15.8, 5.3],
              ].map(([label, a, b, c], idx) => (
                <div key={label} className="flex items-center gap-1.5">
                  <span className="w-[68px] text-[8px] text-slate-600 leading-tight">{label}</span>
                  <div className="flex-1 h-2 rounded overflow-hidden flex bg-slate-100">
                    <div className="rs-bar h-full" style={{ width: a + '%', backgroundColor: '#3da639', animationDelay: (260 + idx * 80) + 'ms' }} />
                    <div className="rs-bar h-full" style={{ width: b + '%', backgroundColor: '#a3d342', animationDelay: (260 + idx * 80) + 'ms' }} />
                    <div className="rs-bar h-full" style={{ width: c + '%', backgroundColor: '#ef6c00', animationDelay: (260 + idx * 80) + 'ms' }} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="mt-2.5 text-[10px] font-bold text-slate-900">Summary</div>
          <p className="mt-0.5 text-[9px] leading-snug text-slate-700">
            Onboarding feedback is strongly positive, especially for welcoming colleagues and training quality. The main improvement area is clearer communication of company values, mission and culture.
          </p>
        </div>

        {/* Side panel — AI summary + add content */}
        <div className="col-span-1 flex flex-col gap-2 min-h-0 rs-side">
          <div className="rounded-lg p-2.5 text-slate-100" style={{ background: 'linear-gradient(135deg, #0b3d91 0%, #0f172a 100%)' }}>
            <div className="flex items-center gap-1 text-[9px] uppercase tracking-wider font-semibold text-blue-300 mb-1">
              <IconSparkles size={10} />
              <span>AI summary</span>
            </div>
            <p className="text-[9px] leading-snug text-slate-200">
              <strong className="text-white">Three themes</strong>: welcome experience, equipment gaps, and culture comms.
            </p>
          </div>
          <div className="rounded-lg bg-white border border-slate-200 p-2.5 flex-1 shadow-card">
            <div className="text-[9px] uppercase tracking-wider font-semibold text-slate-500 mb-1.5">Add content</div>
            <div className="space-y-1">
              {[
                ['Headline', 'H'],
                ['Paragraph', 'P'],
                ['Chart', '⌳'],
              ].map(([l, g]) => (
                <div key={l} className="flex items-center gap-1.5 rounded border border-slate-200 px-1.5 py-1 hover:border-blue-300 transition-colors">
                  <span className="inline-flex items-center justify-center h-3.5 w-3.5 rounded bg-blue-50 text-[8px] font-bold text-blue-700">{g}</span>
                  <span className="text-[9px] font-medium text-slate-700">{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Survey form mock used inside the laptop + phone in the messaging scene.
   Renders the 1-10 motivation question from the product. The `compact` flag
   tightens spacing for the phone where vertical room is short. */