import Link from 'next/link';
import { prisma } from '@/lib/db';
import { requireUser } from '@/lib/auth';
import { Head } from '@/components/desk/Head';
import { CONTACT_STATUS, statusLabel, statusTone } from '@/lib/crm';
import { createContact } from './actions';
export const dynamic = 'force-dynamic';
export const metadata = { title: 'Müşteriler' };

export default async function Musteriler({ searchParams }: { searchParams: Promise<{ s?: string }> }) {
  const u = await requireUser();
  const sp = await searchParams; const tab = CONTACT_STATUS.find((s) => s.id === sp.s)?.id;
  const where = { userId: u.id, ...(tab ? { status: tab } : {}) };
  const [contacts, counts] = await Promise.all([
    prisma.contact.findMany({ where, orderBy: { updatedAt: 'desc' }, include: { _count: { select: { orders: true } } } }),
    prisma.contact.groupBy({ by: ['status'], where: { userId: u.id }, _count: true }),
  ]);
  const cnt = (id?: string) => counts.filter((c) => !id || c.status === id).reduce((a, c) => a + c._count, 0);
  return (
    <>
      <Head tag={`${cnt()} müşteri`} title="Müşteriler" />
      <details className="border-t border-ink/15">
        <summary className="cursor-pointer px-4 py-3 text-[14px] font-semibold">+ Yeni müşteri ekle</summary>
        <form action={createContact} className="grid grid-cols-2 gap-2 px-4 pb-4">
          <div className="col-span-2"><label className="label">Ad</label><input name="name" required maxLength={80} className="field" placeholder="Ahmet Yılmaz" /></div>
          <div><label className="label">Telefon</label><input name="phone" maxLength={30} className="field" placeholder="0 5xx …" /></div>
          <div><label className="label">E-posta</label><input name="email" type="email" maxLength={120} className="field" /></div>
          <div className="col-span-2"><label className="label">Not</label><textarea name="note" rows={2} maxLength={4000} className="field resize-y" placeholder="Hangi ilanla ilgileniyor, bütçesi…" /></div>
          <button className="btn-ink col-span-2">Ekle</button>
        </form>
      </details>
      <div className="flex gap-1 overflow-x-auto border-t border-ink/15 px-4 py-2">
        <Link href="/panel/musteriler" className={`shrink-0 px-2.5 py-1 text-[12.5px] font-semibold ${!tab ? 'bg-ink text-white' : 'bg-paper-2 text-ink'}`}>Tümü <span className="num opacity-60">{cnt()}</span></Link>
        {CONTACT_STATUS.map((s) => <Link key={s.id} href={`/panel/musteriler?s=${s.id}`} className={`shrink-0 px-2.5 py-1 text-[12.5px] font-semibold ${tab === s.id ? 'bg-ink text-white' : 'bg-paper-2 text-ink'}`}>{s.label} <span className="num opacity-60">{cnt(s.id)}</span></Link>)}
      </div>
      {contacts.length === 0 ? (
        <p className="border-t border-ink/15 px-4 py-6 text-[14px] text-ink-soft">Henüz müşteri yok. İlgilenen alıcıları buraya ekleyip ilanlarınıza bağlayabilir, durumlarını takip edebilirsiniz.</p>
      ) : (
        <ul className="border-t border-ink/15">
          {contacts.map((c) => (
            <li key={c.id}>
              <Link href={`/panel/musteriler/${c.id}`} className="flex items-center justify-between gap-3 border-b border-ink/10 px-4 py-3 hover:bg-paper-2">
                <span className="min-w-0"><b className="text-[15px]">{c.name}</b>{c.phone && <span className="ml-2 num text-[13px] text-ink-soft">{c.phone}</span>}
                  <span className="block truncate text-[12.5px] text-ink-soft">{c._count.orders > 0 ? `${c._count.orders} ilan` : 'ilan bağlı değil'}{c.note ? ` · ${c.note.split('\n')[0]}` : ''}</span></span>
                <span className={`shrink-0 px-2 py-0.5 text-[11.5px] font-semibold ${statusTone(c.status)}`}>{statusLabel(c.status)}</span>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </>
  );
}
