import { BookOpen, Calculator, FileSpreadsheet, ListChecks, MessageSquareText, Sparkles } from 'lucide-react';
import type { Course } from '@/lib/types';

const ICONS = [Sparkles, Calculator, ListChecks, FileSpreadsheet, MessageSquareText];

export function EmptyState({ course, onPick, term }: { course?: Course; onPick: (t: string) => void; term: string }) {
  return (
    <div className="mx-auto max-w-[780px] px-3 sm:px-4 pt-3 sm:pt-10 pb-6 animate-fadein">
      <section className="relative overflow-hidden rounded-[24px] bg-uqo-gradient text-white px-5 py-6 sm:px-8 sm:py-8 shadow-float">
        <svg className="absolute -right-10 -top-10 h-56 w-56 opacity-15" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="100" fill="white" /></svg>
        <svg className="absolute right-16 bottom-[-60px] h-40 w-40 opacity-10" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="100" fill="#78BE20" /></svg>
        <img src="/uqo-logo-white.png" alt="UQO" className="h-9 sm:h-11 w-auto" />
        <h1 className="mt-4 text-[22px] sm:text-[28px] font-bold leading-tight tracking-tight">Bonjour ! Sur quoi travaille-t-on aujourd'hui ?</h1>
        <p className="mt-2 text-sm sm:text-base text-white/85">
          {course ? <><span className="inline-block rounded-md bg-white/15 px-1.5 py-0.5 font-semibold text-white">{course.code}</span> {course.title}</> : 'Tuteur IA en évaluation immobilière'}
          {term ? <span className="text-white/70"> · {term}</span> : null}
        </p>
        <ul className="mt-4 flex flex-wrap gap-1.5 text-[11.5px] text-white/85">
          {['Explique et cite tes notes de cours', 'Calcule en Python vérifié', 'Crée et modifie des Excel', 'Quiz et fiches Word'].map((t) => (
            <li key={t} className="rounded-full bg-white/12 px-2.5 py-1 backdrop-blur">{t}</li>
          ))}
        </ul>
      </section>

      {course?.announcement && (
        <div className="mt-3 rounded-2xl border border-uqo-gold/40 bg-[#fff8dc] px-4 py-3 text-sm shadow-soft">
          <b className="text-[#7a6300]">Annonce du professeur</b>
          <p className="mt-0.5">{course.announcement}</p>
        </div>
      )}

      <h2 className="mt-5 mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-muted">Pour commencer</h2>
      <div className="grid gap-2 sm:grid-cols-2">
        {(course?.suggestions || []).map((s, i) => {
          const Icon = ICONS[i % ICONS.length];
          return (
            <button key={s} onClick={() => onPick(s)} className="group flex items-center gap-3 rounded-2xl border border-neutral-line bg-white px-4 py-3.5 text-left text-[14.5px] hover:border-uqo-blue/50 hover:shadow-soft active:scale-[0.99] transition min-h-[58px]">
              <span className="h-9 w-9 rounded-xl bg-uqo-blue-light text-uqo-blue inline-flex items-center justify-center shrink-0 group-hover:bg-uqo-blue group-hover:text-white transition"><Icon size={17} /></span>
              <span className="text-neutral-text">{s}</span>
            </button>
          );
        })}
      </div>

      {course?.site && (
        <a href={course.site} target="_blank" rel="noopener noreferrer" className="mt-3 flex items-center gap-3 rounded-2xl border border-dashed border-neutral-line px-4 py-3 text-sm text-neutral-muted hover:border-uqo-blue/50 hover:text-uqo-blue-dark">
          <BookOpen size={16} className="text-uqo-blue" /> Notes de cours interactives : {course.site.replace('https://', '')}
        </a>
      )}

      {course?.deadlines?.length ? (
        <div className="mt-5">
          <h2 className="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-muted">Échéances</h2>
          <ul className="rounded-2xl border border-neutral-line bg-white divide-y divide-neutral-line/70">
            {course.deadlines.map((d) => <li key={d.label} className="flex justify-between px-4 py-2.5 text-sm"><span>{d.label}</span><span className="text-neutral-muted tabular-nums">{d.date}</span></li>)}
          </ul>
        </div>
      ) : null}
    </div>
  );
}