"use client";

import { ArrowRight, Upload } from "lucide-react";
import {
  labelForOnboardingGoal,
  type StudentStudyProfile,
} from "@/lib/onboarding";

export function ExamPathModule({
  profile,
  onSetup,
  onUpload,
  onGenerate,
}: {
  profile: StudentStudyProfile | null;
  onSetup: () => void;
  onUpload: () => void;
  onGenerate: () => void;
}) {
  if (!profile || profile.onboardingSkipped) {
    return (
      <section className="mx-2 mt-2 flex shrink-0 flex-col gap-3 rounded-[18px] border border-white/[0.08] bg-[#0b0b0c] px-4 py-3 md:mx-2.5 md:flex-row md:items-center md:justify-between md:px-5">
        <div className="min-w-0">
          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-white/34">Your exam path</p>
          <h2 className="mt-1 text-[14px] font-medium text-white/86">Set up your exam path</h2>
          <p className="mt-1 text-[12px] leading-5 text-white/47">
            DocDoe can rank topics better when it knows your board, class, and subjects.
          </p>
        </div>
        <button
          type="button"
          onClick={onSetup}
          className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
        >
          Complete setup
          <ArrowRight className="size-3.5" strokeWidth={1.75} aria-hidden="true" />
        </button>
      </section>
    );
  }

  const context = [profile.board, profile.classLevel, profile.stream].filter(Boolean).join(" / ");
  const subjects = profile.subjects?.slice(0, 3).join(", ") || profile.subject || "Add subjects";
  const hasFirstMaterial = profile.firstUploadStatus === "ready" || profile.firstUploadStatus === "received";

  return (
    <section className="mx-2 mt-2 flex shrink-0 flex-col gap-3 rounded-[18px] border border-white/[0.08] bg-[#0b0b0c] px-4 py-3 md:mx-2.5 md:flex-row md:items-center md:justify-between md:px-5">
      <div className="min-w-0">
        <div className="flex items-center gap-2">
          <span className="size-1.5 rounded-full bg-blue-400" aria-hidden="true" />
          <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-white/38">Your exam path</p>
        </div>
        <p className="mt-1.5 truncate text-[13px] font-medium text-white/82">{context || "Study profile set"}</p>
        <p className="mt-1 truncate text-[12px] text-white/47">
          Goal: {labelForOnboardingGoal(profile.primaryGoal)} / Subjects: {subjects}
        </p>
      </div>
      <div className="flex shrink-0 gap-2">
        {hasFirstMaterial ? (
          <button
            type="button"
            onClick={onGenerate}
            className="inline-flex min-h-10 items-center justify-center rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
          >
            Find study signals
          </button>
        ) : (
          <>
            <button
              type="button"
              onClick={onUpload}
              className="inline-flex min-h-10 items-center justify-center gap-1.5 rounded-full border border-white/[0.11] px-4 text-[12px] font-medium text-white/68 transition hover:border-white/22 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
            >
              <Upload className="size-3.5" strokeWidth={1.7} aria-hidden="true" />
              Upload material
            </button>
            <button
              type="button"
              onClick={onGenerate}
              className="inline-flex min-h-10 items-center justify-center rounded-full bg-white px-4 text-[12px] font-semibold text-[#080808] transition hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/35"
            >
              Generate study path
            </button>
          </>
        )}
      </div>
    </section>
  );
}