'use client';

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import Image from "next/image";
import { LogIn, Eye, EyeOff, User, Lock } from "lucide-react";

// 시안 1: 현재 디자인
function LoginDesign1() {
  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-white">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[320px] lg:max-w-sm">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center mb-2">
                <h1 className="text-2xl font-bold">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">아이디</label>
                <Input placeholder="아이디를 입력하세요" />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">비밀번호</label>
                <Input type="password" placeholder="비밀번호를 입력하세요" />
              </div>
              <Button className="w-full">로그인</Button>
              <div className="relative my-2">
                <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-white px-2 text-muted-foreground">계정이 없으신가요?</span>
                </div>
              </div>
              <Button variant="outline" className="w-full border-2 border-primary text-primary">
                회원가입
              </Button>
              <div className="text-center text-sm">
                <a href="#" className="hover:underline">아이디 찾기</a>
                {" | "}
                <a href="#" className="hover:underline">비밀번호 찾기</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 2: 현재 + 비밀번호 토글 + 아이콘
function LoginDesign2() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-white">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[320px] lg:max-w-sm">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center mb-2">
                <h1 className="text-2xl font-bold">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">아이디</label>
                <div className="relative">
                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input placeholder="아이디를 입력하세요" className="pl-10" />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">비밀번호</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="비밀번호를 입력하세요"
                    className="pl-10 pr-10"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>
              <Button className="w-full">
                <LogIn className="w-4 h-4 mr-2" />
                로그인
              </Button>
              <div className="relative my-2">
                <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-white px-2 text-muted-foreground">계정이 없으신가요?</span>
                </div>
              </div>
              <Button variant="outline" className="w-full border-2 border-primary text-primary">
                회원가입
              </Button>
              <div className="text-center text-sm">
                <a href="#" className="hover:underline">아이디 찾기</a>
                {" | "}
                <a href="#" className="hover:underline">비밀번호 찾기</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 3: 현재 + 더 큰 입력 필드 + 부드러운 그림자
function LoginDesign3() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-gradient-to-br from-slate-50 to-slate-100 relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-white">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-12">
          <div className="w-full max-w-[360px]">
            <div className="flex flex-col gap-5">
              <div className="flex flex-col items-center gap-2 text-center mb-4">
                <h1 className="text-2xl font-bold text-gray-900">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-gray-700">아이디</label>
                <Input
                  placeholder="아이디를 입력하세요"
                  className="h-12 text-base shadow-sm border-gray-200 focus:border-primary focus:ring-primary"
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium text-gray-700">비밀번호</label>
                <div className="relative">
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="비밀번호를 입력하세요"
                    className="h-12 text-base pr-10 shadow-sm border-gray-200 focus:border-primary focus:ring-primary"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                  </button>
                </div>
              </div>
              <Button className="w-full h-12 text-base shadow-md hover:shadow-lg transition-shadow">
                로그인
              </Button>
              <div className="relative my-2">
                <div className="absolute inset-0 flex items-center">
                  <span className="w-full border-t border-gray-200" />
                </div>
                <div className="relative flex justify-center text-xs">
                  <span className="bg-white px-3 text-gray-500">계정이 없으신가요?</span>
                </div>
              </div>
              <Button variant="outline" className="w-full h-12 text-base border-2 border-primary text-primary hover:bg-primary hover:text-white transition-colors">
                회원가입
              </Button>
              <div className="text-center text-sm text-gray-500">
                <a href="#" className="hover:text-primary transition-colors">아이디 찾기</a>
                <span className="mx-2">|</span>
                <a href="#" className="hover:text-primary transition-colors">비밀번호 찾기</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 4: 현재 + 아이디 저장 + 간결한 링크
function LoginDesign4() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-white">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[320px] lg:max-w-sm">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center mb-2">
                <h1 className="text-2xl font-bold">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">아이디</label>
                <Input placeholder="아이디를 입력하세요" className="h-11" />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="text-sm font-medium">비밀번호</label>
                  <a href="#" className="text-xs text-primary hover:underline">비밀번호 찾기</a>
                </div>
                <div className="relative">
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="비밀번호를 입력하세요"
                    className="h-11 pr-10"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" className="rounded border-gray-300 text-primary focus:ring-primary" />
                <span className="text-sm text-gray-600">아이디 저장</span>
              </label>
              <Button className="w-full h-11">로그인</Button>
              <div className="relative my-2">
                <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-white px-2 text-muted-foreground">또는</span>
                </div>
              </div>
              <Button variant="outline" className="w-full h-11 border-2 border-primary text-primary">
                회원가입
              </Button>
              <div className="text-center">
                <a href="#" className="text-sm text-gray-500 hover:text-primary">아이디를 잊으셨나요?</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 5: 현재 + 컬러 강조 배경
function LoginDesign5() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-primary/5 relative hidden lg:flex items-center justify-center">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-primary/5" />
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-white">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
          <div className="w-full max-w-[320px] lg:max-w-sm">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center mb-2">
                <h1 className="text-2xl font-bold text-primary">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">아이디</label>
                <div className="relative">
                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary/60" />
                  <Input
                    placeholder="아이디를 입력하세요"
                    className="pl-10 h-11 border-primary/20 focus:border-primary"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">비밀번호</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-primary/60" />
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="비밀번호를 입력하세요"
                    className="pl-10 pr-10 h-11 border-primary/20 focus:border-primary"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>
              <Button className="w-full h-11 bg-primary hover:bg-primary/90">
                <LogIn className="w-4 h-4 mr-2" />
                로그인
              </Button>
              <div className="flex items-center justify-between text-sm">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" className="rounded border-primary/30 text-primary focus:ring-primary" />
                  <span className="text-gray-600">아이디 저장</span>
                </label>
                <a href="#" className="text-primary hover:underline">비밀번호 찾기</a>
              </div>
              <div className="relative my-2">
                <div className="absolute inset-0 flex items-center">
                  <span className="w-full border-t border-primary/20" />
                </div>
                <div className="relative flex justify-center text-xs">
                  <span className="bg-white px-2 text-gray-500">계정이 없으신가요?</span>
                </div>
              </div>
              <Button variant="outline" className="w-full h-11 border-2 border-primary text-primary hover:bg-primary/5">
                회원가입
              </Button>
              <div className="text-center">
                <a href="#" className="text-sm text-gray-500 hover:text-primary">아이디 찾기</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 6: 현재 + 라운드 스타일
function LoginDesign6() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div className="grid min-h-[600px] lg:grid-cols-2 border rounded-lg overflow-hidden">
      <div className="bg-white relative hidden lg:flex items-center justify-center">
        <Image
          src="/logo-graphic.svg"
          alt="로고"
          fill
          className="object-contain p-16"
          priority
        />
      </div>
      <div className="flex flex-col p-6 md:p-10 bg-slate-50">
        <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-12">
          <div className="w-full max-w-[360px] bg-white p-8 rounded-2xl shadow-lg">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center mb-2">
                <h1 className="text-2xl font-bold">로그인</h1>
                <p className="text-muted-foreground text-sm">
                  한우 유전능력 컨설팅 서비스
                </p>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">아이디</label>
                <Input
                  placeholder="아이디를 입력하세요"
                  className="h-11 rounded-xl bg-slate-50 border-0 focus:bg-white focus:ring-2 focus:ring-primary/20"
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">비밀번호</label>
                <div className="relative">
                  <Input
                    type={showPassword ? "text" : "password"}
                    placeholder="비밀번호를 입력하세요"
                    className="h-11 pr-10 rounded-xl bg-slate-50 border-0 focus:bg-white focus:ring-2 focus:ring-primary/20"
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                  >
                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                  </button>
                </div>
              </div>
              <div className="flex items-center justify-between text-sm">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input type="checkbox" className="rounded-md border-gray-300" />
                  <span className="text-gray-600">아이디 저장</span>
                </label>
                <a href="#" className="text-primary hover:underline">비밀번호 찾기</a>
              </div>
              <Button className="w-full h-11 rounded-xl">로그인</Button>
              <Button variant="outline" className="w-full h-11 rounded-xl border-2">
                회원가입
              </Button>
              <div className="text-center">
                <a href="#" className="text-sm text-gray-500 hover:text-primary">아이디 찾기</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function AuthPagesDemo() {
  const designs = [
    {
      id: "current",
      name: "현재",
      description: "현재 적용된 디자인",
      features: ["기존 레이아웃"],
      component: LoginDesign1
    },
    {
      id: "icon",
      name: "시안 2",
      description: "아이콘 + 비밀번호 토글 추가",
      features: ["입력 필드 아이콘", "비밀번호 보기"],
      component: LoginDesign2
    },
    {
      id: "large",
      name: "시안 3",
      description: "더 큰 입력 필드 + 그림자",
      features: ["h-12 입력필드", "그림자 효과", "부드러운 배경"],
      component: LoginDesign3
    },
    {
      id: "save",
      name: "시안 4",
      description: "아이디 저장 + 간결한 링크",
      features: ["아이디 저장", "비밀번호 찾기 위치 변경"],
      component: LoginDesign4
    },
    {
      id: "color",
      name: "시안 5",
      description: "브랜드 컬러 강조",
      features: ["컬러 배경", "컬러 아이콘", "컬러 제목"],
      component: LoginDesign5
    },
    {
      id: "round",
      name: "시안 6",
      description: "라운드 카드 스타일",
      features: ["라운드 입력필드", "카드 레이아웃", "부드러운 그림자"],
      component: LoginDesign6
    }
  ];

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">로그인 페이지 디자인 시안</h1>
          <p className="text-gray-600 mt-2">
            현재 디자인 기반 개선안 - 각 탭을 클릭하여 비교해보세요
          </p>
        </div>

        <Tabs defaultValue="current" className="space-y-6">
          <TabsList className="grid grid-cols-6 w-full h-auto p-1">
            {designs.map((design) => (
              <TabsTrigger
                key={design.id}
                value={design.id}
                className="py-3 text-xs sm:text-sm data-[state=active]:bg-primary data-[state=active]:text-white"
              >
                {design.name}
              </TabsTrigger>
            ))}
          </TabsList>

          {designs.map((design) => (
            <TabsContent key={design.id} value={design.id} className="space-y-4">
              <div className="bg-white p-4 rounded-lg border">
                <div className="flex items-center justify-between flex-wrap gap-2">
                  <div>
                    <h2 className="text-lg font-semibold">{design.name}: {design.description}</h2>
                  </div>
                  <div className="flex gap-2 flex-wrap">
                    {design.features.map((feature, idx) => (
                      <Badge key={idx} variant="secondary">{feature}</Badge>
                    ))}
                  </div>
                </div>
              </div>
              <div className="bg-white p-4 rounded-lg border">
                <design.component />
              </div>
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </div>
  );
}
