import React from 'react';
import type { ScoreResult } from '../types';
import { getRiskEmoji } from '../engine/scoring';
import { BookingCTA } from './BookingCTA';
import { AlertTriangle } from 'lucide-react';
import styles from '../styles/results.module.css';

interface ResultsScreenProps {
  scoreResult: ScoreResult;
  consultantName: string;
  bookingUrl: string;
}

export const ResultsScreen: React.FC<ResultsScreenProps> = ({
  scoreResult,
  consultantName,
  bookingUrl,
}) => {
  const { percentage, riskBand, headline, categoryScores, weakestCategories } = scoreResult;

  // SVG circle calculations.
  const radius = 65;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (percentage / 100) * circumference;

  const bandColor: Record<string, string> = {
    critical: 'var(--noon-danger)',
    high: 'var(--noon-warning)',
    moderate: '#eab308',
    low: 'var(--noon-success)',
  };

  return (
    <div className={styles.results}>
      {/* ── Score Header ─────────────────────────────────────────────────── */}
      <div className={styles.scoreHeader}>
        <div className={styles.scoreCircle}>
          <svg className={styles.scoreCircleSvg} viewBox="0 0 160 160">
            <circle
              className={styles.scoreTrackCircle}
              cx="80"
              cy="80"
              r={radius}
            />
            <circle
              className={styles.scoreFillCircle}
              cx="80"
              cy="80"
              r={radius}
              stroke={bandColor[riskBand]}
              strokeDasharray={circumference}
              strokeDashoffset={offset}
            />
          </svg>
          <div className={styles.scoreValue}>
            <span className={styles.scoreNumber} style={{ color: bandColor[riskBand] }}>
              {percentage}
            </span>
            <span className={styles.scoreOutOf}>out of 100</span>
          </div>
        </div>

        <span className={`${styles.riskBadge} ${styles[riskBand]}`}>
          {getRiskEmoji(riskBand)} {headline.title}
        </span>
        <p className={styles.headlineText}>{headline.text}</p>
      </div>

      {/* ── Category Breakdown ───────────────────────────────────────────── */}
      <div className={styles.categorySection}>
        <h4 className={styles.categorySectionTitle}>Category Breakdown</h4>
        <div className={styles.categoryList}>
          {categoryScores.map((cat) => (
            <div key={cat.id} className={styles.categoryItem}>
              <div className={styles.categoryHeader}>
                <span className={styles.categoryName}>{cat.name}</span>
                <span className={styles.categoryPercent} style={{ color: cat.color }}>
                  {cat.score}%
                </span>
              </div>
              <div className={styles.categoryBar}>
                <div
                  className={styles.categoryBarFill}
                  style={{
                    width: `${cat.score}%`,
                    background: cat.color,
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Weakness Callout ──────────────────────────────────────────────── */}
      {weakestCategories.length > 0 && weakestCategories[0].score < 50 && (
        <div className={styles.weaknessCallout}>
          <div className={styles.weaknessTitle}>
            <AlertTriangle size={16} />
            Your biggest risks
          </div>
          <p className={styles.weaknessText}>
            Your weakest areas are <strong>{weakestCategories[0].name}</strong>
            {weakestCategories[1] && (
              <> and <strong>{weakestCategories[1].name}</strong></>
            )}
            . Addressing these first will have the highest impact on your overall health.
          </p>
        </div>
      )}

      {/* ── Booking CTA ──────────────────────────────────────────────────── */}
      <BookingCTA consultantName={consultantName} bookingUrl={bookingUrl} />
    </div>
  );
};