"use client";

import BackToMC from "@/components/mission-control/BackToMC";
import { useState } from "react";

const SAMPLE_LEADS = [
  { id: 1, name: "Restaurante El Galeón", email: "info@galeon.es", phone: "+34 952 123 456", status: "qualified", source: "Website" },
  { id: 2, name: "Clínica Dental Mar", email: "contacto@clinica-dental-mar.es", phone: "+34 951 234 567", status: "contacted", source: "Referral" },
  { id: 3, name: "Inmobiliaria Sol", email: "info@inmobiliariasol.com", phone: "+34 953 345 678", status: "new", source: "Website" },
];

export default function LeadsPage() {
  const [filter, setFilter] = useState("all");
  const filteredLeads = filter === "all" ? SAMPLE_LEADS : SAMPLE_LEADS.filter(l => l.status === filter);
  const statusColors: Record<string, string> = {
    new: "bg-blue-500/20 text-blue-400",
    contacted: "bg-yellow-500/20 text-yellow-400",
    qualified: "bg-green-500/20 text-green-400",
  };

  return (
    <>
      <BackToMC />
      <div className="p-6">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-white mb-2">📋 Lead Manager</h1>
          <p className="text-slate-400">Manage your SiteMente leads</p>
        </div>
        <div className="flex gap-2 mb-6">
          {["all", "new", "contacted", "qualified"].map(s => (
            <button key={s} onClick={() => setFilter(s)} className={`px-4 py-2 rounded-lg text-sm ${filter === s ? "bg-brand-pink text-white" : "bg-slate-800 text-slate-400"}`}>
              {s.charAt(0).toUpperCase() + s.slice(1)}
            </button>
          ))}
        </div>
        <div className="bg-slate-800 rounded-lg overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-700">
                <th className="text-left p-4 text-slate-400">Name</th>
                <th className="text-left p-4 text-slate-400">Email</th>
                <th className="text-left p-4 text-slate-400">Status</th>
              </tr>
            </thead>
            <tbody>
              {filteredLeads.map(lead => (
                <tr key={lead.id} className="border-b border-slate-700/50">
                  <td className="p-4 text-white">{lead.name}</td>
                  <td className="p-4 text-slate-400">{lead.email}</td>
                  <td className="p-4"><span className={`px-2 py-1 rounded text-xs ${statusColors[lead.status]}`}>{lead.status}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}