"use client";

import { useActionState } from "react";
import { Building2, Loader2, ShieldCheck } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Logo } from "@/components/logo";
import { createWorkspaceAction } from "@/lib/appwrite/tenant-actions";
import { initialWorkspaceState } from "@/lib/appwrite/tenant-types";

export function CreateWorkspaceForm({ userName }: { userName?: string }) {
  const [state, formAction, isPending] = useActionState(
    createWorkspaceAction,
    initialWorkspaceState,
  );

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-center gap-2 font-medium">
        <div className="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
          <Logo size={22} />
        </div>
        <span className="text-xl font-semibold">İşletmem</span>
      </div>

      <Card>
        <CardHeader className="text-center">
          <div className="bg-primary/10 text-primary mx-auto mb-2 flex size-12 items-center justify-center rounded-full">
            <Building2 className="size-6" />
          </div>
          <CardTitle className="text-2xl">
            {userName ? `Hoş geldiniz, ${userName}` : "Çalışma alanı oluştur"}
          </CardTitle>
          <CardDescription>
            Şirketinizin bilgilerini girin — birkaç saniyede çalışma alanınız hazır.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form action={formAction} className="flex flex-col gap-5">
            <div className="grid gap-3">
              <Label htmlFor="companyName">Şirket adı *</Label>
              <Input
                id="companyName"
                name="companyName"
                type="text"
                placeholder="KovakSoft Yazılım Ltd."
                autoComplete="organization"
                required
                autoFocus
              />
            </div>

            <div className="grid gap-3">
              <Label htmlFor="companyTaxId">
                Vergi numarası <span className="text-muted-foreground text-xs">(opsiyonel)</span>
              </Label>
              <Input
                id="companyTaxId"
                name="companyTaxId"
                type="text"
                placeholder="1234567890"
                inputMode="numeric"
              />
            </div>

            <div className="grid gap-3">
              <Label htmlFor="companyPhone">
                Telefon <span className="text-muted-foreground text-xs">(opsiyonel)</span>
              </Label>
              <Input
                id="companyPhone"
                name="companyPhone"
                type="tel"
                placeholder="+90 555 123 45 67"
                autoComplete="tel"
              />
            </div>

            {state.error && (
              <p className="text-destructive text-sm text-center" role="alert">
                {state.error}
              </p>
            )}

            <Button type="submit" className="w-full" disabled={isPending}>
              {isPending ? (
                <>
                  <Loader2 className="size-4 animate-spin" />
                  Hazırlanıyor...
                </>
              ) : (
                "Çalışma alanını oluştur"
              )}
            </Button>

            <p className="text-muted-foreground flex items-center justify-center gap-1.5 text-xs">
              <ShieldCheck className="size-3.5" />
              Verileriniz yalnızca sizin ekibinize özel — multi-tenant izolasyon
            </p>
          </form>
        </CardContent>
      </Card>

      <p className="text-muted-foreground text-center text-xs">
        Bu bilgileri daha sonra Profil ayarlarından düzenleyebilirsiniz.
      </p>
    </div>
  );
}
