import type { Metadata } from "next";
import { MessageCircle, Mail, User, CheckCircle, Clock } from "lucide-react";

export const metadata: Metadata = { title: "Chat Leads" };

interface ChatLead {
  id: string;
  name: string;
  email: string;
  sessionId: string;
  createdAt: string;
  contacted: boolean;
}

async function getLeads(): Promise<ChatLead[]> {
  try {
    // Read directly from the JSON file (server-side)
    const { readFileSync, existsSync } = await import("fs");
    const path = await import("path");
    const file = path.join(process.cwd(), "data", "chat-leads.json");
    if (!existsSync(file)) return [];
    return JSON.parse(readFileSync(file, "utf-8"));
  } catch {
    return [];
  }
}

export default async function ChatLeadsPage() {
  const leads = await getLeads();

  return (
    <div className="p-8">
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-neutral-900">Chat Leads</h1>
          <p className="text-neutral-500 text-sm mt-0.5">
            Visitors who shared their details via the AI chat widget.
          </p>
        </div>
        <div className="flex items-center gap-2 bg-navy-50 text-navy-700 px-4 py-2 rounded-xl text-sm font-medium">
          <MessageCircle size={16} />
          {leads.length} total leads
        </div>
      </div>

      {leads.length === 0 ? (
        <div className="bg-white rounded-2xl border border-neutral-200 p-16 text-center">
          <MessageCircle size={40} className="text-neutral-300 mx-auto mb-3" />
          <p className="text-neutral-500 text-sm">No chat leads yet. They will appear here once visitors share their details.</p>
        </div>
      ) : (
        <div className="bg-white rounded-2xl border border-neutral-200 overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-neutral-100 bg-neutral-50">
                <th className="text-left px-5 py-3.5 font-semibold text-neutral-600">Name</th>
                <th className="text-left px-5 py-3.5 font-semibold text-neutral-600">Email</th>
                <th className="text-left px-5 py-3.5 font-semibold text-neutral-600">Received</th>
                <th className="text-left px-5 py-3.5 font-semibold text-neutral-600">Status</th>
              </tr>
            </thead>
            <tbody>
              {leads.map((lead) => (
                <tr key={lead.id} className="border-b border-neutral-100 hover:bg-neutral-50 transition-colors">
                  <td className="px-5 py-3.5">
                    <div className="flex items-center gap-2.5">
                      <div className="w-8 h-8 rounded-full bg-navy-100 flex items-center justify-center shrink-0">
                        <User size={14} className="text-navy-600" />
                      </div>
                      <span className="font-medium text-neutral-800">{lead.name || "—"}</span>
                    </div>
                  </td>
                  <td className="px-5 py-3.5">
                    <a
                      href={`mailto:${lead.email}`}
                      className="flex items-center gap-1.5 text-navy-600 hover:underline"
                    >
                      <Mail size={13} />
                      {lead.email}
                    </a>
                  </td>
                  <td className="px-5 py-3.5 text-neutral-500">
                    {new Date(lead.createdAt).toLocaleDateString("en-MY", {
                      day: "2-digit",
                      month: "short",
                      year: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                    })}
                  </td>
                  <td className="px-5 py-3.5">
                    {lead.contacted ? (
                      <span className="inline-flex items-center gap-1.5 bg-emerald-50 text-emerald-700 text-xs font-medium px-2.5 py-1 rounded-full">
                        <CheckCircle size={11} /> Contacted
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1.5 bg-amber-50 text-amber-700 text-xs font-medium px-2.5 py-1 rounded-full">
                        <Clock size={11} /> Pending
                      </span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}