import type { CSSProperties } from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Monogram } from '@/components/ArchetypeCard';
import { CopyLinkButton } from '@/components/ClientButtons';
import { EmailCapture } from '@/components/EmailCapture';
import { InvalidResult } from '@/components/InvalidResult';
import { BandLegend, ProfileChart } from '@/components/ProfileChart';
import { VipTicket } from '@/components/VipTicket';
import { getContent } from '@/content';
import { decodeAnswers } from '@/lib/code';
import { scoreProfile } from '@/lib/scoring';

export const metadata: Metadata = {
  title: 'Your result',
  robots: { index: false, follow: false },
};

type SearchParams = Promise<Record<string, string | string[] | undefined>>;

export default async function ResultPage({ searchParams }: { searchParams: SearchParams }) {
  const { c } = await searchParams;
  const code = typeof c === 'string' ? c : '';
  const content = getContent();
  const answers = decodeAnswers(content.questions, code);
  if (!answers) return <InvalidResult />;

  const profile = scoreProfile(content.questions, answers);
  const lead = content.archetypes[profile.lead];
  const support = content.archetypes[profile.supporting];
  const complements = lead.complements.map((id) => content.archetypes[id]);
  const { vip } = content;

  return (
    <>
      <section className="result-hero" style={{ '--c': lead.color } as CSSProperties}>
        <div className="container">
          <Monogram archetype={lead} large />
          <span className="eyebrow" style={{ display: 'block' }}>
            Your EntreJourneyMap result
          </span>
          <h1>
            You lead as the <span>{lead.name}</span>.
          </h1>
          <p className="aliases">{lead.aliases.join(' · ')}</p>
          <p className="lede">{lead.core}</p>
          <div className="btn-row" style={{ marginTop: '1rem' }}>
            <span className="pill">Supporting archetype: {support.name}</span>
            {profile.isBlended && <span className="pill">Blended profile</span>}
          </div>
          {profile.isBlended && (
            <p className="notice" style={{ marginTop: '1.25rem', maxWidth: '62ch' }}>
              Your top two archetypes scored very closely, so you have a blended {lead.name}/{support.name} profile.
              Over the next 30 days, notice which one shows up most in your best work.
            </p>
          )}
        </div>
      </section>

      <section className="section-tight">
        <div className="container split">
          <div className="card">
            <h2 style={{ fontSize: '1.5rem' }}>Your archetype map</h2>
            <ProfileChart profile={profile} content={content} />
            <BandLegend content={content} />
          </div>
          <div className="card">
            <div className="kv">
              <div>
                <h4>Your strengths</h4>
                <ul className="list-check">
                  {lead.strengths.map((s) => (
                    <li key={s}>{s}</li>
                  ))}
                </ul>
              </div>
              <div>
                <h4>Your biggest watch-out</h4>
                <p style={{ marginBottom: 0 }}>{lead.watchOuts[0]}.</p>
              </div>
              <div>
                <h4>Your best complements</h4>
                <p style={{ marginBottom: 0 }}>
                  {complements.map((a) => a.name).join(' + ')}: {lead.complementNote}.
                </p>
              </div>
              <div>
                <h4>Your move this week</h4>
                <p style={{ marginBottom: 0 }}>{lead.moveThisWeek}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" id="unlock">
        <div className="container split items-center">
          <div>
            <span className="eyebrow">{vip.circleName}</span>
            <h2>{vip.question}</h2>
            <p className="lede">
              You know you lead as the {lead.name}. Your {vip.ticketName} gives you the {vip.sessionName}, your first
              four steps to a paying business, and your {vip.blueprintName}: a personal plan written for the{' '}
              {lead.name}.
            </p>
            <ul className="list-check" style={{ marginTop: '1.25rem' }}>
              {vip.sessionSteps.map((step) => (
                <li key={step.title}>
                  <strong>{step.title}:</strong> {step.text.charAt(0).toLowerCase() + step.text.slice(1)}
                </li>
              ))}
            </ul>
            <p className="small muted" style={{ marginTop: '1.25rem' }}>
              Already have your ticket? Use the private link from your purchase.{' '}
              <Link href={`/report?c=${code}`}>See what's in the {vip.blueprintName}</Link>
            </p>
          </div>
          <VipTicket code={code} leadName={lead.name} />
        </div>
      </section>

      <section className="section-tight">
        <div className="container split">
          <div className="card">
            <h3>Save your result</h3>
            <p className="muted">Get a link to this result by email so you can come back to it on any device.</p>
            <EmailCapture
              source="result"
              resultCode={code}
              buttonLabel="Email me my result"
              consentText="Send me my result and occasional EntreJourneyMap updates. I can unsubscribe at any time."
              successText="Saved. We'll email your result link shortly."
            />
          </div>
          <div className="card">
            <h3>Share or retake</h3>
            <p className="muted">
              Ask a co-founder or colleague to take the assessment, then compare maps to spot which roles nobody owns.
            </p>
            <div className="btn-row">
              <CopyLinkButton label="Copy result link" />
              <Link href="/assessment" className="btn btn-ghost btn-sm">
                Retake your assessment
              </Link>
              <Link href={`/archetypes/${lead.id}`} className="btn btn-ghost btn-sm">
                Read the full {lead.name} profile
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}