import { useState } from "react";
import {
  ClipboardCheck,
  Compass,
  Clock3,
  RotateCcw,
  Info,
  User,
  Lock,
  Play,
  AlertCircle,
} from "lucide-react";
import type { CrewExam } from "@/types/exam";
import styles from "./CrewExamComponents.module.css";

interface Props {
  exam: CrewExam;
  isStarting: boolean;
  error: string | null;
  onStart: (username: string, password: string) => void;
}

export default function CrewExamIdentifyCard({
  exam,
  isStarting,
  error,
  onStart,
}: Props) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onStart(username, password);
  };

  const defaultDesc =
    "Ujian standarisasi operasional dan penanganan darurat bagi seluruh Leader dan Calon Leader Open Trip PPT Adventure.";

  return (
    <article className={styles.assessmentCard}>
      {/* Top Center Icon with Mountain Silhouette Backdrop */}
      <div className={styles.topIconHeader}>
        <svg
          className={styles.iconMountainBackdrop}
          viewBox="0 0 180 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            d="M10 80 L60 25 L85 55 L120 15 L170 80 Z"
            fill="#e2efe4"
            fillOpacity="0.7"
          />
          <path
            d="M35 80 L80 35 L105 60 L145 28 L175 80 Z"
            fill="#c5e4cb"
            fillOpacity="0.5"
          />
        </svg>

        <div className={styles.iconBadgeWrapper}>
          <ClipboardCheck size={32} strokeWidth={2.2} aria-hidden />
          <div className={styles.iconBadgeSecondary}>
            <Compass size={16} strokeWidth={2.2} aria-hidden />
          </div>
        </div>
      </div>

      {/* Title */}
      <h1 className={styles.cardTitle}>
        Assessment <span className={styles.cardTitleHighlight}>Leader Trip</span>
      </h1>

      {/* Description */}
      <p className={styles.cardDesc}>{exam.description || defaultDesc}</p>

      {/* Exam Info Grid */}
      <div className={styles.infoGrid}>
        {/* Durasi */}
        <div className={styles.infoItem}>
          <Clock3 size={24} className={styles.infoIcon} aria-hidden />
          <div className={styles.infoTextGroup}>
            <span className={styles.infoLabel}>Durasi</span>
            <strong className={styles.infoValue}>{exam.duration_minutes} menit</strong>
          </div>
        </div>

        {/* Maks. Percobaan */}
        <div className={styles.infoItem}>
          <RotateCcw size={24} className={styles.infoIcon} aria-hidden />
          <div className={styles.infoTextGroup}>
            <span className={styles.infoLabel}>Maks. Percobaan</span>
            <strong className={styles.infoValue}>{exam.max_attempts} kali</strong>
          </div>
        </div>

        {/* Passing Score (Full Row) */}
        <div className={`${styles.infoItem} ${styles.infoGridFull}`}>
          <ClipboardCheck size={24} className={styles.infoIcon} aria-hidden />
          <div className={styles.infoTextGroup}>
            <span className={styles.infoLabel}>Passing Score</span>
            <strong className={styles.infoValue}>{exam.passing_score}</strong>
          </div>
        </div>
      </div>

      {/* Important Notice */}
      <div className={styles.noticeBox} role="status">
        <Info size={18} className={styles.noticeIcon} aria-hidden />
        <span>
          Ujian akan berjalan otomatis begitu dimulai. Pastikan koneksi internet Anda stabil.
        </span>
      </div>

      {/* Input Identitas & Start Form */}
      <form onSubmit={handleSubmit} className={styles.identifyForm} noValidate>
        <div className={styles.inputGroup}>
          <label htmlFor="exam-username" className={styles.inputLabel}>
            Username (NIK Karyawan)
          </label>
          <div className={styles.inputWrapper}>
            <User size={18} className={styles.inputIcon} aria-hidden />
            <input
              id="exam-username"
              type="text"
              className={`${styles.textInput} ${error ? styles.inputError : ""}`}
              placeholder="cth. PPT-0012"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              disabled={isStarting}
              autoComplete="username"
            />
          </div>
        </div>

        <div className={styles.inputGroup}>
          <label htmlFor="exam-password" className={styles.inputLabel}>
            Password (Nomor HP)
          </label>
          <div className={styles.inputWrapper}>
            <Lock size={18} className={styles.inputIcon} aria-hidden />
            <input
              id="exam-password"
              type="password"
              className={`${styles.textInput} ${error ? styles.inputError : ""}`}
              placeholder="cth. 081234567890"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={isStarting}
              autoComplete="current-password"
            />
          </div>
        </div>

        {error && (
          <div className={styles.errorBanner} role="alert">
            <AlertCircle size={16} aria-hidden />
            <span>{error}</span>
          </div>
        )}

        <button
          type="submit"
          disabled={isStarting}
          className={styles.btnStart}
          id="exam-start-btn"
        >
          <Play size={18} fill="currentColor" aria-hidden />
          <span>{isStarting ? "Memverifikasi..." : "Mulai Ujian"}</span>
        </button>
      </form>
    </article>
  );
}