import Link from "next/link";
import { ArrowRight, BookOpenCheck, GraduationCap, Sprout, Trophy, TrendingUp } from "lucide-react";
import { ArrowLink, PracticeFeatureBand, PracticeShell } from "@/components/practice/PracticeShell";
import { getAllPracticeLevels } from "@/lib/practice";

export const dynamic = "force-dynamic";

const LEVEL_ICONS = {
  beginner: Sprout,
  intermediate: TrendingUp,
  advanced: Trophy,
  ielts: GraduationCap,
};

export default async function PracticePage() {
  const levels = await getAllPracticeLevels();

  return (
    <PracticeShell
      title="Practice English Online"
      description="Master English conversation, reading, writing, listening, vocabulary, and grammar with interactive activities built for real-world fluency."
    >
      <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
        <div className="mb-8 max-w-3xl">
          <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Choose your level</p>
          <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Start with the level that matches you</h2>
          <p className="mt-3 text-sm leading-relaxed text-[#4A141E]/65 sm:text-base">
            Each level opens into focused practice topics and exercises loaded from your existing database.
          </p>
        </div>

        <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
          {levels.map((level) => {
            const LevelIcon = LEVEL_ICONS[level.slug] || BookOpenCheck;
            return (
              <Link
                key={level.id}
                href={`/practice/${level.slug}`}
                className="group flex h-full flex-col rounded-3xl border border-[#E6D3B1] bg-white p-5 shadow-sm transition hover:scale-[1.02] hover:border-[#D4AF37] hover:shadow-lg"
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#F6EFE9]">
                    <LevelIcon className="h-6 w-6 text-[#8B1C1C]" aria-hidden="true" />
                  </div>
                  <ArrowRight className="h-5 w-5 text-[#8B1C1C] transition group-hover:translate-x-1" aria-hidden="true" />
                </div>
                <h3 className="mt-5 text-xl font-black text-[#4A141E]">{level.title}</h3>
                <p className="mt-3 line-clamp-4 flex-1 text-sm leading-relaxed text-[#4A141E]/65">{level.description || "Practice English skills with guided exercises."}</p>
                <span className="mt-5 text-sm font-black text-[#8B1C1C]">Open level</span>
              </Link>
            );
          })}
        </div>

        {!levels.length ? (
          <div className="rounded-3xl border border-[#E6D3B1] bg-white p-8 text-center">
            <p className="text-lg font-black text-[#4A141E]">No practice levels found.</p>
          </div>
        ) : null}
      </section>
      <section className="border-t border-[#E6D3B1]/60 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-10 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
          <div>
            <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Need a guided path?</p>
            <h2 className="mt-2 text-2xl font-black text-[#4A141E]">Take a level test before practising</h2>
          </div>
          <ArrowLink href="/level-test">Find your level</ArrowLink>
        </div>
      </section>
      <PracticeFeatureBand />
    </PracticeShell>
  );
}