'use client';

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

// 시안 1: 현재 디자인
function FindPwDesign1() {
  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="email" placeholder="이메일 주소를 입력해주세요" />
                <p className="text-xs text-gray-500">가입 시 등록한 이메일 주소를 입력해주세요</p>
              </div>
              <Button className="w-full">인증번호 발송</Button>
              <Button variant="outline" className="w-full border-2 border-primary text-primary">로그인</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"><span className="bg-white px-2 text-gray-500">계정이 없으신가요?</span></div>
              </div>
              <Button variant="outline" className="w-full border-2 border-primary text-primary">회원가입</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 2: 아이콘 + 간결한 레이아웃
function FindPwDesign2() {
  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 h-11" />
                </div>
              </div>
              <div className="space-y-2">
                <label className="text-sm font-medium">이메일</label>
                <div className="relative">
                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                  <Input type="email" placeholder="이메일을 입력하세요" className="pl-10 h-11" />
                </div>
              </div>
              <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"><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">로그인으로 돌아가기</Button>
              <div className="text-center">
                <a href="#" className="text-sm text-gray-500 hover:text-primary">아이디를 잊으셨나요?</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 3: 뒤로가기 버튼 + 좌측 정렬
function FindPwDesign3() {
  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">
              <a href="#" className="flex items-center gap-1 text-sm text-gray-500 hover:text-primary mb-2">
                <ArrowLeft className="w-4 h-4" />
                로그인으로 돌아가기
              </a>
              <div className="flex flex-col gap-1 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">
                <label className="text-sm font-medium">이메일</label>
                <Input type="email" placeholder="이메일을 입력하세요" className="h-11" />
              </div>
              <Button className="w-full h-11 mt-2">인증번호 발송</Button>
              <div className="flex items-center justify-center gap-4 text-sm text-gray-500 mt-2">
                <a href="#" className="hover:text-primary">아이디 찾기</a>
                <span>|</span>
                <a href="#" className="hover:text-primary">회원가입</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 4: 로그인과 통일된 스타일 (추천)
function FindPwDesign4() {
  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>
                <Input type="email" placeholder="이메일을 입력하세요" className="h-11" />
              </div>
              <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"><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">로그인</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 FindPwDemo() {
  const designs = [
    { id: "current", name: "현재", description: "현재 적용된 디자인", features: ["기존 레이아웃"], component: FindPwDesign1 },
    { id: "icon", name: "시안 2", description: "아이콘 + 간결한 레이아웃", features: ["입력 필드 아이콘", "간결한 하단 링크"], component: FindPwDesign2 },
    { id: "back", name: "시안 3", description: "뒤로가기 버튼 + 좌측 정렬 제목", features: ["뒤로가기 버튼", "좌측 정렬"], component: FindPwDesign3 },
    { id: "unified", name: "시안 4", description: "로그인과 통일된 스타일 (추천)", features: ["로그인 스타일 통일", "아이디 찾기 위치"], component: FindPwDesign4 },
  ];

  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-4 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>
  );
}
