import {
  ShieldCheck,
  Clock3,
  ClipboardList,
  CheckCircle2,
  Lightbulb,
} from "lucide-react";
import styles from "./CrewExamComponents.module.css";

interface Props {
  durationMinutes: number;
  totalQuestions: number;
  passingScore: number;
}

export default function ExamRunningSidebar({
  durationMinutes,
  totalQuestions,
  passingScore,
}: Props) {
  return (
    <aside className={styles.runningSidebar}>
      {/* 1. Motivational Mountain Quote Card */}
      <div className={styles.sidebarMotivationCard}>
        {/* Stylized Mountain Peaks SVG */}
        <div className={styles.sidebarMtnArtwork} aria-hidden="true">
          <svg
            viewBox="0 0 240 90"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className={styles.sidebarMtnSvg}
          >
            {/* Distant Misty Mountain */}
            <path
              d="M10 85 L85 30 L115 52 L170 12 L230 85 Z"
              fill="#e2efe5"
              fillOpacity="0.8"
            />
            {/* Mid Mountain with Shading */}
            <path
              d="M30 85 L95 38 L140 70 L195 24 L240 85 Z"
              fill="#c5e3cc"
              fillOpacity="0.7"
            />
            {/* Foreground Crisp Ridge */}
            <path
              d="M0 88 L55 58 L110 88 L160 45 L215 88 Z"
              fill="#269436"
              fillOpacity="0.85"
            />
            {/* Foreground Peak Shadow */}
            <path
              d="M55 58 L110 88 L160 45 Z"
              fill="#1b6325"
              fillOpacity="0.3"
            />
          </svg>
        </div>

        {/* Serif Italic Quote */}
        <p className={styles.sidebarQuote}>
          &ldquo;Pengetahuan Hari Ini,
          <br />
          Penyelamatan Esok Hari&rdquo;
        </p>
        <span className={styles.sidebarQuoteUnderline} aria-hidden="true" />
      </div>

      {/* 2. Container Card: Focus Notice + Exam Info + Tips */}
      <div className={styles.sidebarDetailsCard}>
        {/* Focus Notice Box */}
        <div className={styles.focusNoticeBox}>
          <ShieldCheck size={22} className={styles.focusNoticeIcon} aria-hidden />
          <div className={styles.focusNoticeText}>
            <h3 className={styles.focusNoticeTitle}>Kerjakan dengan Fokus</h3>
            <p className={styles.focusNoticeDesc}>
              Setiap jawaban yang Anda pilih berkontribusi pada keselamatan dan
              kenyamanan peserta di masa depan.
            </p>
          </div>
        </div>

        {/* Exam Quick Specs */}
        <div className={styles.sidebarSpecsList}>
          {/* Durasi Ujian */}
          <div className={styles.sidebarSpecItem}>
            <Clock3 size={20} className={styles.sidebarSpecIcon} aria-hidden />
            <div className={styles.sidebarSpecText}>
              <span className={styles.sidebarSpecLabel}>Durasi Ujian</span>
              <strong className={styles.sidebarSpecValue}>
                {durationMinutes} menit
              </strong>
            </div>
          </div>

          {/* Jumlah Soal */}
          <div className={styles.sidebarSpecItem}>
            <ClipboardList size={20} className={styles.sidebarSpecIcon} aria-hidden />
            <div className={styles.sidebarSpecText}>
              <span className={styles.sidebarSpecLabel}>Jumlah Soal</span>
              <strong className={styles.sidebarSpecValue}>
                {totalQuestions} soal
              </strong>
            </div>
          </div>

          {/* Passing Score */}
          <div className={styles.sidebarSpecItem}>
            <CheckCircle2 size={20} className={styles.sidebarSpecIcon} aria-hidden />
            <div className={styles.sidebarSpecText}>
              <span className={styles.sidebarSpecLabel}>Passing Score</span>
              <strong className={styles.sidebarSpecValue}>{passingScore}</strong>
            </div>
          </div>
        </div>

        {/* Tips Box */}
        <div className={styles.tipsBox}>
          <Lightbulb size={20} className={styles.tipsIcon} aria-hidden />
          <div className={styles.tipsText}>
            <h3 className={styles.tipsTitle}>Tips</h3>
            <p className={styles.tipsDesc}>
              Baca setiap pertanyaan dengan teliti dan pilih jawaban yang paling
              tepat.
            </p>
          </div>
        </div>
      </div>
    </aside>
  );
}