"use client";

import { useState } from "react";

const LEAD_STATUSES = ["all", "new", "contacted", "qualified", "proposal", "won", "lost"];

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",
    proposal: "bg-purple-500/20 text-purple-400",
    won: "bg-emerald-500/20 text-emerald-400",
    lost: "bg-red-500/20 text-red-400",
  };

  return (
    <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>

      {/* Filters */}
      <div className="flex gap-2 mb-6 flex-wrap">
        {LEAD_STATUSES.map(status => (
          <button
            key={status}
            onClick={() => setFilter(status)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              filter === status
                ? "bg-brand-pink text-white"
                : "bg-slate-800 text-slate-400 hover:bg-slate-700"
            }`}
          >
            {status.charAt(0).toUpperCase() + status.slice(1)}
          </button>
        ))}
      </div>

      {/* Table */}
      <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 font-medium">Name</th>
              <th className="text-left p-4 text-slate-400 font-medium">Email</th>
              <th className="text-left p-4 text-slate-400 font-medium">Phone</th>
              <th className="text-left p-4 text-slate-400 font-medium">Status</th>
              <th className="text-left p-4 text-slate-400 font-medium">Source</th>
            </tr>
          </thead>
          <tbody>
            {filteredLeads.map(lead => (
              <tr key={lead.id} className="border-b border-slate-700/50 hover:bg-slate-700/30">
                <td className="p-4 text-white font-medium">{lead.name}</td>
                <td className="p-4 text-slate-400">{lead.email}</td>
                <td className="p-4 text-slate-400">{lead.phone}</td>
                <td className="p-4">
                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[lead.status]}`}>
                    {lead.status}
                  </span>
                </td>
                <td className="p-4 text-slate-400">{lead.source}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <p className="text-slate-500 text-sm mt-4">
        Showing {filteredLeads.length} of {SAMPLE_LEADS.length} leads (database connection needed for full functionality)
      </p>
    </div>
  );
}