import { ShellPage } from "@/components/page-templates";
import { Button, SectionCard } from "@/components/ui";
import { getSession } from "@/lib/auth";
import { createContact } from "@/lib/admin-crud";
import { prisma } from "@/lib/prisma";

export default async function NewContactPage({
  searchParams
}: {
  searchParams?: Promise<{ error?: string }>; 
}) {
  const params = await (searchParams ?? Promise.resolve({ error: undefined }));
  const error = params?.error;
  const errorMessage = error === "missing_fields" ? "Nama dan nomor wajib diisi." : error === "invalid_channel" ? "Channel tidak valid." : null;

  const session = await getSession();
  const channels = session
    ? await prisma.channel.findMany({
        where: { tenantId: session.tenantId },
        orderBy: { channelName: "asc" }
      })
    : [];

  return (
    <ShellPage shell="admin" title="Create Contact" description="Form tambah contact manual untuk inbox dan broadcast.">
      <SectionCard title="Contact form">
        <form action={createContact} className="grid gap-4 md:max-w-2xl md:grid-cols-2">
          {errorMessage ? (
            <div className="md:col-span-2 rounded-xl border border-warning/30 bg-warning/10 p-3 text-sm text-warning">
              {errorMessage}
            </div>
          ) : null}
          <input required name="fullName" className="rounded-xl border border-line px-4 py-3" placeholder="Full name" />
          <input required name="phoneNumber" className="rounded-xl border border-line px-4 py-3" placeholder="Phone number" />
          <input name="email" className="rounded-xl border border-line px-4 py-3" placeholder="Email" />
          <input name="countryCode" className="rounded-xl border border-line px-4 py-3" placeholder="Country code" />
          <label className="md:col-span-2 block text-sm">
            <span className="text-on-surface-variant">Channel</span>
            <select name="channelId" defaultValue="" className="mt-2 w-full rounded-xl border border-line px-4 py-3">
              <option value="">Tidak terkait channel</option>
              {channels.map((channel) => (
                <option key={channel.id} value={channel.id}>
                  {channel.channelName} ({channel.displayPhoneNumber})
                </option>
              ))}
            </select>
          </label>
          <label className="md:col-span-2 block text-sm">
            <span className="text-on-surface-variant">Tags (pisah koma)</span>
            <input name="tags" className="mt-2 w-full rounded-xl border border-line px-4 py-3" placeholder="Enterprise, Hot Lead" />
          </label>
          <label className="md:col-span-2 block text-sm">
            <span className="text-on-surface-variant">Opt-in status</span>
            <select name="optInStatus" defaultValue="UNKNOWN" className="mt-2 w-full rounded-xl border border-line px-4 py-3">
              <option value="UNKNOWN">Unknown</option>
              <option value="OPTED_IN">Opted in</option>
              <option value="OPTED_OUT">Opted out</option>
            </select>
          </label>
          <div className="md:col-span-2">
            <Button type="submit" className="w-full">
              Save contact
            </Button>
          </div>
        </form>
      </SectionCard>
    </ShellPage>
  );
}