"use client";

import { useActionState, useState } from "react";
import { Building2, Loader2, ShieldCheck, ArrowRight, FlaskConical, Stethoscope } 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 { cn } from "@/lib/utils";
import { createWorkspaceAction, importWorkspaceAction } from "@/lib/appwrite/tenant-actions";
import { initialWorkspaceState } from "@/lib/appwrite/tenant-types";

type Kind = "lab" | "clinic";

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

export function CreateWorkspaceForm({
  userName,
  crossAppTeams = [],
  initialKind = null,
}: Props) {
  const [kind, setKind] = useState<Kind | null>(initialKind);
  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">DLS</span>
      </div>

      {crossAppTeams.length > 0 && (
        <Card className="border-primary/20 bg-primary/5">
          <CardHeader className="pb-3">
            <CardTitle className="text-base">Mevcut çalışma alanınızı ekleyin</CardTitle>
            <CardDescription className="text-xs">
              Diğer bir Kovak Yazılım uygulamasında kayıtlı çalışma alanınızı buraya bağlayın.
            </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} />
                <input type="hidden" name="kind" value={kind ?? ""} />
                <button
                  type="submit"
                  disabled={isImporting || !kind}
                  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:cursor-not-allowed disabled:opacity-60"
                >
                  <div className="flex items-center gap-2.5">
                    <Building2 className="size-4 text-muted-foreground" />
                    <span>{team.name}</span>
                  </div>
                  {isImporting ? (
                    <Loader2 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">
            <Building2 className="size-6" />
          </div>
          <CardTitle className="text-2xl">
            {userName ? `Hoş geldiniz, ${userName}` : "Çalışma alanı oluştur"}
          </CardTitle>
          <CardDescription>
            Hesap türünüzü seçin ve şirket bilgilerini girin — birkaç saniyede hazır.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form action={formAction} className="flex flex-col gap-5">
            <div className="grid gap-3">
              <Label>Hesap türü *</Label>
              <div className="grid grid-cols-2 gap-3">
                <KindCard
                  selected={kind === "clinic"}
                  onClick={() => setKind("clinic")}
                  icon={<Stethoscope className="size-5" />}
                  title="Klinik"
                  description="Diş kliniği — lab'a iş gönderir."
                />
                <KindCard
                  selected={kind === "lab"}
                  onClick={() => setKind("lab")}
                  icon={<FlaskConical className="size-5" />}
                  title="Laboratuvar"
                  description="Diş laboratuvarı — iş alır, protez üretir."
                />
              </div>
              <input type="hidden" name="kind" value={kind ?? ""} />
            </div>

            <div className="grid gap-3">
              <Label htmlFor="companyName">Şirket adı *</Label>
              <Input
                id="companyName"
                name="companyName"
                type="text"
                placeholder={kind === "lab" ? "Örn. Beyaz Diş Laboratuvarı" : "Örn. Atlas Diş Polikliniği"}
                autoComplete="organization"
                required
              />
            </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 || !kind}>
              {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 size özel — multi-tenant izolasyon
            </p>
          </form>
        </CardContent>
      </Card>

      <p className="text-muted-foreground text-center text-xs">
        Şirket bilgilerini daha sonra Ayarlar üzerinden düzenleyebilirsiniz.
      </p>
    </div>
  );
}

function KindCard({
  selected,
  onClick,
  icon,
  title,
  description,
}: {
  selected: boolean;
  onClick: () => void;
  icon: React.ReactNode;
  title: string;
  description: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={selected}
      className={cn(
        "flex flex-col items-start gap-1.5 rounded-lg border bg-background p-3 text-left transition-colors",
        selected
          ? "border-primary bg-primary/5 ring-1 ring-primary/40"
          : "hover:bg-accent hover:text-accent-foreground",
      )}
    >
      <span className={cn("flex size-8 items-center justify-center rounded-md", selected ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground")}>{icon}</span>
      <span className="text-sm font-medium">{title}</span>
      <span className="text-muted-foreground text-xs">{description}</span>
    </button>
  );
}
