import type { CSSProperties } from 'react';
import type { Content } from '@/content';
import { priorityComplement, scoreFor, weakest, type Profile } from '@/lib/scoring';
import { Monogram } from './ArchetypeCard';
import { BandLegend, ProfileChart } from './ProfileChart';

function Section({ num, title, children, breakBefore = false }: {
  num: number;
  title: string;
  children: React.ReactNode;
  breakBefore?: boolean;
}) {
  return (
    <section className={breakBefore ? 'report-section page-break' : 'report-section'}>
      <h2>
        <span className="section-num">{String(num).padStart(2, '0')}</span>
        {title}
      </h2>
      {children}
    </section>
  );
}

export function FullReport({ profile, content, issuedOn }: { profile: Profile; content: Content; issuedOn: string }) {
  const { archetypes } = content;
  const lead = archetypes[profile.lead];
  const support = archetypes[profile.supporting];
  const priorityId = priorityComplement(profile, lead.complements);
  const priority = archetypes[priorityId];
  const gaps = weakest(profile, 3);
  const gapIds = new Set(gaps.map((g) => g.id));
  const loop = [...content.archetypeList].sort((a, b) => a.loop.step - b.loop.step);
  const trios = content.teamTrios.filter((t) => t.members.includes(lead.id));
  const accent = { '--c': lead.color } as CSSProperties;

  return (
    <article className="report" style={accent}>
      <header className="report-cover" style={accent}>
        <span className="eyebrow">EntreJourneyMap · VIP Ark Blueprint</span>
        <h1 style={{ marginBottom: '0.75rem' }}>
          You lead as the {lead.name}
          {profile.isBlended ? `, with a strong ${support.name} blend` : ''}.
        </h1>
        <p style={{ fontSize: '1.15rem', maxWidth: '60ch' }}>{lead.core}</p>
        <p className="small" style={{ marginBottom: 0 }}>
          Issued {issuedOn} · Supporting archetype: {support.name}
        </p>
      </header>

      <Section num={1} title="Your archetype map">
        <div className="split">
          <div className="card">
            <ProfileChart profile={profile} content={content} />
          </div>
          <div>
            <p>
              Your map shows how strongly each of the eight entrepreneurial contributions showed up in your answers,
              relative to your lead archetype. It describes what you do naturally, not what you are capable of learning.
            </p>
            {profile.isBlended && (
              <p className="notice">
                Your top two archetypes scored very closely. Treat {lead.name} and {support.name} as a blended lead
                and watch which one shows up most in your next three projects.
              </p>
            )}
            <BandLegend content={content} />
          </div>
        </div>
      </Section>

      <Section num={2} title={`Your lead: the ${lead.name}`}>
        <div className="split">
          <div className="kv">
            <div>
              <h4>Core contribution</h4>
              <p>{lead.core}</p>
            </div>
            <div>
              <h4>At your best</h4>
              <p>{lead.atBest}</p>
            </div>
            <div>
              <h4>Under pressure</h4>
              <p>{lead.underPressure}</p>
            </div>
            <div>
              <h4>The predictable cost if left unbalanced</h4>
              <p>{lead.predictableCost}</p>
            </div>
          </div>
          <div className="card">
            <div className="kv">
              <div>
                <h4>Strengths</h4>
                <ul className="list-check">
                  {lead.strengths.map((s) => (
                    <li key={s}>{s}</li>
                  ))}
                </ul>
              </div>
              <div>
                <h4>Watch-outs</h4>
                <ul className="list-dot" style={{ '--c': 'var(--danger)' } as CSSProperties}>
                  {lead.watchOuts.map((s) => (
                    <li key={s}>{s}</li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </Section>

      <Section num={3} title={`Your supporting archetype: the ${support.name}`}>
        <div className="card" style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
          <Monogram archetype={support} />
          <div>
            <p>
              Your {support.name} side adds {support.asSupport}. It shapes <em>how</em> you lead as a {lead.name}: it
              is often the difference between you and other {lead.name}s.
            </p>
            <p style={{ marginBottom: 0 }}>
              <strong>Draw on it for:</strong> {support.strengths[0].toLowerCase()}.{' '}
              <strong>Watch for:</strong> {support.watchOuts[0].toLowerCase()}.
            </p>
          </div>
        </div>
      </Section>

      <Section num={4} title="Your complement zone" breakBefore>
        <p>
          The {lead.name} works best alongside {lead.complementNote}. In your profile, the{' '}
          <strong>{priority.name}</strong> scores lower ({content.bands[scoreFor(profile, priorityId).band].label}), so it
          is the complement most likely to unlock your next stage of growth.
        </p>
        <div className="card unlock-card" style={{ marginBottom: '1.25rem' }}>
          <span className="eyebrow">Your priority complement</span>
          <h3 style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
            <Monogram archetype={priority} /> {priority.name}: {priority.tagline}
          </h3>
          <p>{priority.core}</p>
          <p style={{ marginBottom: 0 }}>
            <strong>Look for someone who has already shown:</strong> {priority.strengths.join('; ').toLowerCase()}.
            They could be a co-founder, colleague, contractor, mentor or future hire. You do not need eight employees,
            but every essential contribution needs an owner.
          </p>
        </div>
        <h3>Your three least natural archetypes</h3>
        <div className="grid grid-3">
          {gaps.map((g) => {
            const a = archetypes[g.id];
            return (
              <div key={a.id} className="card" style={{ borderTop: `4px solid ${a.color}` }}>
                <h4>{a.name}</h4>
                <p className="small" style={{ marginBottom: 0 }}>
                  {a.core}
                </p>
              </div>
            );
          })}
        </div>
        <p className="small muted" style={{ marginTop: '1rem' }}>
          A lower score is not a flaw. It shows where a partner, colleague, contractor or future hire can add value.
        </p>
      </Section>

      <Section num={5} title="Keep · Delegate · Design">
        <div className="kdd">
          <div className="card">
            <h3>Keep</h3>
            <p className="small muted">The contribution where your judgment creates unusual value.</p>
            <p style={{ marginBottom: 0 }}>{lead.keep}</p>
          </div>
          <div className="card">
            <h3>Delegate</h3>
            <p className="small muted">Work someone else can own with clear authority and standards.</p>
            <p style={{ marginBottom: 0 }}>{lead.delegate}</p>
          </div>
          <div className="card">
            <h3>Design</h3>
            <p className="small muted">A simple system that lets good work repeat without constant rescue.</p>
            <p style={{ marginBottom: 0 }}>{lead.design}</p>
          </div>
        </div>
      </Section>

      <Section num={6} title="Your entrepreneurial loop">
        <p>
          Businesses move from idea to durable growth through eight contributions. Steps owned by your lowest-scoring
          archetypes are where momentum is most likely to break, unless someone else owns them.
        </p>
        <ol className="loop">
          {loop.map((a) => {
            const isGap = gapIds.has(a.id);
            const isYou = a.id === lead.id;
            return (
              <li key={a.id} className={isGap ? 'is-gap' : undefined} style={{ borderTop: `4px solid ${a.color}` }}>
                <div className="loop-step">STEP {a.loop.step}</div>
                <div className="loop-name">
                  {a.name}
                  {isYou ? ' (you)' : ''}
                </div>
                <div className="loop-verb">{a.loop.verb}</div>
                {isGap && <div className="loop-flag">Needs an owner</div>}
              </li>
            );
          })}
        </ol>
        {trios.length > 0 && (
          <>
            <h3 style={{ marginTop: '2rem' }}>Teams you anchor</h3>
            <div className="grid grid-2">
              {trios.map((t) => (
                <div key={t.title} className="card">
                  <h4>{t.title}</h4>
                  <div className="chips">
                    {t.members.map((m) => (
                      <span
                        key={m}
                        className={m === lead.id ? 'chip is-you' : 'chip'}
                        style={{ '--c': archetypes[m].color } as CSSProperties}
                      >
                        {archetypes[m].name}
                      </span>
                    ))}
                  </div>
                  <p className="small" style={{ marginBottom: 0 }}>
                    {t.text}
                  </p>
                </div>
              ))}
            </div>
          </>
        )}
      </Section>

      <Section num={7} title="Your 30-day action plan" breakBefore>
        <p>Treat the next month as a practical experiment, not a permanent identity test.</p>
        <ol className="plan">
          {content.planPhases.map((phase, i) => (
            <li key={phase.days} className="card">
              <span className="plan-days">{phase.days}</span>
              <div>
                <span className="plan-title">{phase.title}</span>
                <span className="muted">{phase.base}</span>
                <div className="plan-you">
                  <strong>As a {lead.name}:</strong> {lead.plan[i]}
                </div>
              </div>
            </li>
          ))}
        </ol>
        <div className="card" style={{ marginTop: '1rem' }}>
          <div className="grid grid-3">
            <div>
              <h4>One result</h4>
              <span className="write-lines" style={{ display: 'block', height: '3rem' }} />
            </div>
            <div>
              <h4>Evidence / metric</h4>
              <span className="write-lines" style={{ display: 'block', height: '3rem' }} />
            </div>
            <div>
              <h4>My first action within 24 hours</h4>
              <span className="write-lines" style={{ display: 'block', height: '3rem' }} />
            </div>
          </div>
        </div>
      </Section>

      <Section num={8} title="Reflection">
        <ol className="prompts">
          {content.reflectionPrompts.map((p) => (
            <li key={p}>
              <strong>{p}</strong>
              <div className="write-lines" />
            </li>
          ))}
        </ol>
      </Section>

      <Section num={9} title="Your complementary-team plan" breakBefore>
        <p>One person may cover several contributions. Every essential contribution still needs an owner.</p>
        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Business need</th>
                <th scope="col">Natural lead</th>
                <th scope="col">Your profile</th>
                <th scope="col">Current owner</th>
                <th scope="col">Next move</th>
              </tr>
            </thead>
            <tbody>
              {content.teamNeeds.map((row) => (
                <tr key={row.need}>
                  <td>{row.need}</td>
                  <td>{archetypes[row.lead].name}</td>
                  <td>{content.bands[scoreFor(profile, row.lead).band].label}</td>
                  <td>
                    <span className="fill-line" />
                  </td>
                  <td>
                    <span className="fill-line" />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="small muted" style={{ marginTop: '0.75rem' }}>
          Agree the outcome, authority, deadline, boundaries and check-in rhythm. Delegation without clarity is
          abandonment; clarity creates trust.
        </p>
      </Section>

      <Section num={10} title="Seven principles to work by">
        <div className="grid grid-2">
          {content.principles.map((p, i) => (
            <div key={p.title} className="card">
              <h4>
                <span className="section-num" style={{ minWidth: '1.8rem' }}>
                  {i + 1}
                </span>
                {p.title}
              </h4>
              <p className="small">{p.text}</p>
              <p className="small" style={{ marginBottom: 0 }}>
                <strong>Try this:</strong> {p.tryThis}
              </p>
            </div>
          ))}
        </div>
      </Section>

      <Section num={11} title="Read and watch">
        <div className="grid grid-2">
          <div className="card">
            <span className="eyebrow">Strengthen your lead</span>
            <h3>{lead.book.title}</h3>
            <p className="muted small">{lead.book.author}</p>
            <p style={{ marginBottom: 0 }}>{lead.book.why}</p>
          </div>
          <div className="card">
            <span className="eyebrow">Develop your complement</span>
            <h3>{priority.book.title}</h3>
            <p className="muted small">{priority.book.author}</p>
            <p style={{ marginBottom: 0 }}>{priority.book.why}</p>
          </div>
        </div>
        <h3 style={{ marginTop: '2rem' }}>Film study</h3>
        <p>Watch for the business system behind the story, not just the hero.</p>
        <div className="grid grid-2">
          {content.films.map((f) => (
            <div key={f.title} className="card">
              <h4>
                {f.title} ({f.year})
              </h4>
              <p className="small" style={{ marginBottom: 0 }}>
                {f.lens}
              </p>
            </div>
          ))}
        </div>
        <p className="small muted" style={{ marginTop: '1rem' }}>
          {content.filmQuestions}
        </p>
      </Section>

      <section className="report-section">
        <div className="notice">
          <strong>Closing thought.</strong> You do not need to become all eight. Know your strongest contribution, take
          responsibility for it, and build the relationships and systems that complete what you begin.
        </div>
        <p className="small muted" style={{ marginTop: '1rem' }}>
          {content.disclaimer}
        </p>
      </section>
    </article>
  );
}