import { createClient } from "./actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import Link from "next/link";

export default function NewClientPage() {
  return (
    <div className="max-w-xl">
      <div className="mb-6">
        <Link href="/admin" className="text-sm text-gray-500 hover:text-gray-700">
          ← Clienti
        </Link>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Nuovo cliente</CardTitle>
        </CardHeader>
        <CardContent>
          <form action={createClient} className="space-y-4">
            <div className="space-y-1">
              <Label htmlFor="name">Nome cliente</Label>
              <Input
                id="name"
                name="name"
                type="text"
                placeholder="es. Marco Rossi"
                required
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="brand_name">Nome brand</Label>
              <Input
                id="brand_name"
                name="brand_name"
                type="text"
                placeholder="es. Rossi Studio"
                required
              />
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="space-y-1">
                <Label htmlFor="email">Email</Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="es. marco@rossistudio.it"
                />
              </div>
              <div className="space-y-1">
                <Label htmlFor="phone">Telefono</Label>
                <Input
                  id="phone"
                  name="phone"
                  type="tel"
                  placeholder="es. +39 333 1234567"
                />
              </div>
            </div>
            <div className="space-y-1">
              <Label htmlFor="brief">Brief del progetto</Label>
              <Textarea
                id="brief"
                name="brief"
                placeholder="Descrizione del progetto e degli obiettivi..."
                rows={5}
                required
              />
            </div>
            <div className="flex gap-3 pt-2">
              <Button type="submit">Crea cliente</Button>
              <Button variant="outline" asChild>
                <Link href="/admin">Annulla</Link>
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}