"use client";

import { useState } from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { brand } from "@/data/brand";
import { Link } from "@/i18n/routing";
import { LanguageSwitcher } from "@/components/layout/language-switcher";
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 { ArrowLeft } from "lucide-react";

export default function RegisterOrganisationPage() {
  const t = useTranslations();
  const [submitted, setSubmitted] = useState(false);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSubmitted(true);
    toast.success(t("register.success"));
  }

  return (
    <div className="relative flex min-h-screen flex-col px-4 py-8 md:px-8">
      <div className="mx-auto flex w-full max-w-lg items-center justify-between">
        <div className="flex items-center gap-3">
          <Image src={brand.logo} alt={brand.shortName} width={36} height={36} />
          <p className="font-display text-lg font-semibold">{t("common.appName")}</p>
        </div>
        <LanguageSwitcher />
      </div>

      <div className="mx-auto mt-10 w-full max-w-lg">
        <Button variant="ghost" size="sm" className="mb-4 gap-2" render={<Link href="/login" />}>
          <ArrowLeft className="size-4" />
          {t("common.back")}
        </Button>

        <Card className="rounded-2xl shadow-none">
          <CardHeader>
            <CardTitle>{t("register.orgTitle")}</CardTitle>
            <CardDescription>{t("register.orgSubtitle")}</CardDescription>
          </CardHeader>
          <CardContent>
            {submitted ? (
              <div className="space-y-3 rounded-xl border border-border bg-muted/40 p-4 text-sm">
                <p className="font-medium">{t("register.success")}</p>
                <p className="text-muted-foreground">{t("organisation.pendingNote")}</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="legalName">{t("register.legalName")}</Label>
                  <Input id="legalName" name="legalName" required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="tin">{t("register.tin")}</Label>
                  <Input id="tin" name="tin" required />
                </div>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="billingEmail">{t("register.billingEmail")}</Label>
                    <Input id="billingEmail" name="billingEmail" type="email" required />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="billingPhone">{t("register.billingPhone")}</Label>
                    <Input id="billingPhone" name="billingPhone" type="tel" required />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="headcount">{t("register.headcount")}</Label>
                  <Input id="headcount" name="headcount" type="number" min={1} required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="adminName">{t("register.adminName")}</Label>
                  <Input id="adminName" name="adminName" required />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="adminEmail">{t("register.adminEmail")}</Label>
                  <Input id="adminEmail" name="adminEmail" type="email" required />
                </div>
                <Button type="submit" className="w-full">
                  {t("common.submit")}
                </Button>
              </form>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}