import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { redirect } from "next/navigation";
import Link from "next/link";
import { Shield, CheckCircle, XCircle, Clock, ArrowLeft } from "lucide-react";
import { formatPrice } from "@/lib/utils";

export const metadata = { title: "My Insurance" };

export default async function MyInsurancePage() {
  const session = await getServerSession(authOptions);
  if (!session?.user?.email) redirect("/auth/login?next=/account/insurance");

  const enrollments = await prisma.insuranceEnrollment.findMany({
    where: { email: session.user.email },
    orderBy: { createdAt: "desc" },
    include: { plan: true },
  });

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 py-12">
        <div className="flex items-center gap-4 mb-8">
          <Link href="/" className="p-2 hover:bg-gray-200 rounded-xl transition-colors">
            <ArrowLeft className="h-5 w-5 text-gray-600" />
          </Link>
          <div>
            <h1 className="text-2xl font-bold text-gray-900">My Insurance</h1>
            <p className="text-gray-500 text-sm mt-0.5">Your active and past pet insurance enrollments</p>
          </div>
        </div>

        {enrollments.length === 0 ? (
          <div className="bg-white rounded-2xl shadow-sm p-12 text-center">
            <Shield className="h-12 w-12 text-gray-300 mx-auto mb-4" />
            <h2 className="text-lg font-semibold text-gray-700 mb-2">No insurance yet</h2>
            <p className="text-gray-400 mb-6">Protect your pet with one of our comprehensive plans.</p>
            <Link href="/insurance" className="btn-primary">Browse Plans</Link>
          </div>
        ) : (
          <div className="space-y-5">
            {enrollments.map((enrollment: (typeof enrollments)[0]) => {
              const isActive = enrollment.status === "ACTIVE";
              const isCancelled = enrollment.status === "CANCELLED";
              return (
                <div key={enrollment.id} className="bg-white rounded-2xl shadow-sm overflow-hidden">
                  <div className="flex items-start justify-between p-6 border-b border-gray-100">
                    <div className="flex items-center gap-4">
                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isActive ? "bg-primary-100" : "bg-gray-100"}`}>
                        <Shield className={`h-6 w-6 ${isActive ? "text-primary-600" : "text-gray-400"}`} />
                      </div>
                      <div>
                        <h2 className="font-bold text-gray-900 text-lg">{enrollment.plan.name}</h2>
                        <p className="text-sm text-gray-500">{enrollment.plan.description}</p>
                      </div>
                    </div>
                    <span className={`inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full ${
                      isActive ? "bg-green-100 text-green-700"
                      : isCancelled ? "bg-red-100 text-red-700"
                      : "bg-amber-100 text-amber-700"
                    }`}>
                      {isActive ? <CheckCircle className="h-3.5 w-3.5" /> : isCancelled ? <XCircle className="h-3.5 w-3.5" /> : <Clock className="h-3.5 w-3.5" />}
                      {enrollment.status}
                    </span>
                  </div>

                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-0 divide-x divide-gray-100">
                    <div className="p-5">
                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Pet Name</p>
                      <p className="font-semibold text-gray-900">{enrollment.petName}</p>
                      <p className="text-sm text-gray-500 capitalize">{enrollment.petType} · {enrollment.petAge}</p>
                    </div>
                    <div className="p-5">
                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Billing</p>
                      <p className="font-semibold text-gray-900 capitalize">{enrollment.billing}</p>
                      <p className="text-sm text-gray-500">
                        {enrollment.billing === "yearly"
                          ? formatPrice(enrollment.plan.yearlyPrice ?? enrollment.plan.price * 12) + "/yr"
                          : formatPrice(enrollment.plan.price) + "/mo"}
                      </p>
                    </div>
                    <div className="p-5">
                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Start Date</p>
                      <p className="font-semibold text-gray-900">{new Date(enrollment.startDate).toLocaleDateString()}</p>
                    </div>
                    <div className="p-5">
                      <p className="text-xs text-gray-400 uppercase tracking-wider mb-1">Email</p>
                      <p className="font-semibold text-gray-900 text-sm truncate">{enrollment.email}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        <div className="mt-8 bg-primary-50 rounded-2xl p-6 border border-primary-100">
          <h3 className="font-semibold text-primary-800 mb-1">Need help with your policy?</h3>
          <p className="text-sm text-primary-600">Contact our support team at <a href="mailto:support@americas.pet" className="underline font-medium">support@americas.pet</a></p>
        </div>
      </div>
    </div>
  );
}