"use client";

import { useActionState } from "react";
import { Buildings, CircleNotch, ShieldCheck, ArrowRight } from '@/lib/icons';

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, importWorkspaceAction } from "@/lib/appwrite/tenant-actions";
import { initialWorkspaceState } from "@/lib/appwrite/tenant-types";

interface Props {
  userName?: string;
  crossAppTeams?: Array<{ $id: string; name: string }>;
}

export function CreateWorkspaceForm({ userName, crossAppTeams = [] }: Props) {
  const [state, formAction, isPending] = useActionState(
    createWorkspaceAction,
    initialWorkspaceState,
  );
  const [, importFormAction, isImporting] = useActionState(
    importWorkspaceAction,
    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">Kovak Emlak CRM</span>
      </div>

      {/* Cross-app import section */}
      {crossAppTeams.length > 0 && (
        <Card className="border-primary/20 bg-primary/5">
          <CardHeader className="pb-3">
            <CardTitle className="text-base">Mevcut şirketinizi ekleyin</CardTitle>
            <CardDescription className="text-xs">
              Diğer bir KovakSoft uygulamasında kayıtlı şirketinizi tek tıkla buraya ekleyebilirsiniz.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-2">
            {crossAppTeams.map((team) => (
              <form key={team.$id} action={importFormAction}>
                <input type="hidden" name="teamId" value={team.$id} />
                <button
                  type="submit"
                  disabled={isImporting}
                  className="flex w-full items-center justify-between rounded-lg border bg-background px-4 py-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-60"
                >
                  <div className="flex items-center gap-2.5">
                    <Buildings className="size-4 text-muted-foreground" />
                    <span>{team.name}</span>
                  </div>
                  {isImporting ? (
                    <CircleNotch className="size-4 animate-spin text-muted-foreground" />
                  ) : (
                    <ArrowRight className="size-4 text-muted-foreground" />
                  )}
                </button>
              </form>
            ))}
          </CardContent>
        </Card>
      )}

      {crossAppTeams.length > 0 && (
        <div className="relative">
          <div className="absolute inset-0 flex items-center">
            <span className="w-full border-t" />
          </div>
          <div className="relative flex justify-center text-xs uppercase">
            <span className="bg-muted px-2 text-muted-foreground">veya yeni oluştur</span>
          </div>
        </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">
            <Buildings className="size-6" />
          </div>
          <CardTitle className="text-2xl">
            {userName ? `Hoş geldiniz, ${userName}` : "Çalışma alanı oluştur"}
          </CardTitle>
          <CardDescription>
            Ofis 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">Ofis / şirket adı *</Label>
              <Input
                id="companyName"
                name="companyName"
                type="text"
                placeholder="Kovak Emlak Ofisi"
                autoComplete="organization"
                required
                autoFocus
              />
            </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 ? (
                <>
                  <CircleNotch 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>
  );
}
