"use client";

import { useState } from "react";

interface Lead {
  id: number;
  patientName: string;
  country: string;
  treatment: string;
  status: string;
  nextAction: string | null;
}

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",
};

export default function LeadsTable({ leads }: { leads: Lead[] }) {
  const [filter, setFilter] = useState("all");

  const filtered = filter === "all" ? leads : leads.filter((l) => l.status === filter);

  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
        <h2 className="text-sm font-bold text-slate-900">Priority Patient Leads</h2>
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="text-xs border border-slate-200 rounded-lg px-2 py-1 bg-slate-50 focus:outline-none"
        >
          <option value="all">All Status</option>
          <option value="new">New</option>
          <option value="doctor_review">Doctor Review</option>
          <option value="quote_sent">Quote Sent</option>
          <option value="report_needed">Report Needed</option>
          <option value="visa_processing">Visa Processing</option>
          <option value="appointment_booked">Appt. Booked</option>
        </select>
      </div>
      <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-2.5">Patient</th>
              <th className="text-left text-xs font-semibold text-slate-500 px-3 py-2.5">Treatment</th>
              <th className="text-left text-xs font-semibold text-slate-500 px-3 py-2.5">Country</th>
              <th className="text-left text-xs font-semibold text-slate-500 px-3 py-2.5">Status</th>
              <th className="text-left text-xs font-semibold text-slate-500 px-3 py-2.5">Next Action</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50">
            {filtered.map((lead) => (
              <tr key={lead.id} className="hover:bg-slate-50 transition-colors cursor-pointer">
                <td className="px-4 py-2.5">
                  <p className="font-semibold text-slate-800 text-xs">{lead.patientName}</p>
                </td>
                <td className="px-3 py-2.5 text-xs text-slate-600">{lead.treatment}</td>
                <td className="px-3 py-2.5 text-xs text-slate-600">{lead.country}</td>
                <td className="px-3 py-2.5">
                  <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-2.5 text-xs text-slate-500 font-medium">{lead.nextAction || "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
        {filtered.length === 0 && (
          <div className="text-center py-8 text-sm text-slate-400">No leads found</div>
        )}
      </div>
    </div>
  );
}