import { getAllClientsWithPayments } from "@/lib/admin-queries";
import { createProject } from "@/app/admin/projects/project-actions";
import { redirect } from "next/navigation";

export const revalidate = 0;

export default async function NewProjectPage({
  searchParams,
}: {
  searchParams: Promise<{ client_id?: string }>;
}) {
  const { client_id } = await searchParams;
  const clients = await getAllClientsWithPayments();
  const activeClients = clients.filter((c) => !c.archived);

  async function handleCreate(fd: FormData) {
    "use server";
    const result = await createProject(fd);
    redirect(`/admin/projects/${result.projectId}`);
  }

  return (
    <div className="max-w-md mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-[#1a1a1a]">Nuovo Progetto</h1>
        <p className="text-sm text-[#71717a] mt-1">Crea un nuovo progetto per un cliente esistente.</p>
      </div>

      <div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
        <form action={handleCreate} className="space-y-4">
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-[#1a1a1a] mb-1">
              Nome Progetto (Brand)
            </label>
            <input
              id="name"
              name="name"
              type="text"
              required
              placeholder="es. Brand Blu"
              className="w-full border border-[#e5e7eb] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1A463C]/20"
            />
          </div>

          <div>
            <label htmlFor="client_id" className="block text-sm font-medium text-[#1a1a1a] mb-1">
              Cliente
            </label>
            <select
              id="client_id"
              name="client_id"
              required
              defaultValue={client_id ?? ""}
              className="w-full border border-[#e5e7eb] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1A463C]/20"
            >
              <option value="">Seleziona cliente...</option>
              {activeClients.map((c) => (
                <option key={c.id} value={c.id}>{c.name}</option>
              ))}
            </select>
          </div>

          <div className="flex gap-3 pt-2">
            <button
              type="submit"
              className="flex-1 bg-[#1A463C] text-white py-2 rounded-lg text-sm font-medium hover:bg-[#1A463C]/90 transition-colors"
            >
              Crea Progetto
            </button>
            <a
              href="/admin/projects"
              className="flex-1 text-center border border-[#e5e7eb] py-2 rounded-lg text-sm text-[#71717a] hover:bg-[#f9f9f9] transition-colors"
            >
              Annulla
            </a>
          </div>
        </form>
      </div>
    </div>
  );
}