"use client";

import { useEffect, useState } from "react";
import { useRouter, useParams } from "next/navigation";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { getCourseGradient } from "@/lib/placeholder-image";
import { CheckCircle, ArrowLeft, BookOpen, CalendarDays, Users, FileText } from "lucide-react";

interface CourseData {
  id: string;
  title: string;
  slug: string;
  price: number;
  type: string;
  capacity: number;
  startDate?: string | null;
  sport: { name: string };
  _count: { registrations: number; files: number };
}

export default function CheckoutPage() {
  const router = useRouter();
  const params = useParams();
  const courseId = params.courseId as string;

  const [course, setCourse] = useState<CourseData | null>(null);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch(`/api/courses`)
      .then((r) => r.json())
      .then((all: CourseData[]) => {
        const c = all.find((x) => x.id === courseId);
        setCourse(c || null);
      })
      .catch(() => setError("خطا در دریافت اطلاعات دوره"))
      .finally(() => setLoading(false));
  }, [courseId]);

  const handleSubmit = async () => {
    setSubmitting(true);
    setError("");
    try {
      const token = localStorage.getItem("auth_token");
      const res = await fetch("/api/registrations", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ courseId }),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "خطا در ثبت‌نام");
      }
      setDone(true);
      setTimeout(() => router.push("/dashboard/athlete/courses"), 2000);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "خطا در ثبت‌نام");
    } finally {
      setSubmitting(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
      </div>
    );
  }

  if (!course) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-500 mb-4">دوره مورد نظر یافت نشد</p>
          <Link href="/courses">
            <Button variant="outline">بازگشت به دوره‌ها</Button>
          </Link>
        </div>
      </div>
    );
  }

  const gradient = getCourseGradient(course.id);

  if (done) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="bg-white rounded-2xl border p-10 text-center max-w-md shadow-sm">
          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-green-50 flex items-center justify-center">
            <CheckCircle className="h-8 w-8 text-green-600" />
          </div>
          <h2 className="text-xl font-bold text-gray-900 mb-2">ثبت‌نام با موفقیت انجام شد</h2>
          <p className="text-gray-500 text-sm mb-6">به زودی به صفحه دوره‌های شما منتقل می‌شویم</p>
          <Link href="/dashboard/athlete/courses">
            <Button>مشاهده دوره‌های من</Button>
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8 max-w-3xl">
        <Link
          href={`/courses/${course.slug}`}
          className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-[#2563EB] transition-colors mb-6"
        >
          <ArrowLeft className="h-4 w-4" />
          بازگشت به دوره
        </Link>

        <div className="grid md:grid-cols-5 gap-6">
          {/* Course Summary */}
          <div className="md:col-span-3 space-y-4">
            <div className="bg-white rounded-2xl border p-6">
              <h1 className="text-xl font-bold text-gray-900 mb-4">خلاصه سفارش</h1>

              <div className={`aspect-video rounded-xl bg-gradient-to-br ${gradient} flex flex-col items-center justify-center gap-1 mb-4`}>
                <span className="text-white/90 text-4xl font-bold">{course.title.charAt(0)}</span>
                <span className="text-white/60 text-xs">{course.sport.name}</span>
              </div>

              <h2 className="font-semibold text-gray-900 text-lg mb-1">{course.title}</h2>
              <span className="text-xs bg-blue-50 text-[#2563EB] px-2 py-0.5 rounded-full">{course.sport.name}</span>

              <div className="space-y-2 mt-4 text-sm text-gray-600">
                <div className="flex items-center gap-2">
                  <BookOpen className="h-4 w-4 text-gray-400" />
                  <span>{course.type === "ONLINE" ? "آنلاین" : course.type === "IN_PERSON" ? "حضوری" : "ترکیبی"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <CalendarDays className="h-4 w-4 text-gray-400" />
                  <span>شروع: {course.startDate ? new Date(course.startDate).toLocaleDateString("fa-IR") : "اعلام می‌شود"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4 text-gray-400" />
                  <span>ظرفیت: {course.capacity} نفر</span>
                </div>
                <div className="flex items-center gap-2">
                  <FileText className="h-4 w-4 text-gray-400" />
                  <span>{course._count.files} فایل آموزشی</span>
                </div>
              </div>
            </div>
          </div>

          {/* Payment Box */}
          <div className="md:col-span-2">
            <div className="bg-white rounded-2xl border p-6 sticky top-24 space-y-4">
              <h3 className="font-semibold text-gray-900">فاکتور</h3>

              <div className="space-y-2 text-sm">
                <div className="flex justify-between text-gray-600">
                  <span>شهریه دوره</span>
                  <span>{Number(course.price).toLocaleString()} ریال</span>
                </div>
                <div className="flex justify-between text-gray-600">
                  <span>تخفیف</span>
                  <span className="text-green-600">۰ ریال</span>
                </div>
                <div className="border-t pt-2 flex justify-between font-bold text-gray-900">
                  <span>مبلغ قابل پرداخت</span>
                  <span className="text-[#2563EB]">{Number(course.price).toLocaleString()} ریال</span>
                </div>
              </div>

              {error && (
                <div className="text-sm text-red-600 bg-red-50 p-3 rounded-lg">{error}</div>
              )}

              <Button
                className="w-full bg-[#2563EB] hover:bg-[#1D4ED8] h-11"
                onClick={handleSubmit}
                disabled={submitting}
              >
                {submitting ? "در حال پردازش..." : "تأیید و ثبت‌نام"}
              </Button>

              <p className="text-xs text-gray-400 text-center">
                پس از ثبت‌نام، دوره به لیست دوره‌های شما اضافه می‌شود
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}