import Link from "next/link";
import { Plus } from "lucide-react";
import { prisma } from "@/lib/prisma";
import { formatPrice, formatDate } from "@/lib/utils";
import AdminInsuranceActions from "@/components/admin/AdminInsuranceActions";
import AdminEnrollmentActions from "@/components/admin/AdminEnrollmentActions";

export default async function AdminInsurancePage() {
  const [plans, enrollments] = await Promise.all([
    prisma.insurancePlan.findMany({ orderBy: { price: "asc" } }),
    prisma.insuranceEnrollment.findMany({
      orderBy: { createdAt: "desc" },
      include: { plan: { select: { name: true } } },
    }),
  ]);

  return (
    <div className="p-8">
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Insurance Plans</h1>
          <p className="text-gray-500 mt-1">{plans.length} plans · {enrollments.length} enrollments</p>
        </div>
        <Link href="/admin/insurance/new" className="btn-primary">
          <Plus className="h-4 w-4" />
          New Plan
        </Link>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 mb-10">
        {plans.map((plan: (typeof plans)[0]) => (
          <div key={plan.id} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col">
            <div className="flex items-start justify-between mb-3">
              <div>
                <h3 className="font-bold text-gray-900">{plan.name}</h3>
                {plan.badge && (
                  <span className="text-xs bg-primary-100 text-primary-700 px-2 py-0.5 rounded-full font-medium mt-1 inline-block">{plan.badge}</span>
                )}
              </div>
              <span className={`text-xs px-2 py-1 rounded-full font-medium shrink-0 ${plan.active ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"}`}>
                {plan.active ? "Active" : "Inactive"}
              </span>
            </div>
            <div className="text-2xl font-bold text-primary-600 mb-1">
              {formatPrice(plan.price)}<span className="text-sm font-normal text-gray-400">/mo</span>
            </div>
            {plan.yearlyPrice && (
              <div className="text-sm text-gray-400 mb-2">{formatPrice(plan.yearlyPrice)}/yr</div>
            )}
            <p className="text-sm text-gray-500 flex-1">{plan.description}</p>
            <AdminInsuranceActions planId={plan.id} />
          </div>
        ))}
        {plans.length === 0 && (
          <div className="col-span-3 text-center py-12 text-gray-400">No plans yet. <Link href="/admin/insurance/new" className="text-primary-600 hover:underline">Add one.</Link></div>
        )}
      </div>

      <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-gray-100">
          <h2 className="font-bold text-gray-900">Enrollments</h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-gray-50 bg-gray-50">
                <th className="text-left px-6 py-3 font-semibold text-gray-600">Email</th>
                <th className="text-left px-6 py-3 font-semibold text-gray-600">Pet</th>
                <th className="text-left px-6 py-3 font-semibold text-gray-600">Plan</th>
                <th className="text-left px-6 py-3 font-semibold text-gray-600">Billing</th>
                <th className="text-center px-6 py-3 font-semibold text-gray-600">Status</th>
                <th className="text-left px-6 py-3 font-semibold text-gray-600">Date</th>
                <th className="text-right px-6 py-3 font-semibold text-gray-600">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-50">
              {enrollments.map((e: (typeof enrollments)[0]) => (
                <tr key={e.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4 text-gray-900">{e.email}</td>
                  <td className="px-6 py-4">
                    <div className="font-medium text-gray-900">{e.petName}</div>
                    <div className="text-xs text-gray-400">{e.petType} · {e.petAge}</div>
                  </td>
                  <td className="px-6 py-4 text-gray-700">{e.plan.name}</td>
                  <td className="px-6 py-4">
                    <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium capitalize">{e.billing}</span>
                  </td>
                  <td className="px-6 py-4 text-center">
                    <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
                      e.status === "ACTIVE" ? "bg-green-100 text-green-700"
                      : e.status === "CANCELLED" ? "bg-red-100 text-red-700"
                      : "bg-amber-100 text-amber-700"
                    }`}>{e.status}</span>
                  </td>
                  <td className="px-6 py-4 text-gray-500 text-xs">{new Date(e.createdAt).toLocaleDateString()}</td>
                  <td className="px-6 py-4 text-right">
                    <AdminEnrollmentActions enrollmentId={e.id} status={e.status} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {enrollments.length === 0 && (
            <div className="text-center py-12 text-gray-400">No enrollments yet.</div>
          )}
        </div>
      </div>
    </div>
  );
}