import { db } from "@/db";
import { leads } from "@/db/schema";
import { desc } from "drizzle-orm";
import Link from "next/link";
import { Plus, Filter } from "lucide-react";

export const dynamic = "force-dynamic";
export const metadata = { title: "Leads | MediTransplant Admin" };

const STATUS_STYLES: Record<string, string> = {
  doctor_review: "bg-blue-100 text-blue-700",
  quote_sent: "bg-green-100 text-green-700",
  report_needed: "bg-yellow-100 text-yellow-700",
  visa_processing: "bg-purple-100 text-purple-700",
  appointment_booked: "bg-teal-100 text-teal-700",
  new: "bg-slate-100 text-slate-700",
  completed: "bg-emerald-100 text-emerald-700",
  cancelled: "bg-red-100 text-red-700",
};

const STATUS_LABELS: Record<string, string> = {
  doctor_review: "Doctor Review",
  quote_sent: "Quote Sent",
  report_needed: "Report Needed",
  visa_processing: "Visa Processing",
  appointment_booked: "Appt. Booked",
  new: "New",
  completed: "Completed",
  cancelled: "Cancelled",
};

async function getLeads() {
  try {
    return await db.select().from(leads).orderBy(desc(leads.createdAt));
  } catch {
    return [];
  }
}

export default async function LeadsPage() {
  const leadsData = await getLeads();

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg font-bold text-slate-900">All Leads</h1>
          <p className="text-xs text-slate-500">{leadsData.length} total leads</p>
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-1.5 border border-slate-200 text-slate-600 text-xs font-medium px-3 py-2 rounded-lg hover:bg-slate-50 transition-colors">
            <Filter className="w-3.5 h-3.5" />
            Filter
          </button>
          <Link
            href="/admin/leads/new"
            className="flex items-center gap-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors"
          >
            <Plus className="w-3.5 h-3.5" />
            New Lead
          </Link>
        </div>
      </div>

      <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-slate-50 border-b border-slate-100">
                <th className="text-left text-xs font-semibold text-slate-500 px-4 py-3">ID</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Patient</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Treatment</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Country</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Status</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Next Action</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Email</th>
                <th className="text-left text-xs font-semibold text-slate-500 px-3 py-3">Phone</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {leadsData.map((lead) => (
                <tr key={lead.id} className="hover:bg-slate-50 transition-colors cursor-pointer">
                  <td className="px-4 py-3 text-xs text-slate-400 font-mono">#{lead.id}</td>
                  <td className="px-3 py-3">
                    <p className="font-semibold text-slate-800 text-xs">{lead.patientName}</p>
                  </td>
                  <td className="px-3 py-3 text-xs text-slate-600">{lead.treatment}</td>
                  <td className="px-3 py-3 text-xs text-slate-600">{lead.country}</td>
                  <td className="px-3 py-3">
                    <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${STATUS_STYLES[lead.status] || "bg-slate-100 text-slate-600"}`}>
                      {STATUS_LABELS[lead.status] || lead.status}
                    </span>
                  </td>
                  <td className="px-3 py-3 text-xs text-slate-500">{lead.nextAction || "—"}</td>
                  <td className="px-3 py-3 text-xs text-slate-500">{lead.email || "—"}</td>
                  <td className="px-3 py-3 text-xs text-slate-500">{lead.phone || "—"}</td>
                </tr>
              ))}
              {leadsData.length === 0 && (
                <tr>
                  <td colSpan={8} className="text-center py-12 text-sm text-slate-400">
                    No leads yet. <Link href="/admin/leads/new" className="text-green-600 hover:underline">Add your first lead</Link>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}