import { prisma } from "@/lib/prisma";
import LeadStatusSelect from "@/components/lead-status-select";

export const dynamic = "force-dynamic";

type SearchParams = Promise<{
  q?: string;
  status?: string;
}>;

function formatLeadNumber(id: string, createdAt: Date) {
  const date = new Date(createdAt);
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");

  return `WP-${y}${m}${d}-${id.slice(-6).toUpperCase()}`;
}

export default async function AdminLeadsPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;
  const q = params.q?.trim() || "";
  const status = params.status?.trim() || "";

  const leads = await prisma.lead.findMany({
    where: {
      AND: [
        q
          ? {
              OR: [
                { company: { contains: q, mode: "insensitive" } },
                { phone: { contains: q, mode: "insensitive" } },
                { email: { contains: q, mode: "insensitive" } },
                { message: { contains: q, mode: "insensitive" } },
              ],
            }
          : {},
        status ? { status: status as any } : {},
      ],
    },
    orderBy: { createdAt: "desc" },
  });

  return (
    <main className="min-h-screen bg-neutral-950 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-10">
        <div className="flex items-center justify-between gap-4 mb-8">
          <h1 className="text-3xl font-bold">Заявки</h1>

          <form action="/api/admin/logout" method="POST">
            <button className="rounded-2xl border border-white/10 px-4 py-2 hover:bg-white/5">
              Выйти
            </button>
          </form>
        </div>

        <form className="grid md:grid-cols-[1fr_220px_auto] gap-4 mb-6">
          <input
            type="text"
            name="q"
            defaultValue={q}
            placeholder="Поиск: компания, телефон, email, сообщение"
            className="rounded-2xl border border-white/10 bg-neutral-900 px-4 py-3 outline-none"
          />

          <select
            name="status"
            defaultValue={status}
            className="rounded-2xl border border-white/10 bg-neutral-900 px-4 py-3 outline-none"
          >
            <option value="">Все статусы</option>
            <option value="NEW">Новая</option>
            <option value="IN_PROGRESS">В работе</option>
            <option value="CALL_SCHEDULED">Назначен звонок</option>
            <option value="WON">Успешно</option>
            <option value="LOST">Закрыта</option>
          </select>

          <button className="rounded-2xl bg-emerald-600 px-5 py-3 font-semibold hover:bg-emerald-500">
            Найти
          </button>
        </form>

        <div className="overflow-x-auto rounded-2xl border border-white/10 bg-neutral-900">
          <table className="w-full text-sm">
            <thead className="border-b border-white/10 text-neutral-400">
              <tr>
                <th className="text-left px-4 py-3">Дата</th>
                <th className="text-left px-4 py-3">Заявка</th>
                <th className="text-left px-4 py-3">Компания</th>
                <th className="text-left px-4 py-3">Телефон</th>
                <th className="text-left px-4 py-3">Email</th>
                <th className="text-left px-4 py-3">Сообщение</th>
                <th className="text-left px-4 py-3">Статус</th>
                <th className="text-left px-4 py-3">Источник</th>
              </tr>
            </thead>
            <tbody>
              {leads.map((lead) => (
                <tr key={lead.id} className="border-b border-white/5 align-top">
                  <td className="px-4 py-3 whitespace-nowrap">
                    {new Date(lead.createdAt).toLocaleString("ru-RU")}
                  </td>
                  <td className="px-4 py-3 whitespace-nowrap">
                    {formatLeadNumber(lead.id, lead.createdAt)}
                  </td>
                  <td className="px-4 py-3">{lead.company}</td>
                  <td className="px-4 py-3">{lead.phone}</td>
                  <td className="px-4 py-3">{lead.email || "—"}</td>
                  <td className="px-4 py-3 text-neutral-300">{lead.message || "—"}</td>
                  <td className="px-4 py-3">
                    <LeadStatusSelect leadId={lead.id} value={lead.status} />
                  </td>
                  <td className="px-4 py-3">{lead.source}</td>
                </tr>
              ))}

              {leads.length === 0 && (
                <tr>
                  <td colSpan={8} className="px-4 py-8 text-center text-neutral-400">
                    Пока заявок нет
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </main>
  );
}