"use client"

import * as React from "react"
import { useToast } from "@/hooks/use-toast"
import { useRouter, useParams, usePathname } from "next/navigation"
import { useTranslation } from "@/i18n/client"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { GlobeIcon, ChevronDownIcon, Loader, Ship } from "lucide-react"
import { languages } from "@/config/language"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { siteConfig } from "@/config/site"

import { checkJoinPortal } from "@/lib/vendors/service"
import Image from "next/image"
// ↑ 실제 경로 맞춤 수정 (ex: "@/app/[lng]/actions/joinPortal" 등)

interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> { }

export function CompanyAuthForm({ className, ...props }: UserAuthFormProps) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false)
  const router = useRouter()
  const { toast } = useToast()
  const params = useParams()
  const pathname = usePathname()

  const lng = params.lng as string
  const { t, i18n } = useTranslation(lng, "login")

  const handleChangeLanguage = (lang: string) => {
    const segments = pathname.split("/")
    segments[1] = lang
    router.push(segments.join("/"))
  }

  const currentLanguageText =
    i18n.language === "ko"
      ? t("languages.korean")
      : i18n.language === "ja"
        ? t("languages.japanese")
        : t("languages.english")

  // ---------------------------
  // 1) onSubmit -> 서버 액션 호출
  // ---------------------------
  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true)

    const formData = new FormData(event.currentTarget)
    const taxID = formData.get("taxid")?.toString().trim()

    if (!taxID) {
      toast({
        variant: "destructive",
        title: "오류",
        description: "Tax ID를 입력해주세요.",
      })
      setIsLoading(false)
      return
    }

    try {
      // ---------------------------
      // 2) 서버 액션 호출
      // ---------------------------
      const result = await checkJoinPortal(taxID)

      if (result.success) {
        toast({
          variant: "default",
          title: "성공",
          description: "가입 신청이 가능합니다",
        })
        // 가입 가능 → signup 페이지 이동
        router.push(`/partners/signup?taxID=${taxID}`)
      } else {
        toast({
          variant: "destructive",
          title: "가입이 진행 중이거나 완료된 회사",
          description: `${result.data} 에 연락하여 계정 생성 요청을 하시기 바랍니다.`,
        })
      }
    } catch (error: any) {
      console.error(error)
      toast({
        variant: "destructive",
        title: "오류",
        description: "서버 액션 호출에 실패했습니다. 잠시 후 다시 시도해주세요.",
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="container relative flex h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">

      {/* Left BG 이미지 영역 */}

      <div className="flex flex-col w-full h-screen lg:p-2">
        {/* Top bar */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {/* <img
              src="/images/logo.png"
              alt="logo"
              className="h-8 w-auto"
            /> */}
            <Ship className="w-4 h-4" />
            <span className="text-md font-bold">eVCP</span>
          </div>

          {/* Remove 'absolute right-4 top-4 ...', just use buttonVariants */}
          <Link
            href="/login"
            className={cn(
              buttonVariants({ variant: "ghost" })
            )}
          >
            Login
          </Link>
        </div>
        <div className="flex-1 flex items-center justify-center">
          <div className="mx-auto w-full flex flex-col space-y-6 sm:w-[350px]">
            <div className="flex flex-col space-y-2 text-center">
              <h1 className="text-2xl font-semibold tracking-tight">
                {t("heading")}
              </h1>
              <p className="text-sm text-muted-foreground">{t("subheading")}</p>
            </div>

            <div className={cn("grid gap-6", className)} {...props}>
              <form onSubmit={onSubmit}>
                <div className="grid gap-2">
                  <div className="grid gap-1">
                    <label className="sr-only" htmlFor="taxid">
                      Business Number / Tax ID
                    </label>
                    <input
                      id="taxid"
                      name="taxid"
                      placeholder="880-81-01710"
                      type="text"
                      autoCapitalize="none"
                      autoComplete="off"
                      autoCorrect="off"
                      disabled={isLoading}
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
                    />
                  </div>
                  <Button type="submit" disabled={isLoading} variant="samsung">
                    {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
                    {t("joinButton")}
                  </Button>

                  {/* 언어 선택 Dropdown */}
                  <div className="mx-auto">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="flex items-center gap-2">
                          <GlobeIcon className="h-4 w-4" />
                          <span>{currentLanguageText}</span>
                          <ChevronDownIcon className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuRadioGroup
                          value={i18n.language}
                          onValueChange={(value) => handleChangeLanguage(value)}
                        >
                          {languages.map((v) => (
                            <DropdownMenuRadioItem key={v.value} value={v.value}>
                              {t(v.labelKey)}
                            </DropdownMenuRadioItem>
                          ))}
                        </DropdownMenuRadioGroup>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
              </form>
            </div>
            <p className="px-8 text-center text-sm text-muted-foreground">
              {t("agreement")}{" "}
              <Link
                href="/terms"
                className="underline underline-offset-4 hover:text-primary"
              >
                {t("termsOfService")}
              </Link>{" "}
              {t("and")}{" "}
              <Link
                href="/privacy"
                className="underline underline-offset-4 hover:text-primary"
              >
                {t("privacyPolicy")}
              </Link>
              .
            </p>
          </div>
        </div>

      </div>


      {/* Right Content */}
      <div className="relative hidden h-full flex-col p-10 text-white dark:border-r md:flex">
        {/* Image 컴포넌트로 대체 */}
        <div className="absolute inset-0">
          <Image
            src="/images/02.jpg"
            alt="Background image"
            fill
            priority
            sizes="(max-width: 1024px) 100vw, 50vw"
            className="object-cover"
          />
        </div>
        <div className="relative z-10 mt-auto">
          <blockquote className="space-y-2">
            <p className="text-sm">&ldquo;{t("blockquote")}&rdquo;</p>
            {/* <footer className="text-sm">SHI</footer> */}
          </blockquote>
        </div>
      </div>

    </div>
  )
}