'use client';

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import Image from "next/image";
import { CheckCircle2, ChevronLeft, ChevronRight } from "lucide-react";

// 시안 1: 현재 디자인 (3단계 스텝)
function SignupDesign1() {
  const [step, setStep] = useState(1);

  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">
                <h1 className="text-2xl font-bold">회원가입</h1>
                <p className="text-muted-foreground text-sm">
                  {step === 1 && "기본 정보"}
                  {step === 2 && "이메일 인증"}
                  {step === 3 && "추가 정보"}
                </p>
              </div>
              {/* 스텝 인디케이터 */}
              <div className="flex items-center justify-center gap-2 py-2">
                {[1, 2, 3].map((s) => (
                  <div key={s} className="flex items-center">
                    <div className={cn(
                      "w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium",
                      step === s ? "bg-primary text-white" : step > s ? "bg-primary/20 text-primary" : "bg-gray-100 text-gray-400"
                    )}>
                      {step > s ? <CheckCircle2 className="w-4 h-4" /> : s}
                    </div>
                    {s < 3 && <div className={cn("w-8 h-0.5 mx-1", step > s ? "bg-primary/20" : "bg-gray-200")} />}
                  </div>
                ))}
              </div>
              {step === 1 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">회원 유형 *</label>
                    <Select><SelectTrigger><SelectValue placeholder="회원 유형을 선택하세요" /></SelectTrigger>
                      <SelectContent><SelectItem value="FARM">농가</SelectItem><SelectItem value="CNSLT">컨설턴트</SelectItem></SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">아이디 *</label>
                    <Input placeholder="아이디를 입력하세요 (4자 이상)" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이름 *</label>
                    <Input placeholder="이름을 입력하세요" />
                  </div>
                </>
              )}
              {step === 2 && (
                <div className="space-y-2">
                  <label className="text-sm font-medium">이메일 *</label>
                  <Input type="email" placeholder="이메일을 입력하세요" />
                  <Button variant="outline" className="w-full">인증번호 발송</Button>
                </div>
              )}
              {step === 3 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">휴대폰 번호 *</label>
                    <Input placeholder="010-0000-0000" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 *</label>
                    <Input type="password" placeholder="비밀번호 (8자 이상)" />
                  </div>
                </>
              )}
              <div className="flex gap-2 pt-2">
                {step > 1 && (
                  <Button variant="outline" onClick={() => setStep(s => s - 1)} className="flex-1">
                    <ChevronLeft className="w-4 h-4 mr-1" />이전
                  </Button>
                )}
                {step < 3 ? (
                  <Button onClick={() => setStep(s => s + 1)} className="flex-1">다음<ChevronRight className="w-4 h-4 ml-1" /></Button>
                ) : (
                  <Button className="flex-1">회원가입</Button>
                )}
              </div>
              <Button variant="outline" className="w-full">로그인으로 돌아가기</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 2: 스텝에 라벨 추가
function SignupDesign2() {
  const [step, setStep] = useState(1);
  const steps = [{ num: 1, label: "기본정보" }, { num: 2, label: "이메일인증" }, { num: 3, label: "추가정보" }];

  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-[360px]">
            <div className="flex flex-col gap-4">
              <div className="flex flex-col items-center gap-1 text-center">
                <h1 className="text-2xl font-bold">회원가입</h1>
              </div>
              {/* 스텝 인디케이터 with 라벨 */}
              <div className="flex items-center justify-between py-4">
                {steps.map((s, idx) => (
                  <div key={s.num} className="flex flex-col items-center flex-1">
                    <div className="flex items-center w-full">
                      {idx > 0 && <div className={cn("flex-1 h-0.5", step > idx ? "bg-primary" : "bg-gray-200")} />}
                      <div className={cn(
                        "w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium shrink-0",
                        step === s.num ? "bg-primary text-white" : step > s.num ? "bg-primary text-white" : "bg-gray-100 text-gray-400"
                      )}>
                        {step > s.num ? <CheckCircle2 className="w-5 h-5" /> : s.num}
                      </div>
                      {idx < 2 && <div className={cn("flex-1 h-0.5", step > s.num ? "bg-primary" : "bg-gray-200")} />}
                    </div>
                    <span className={cn("text-xs mt-2", step >= s.num ? "text-primary font-medium" : "text-gray-400")}>{s.label}</span>
                  </div>
                ))}
              </div>
              {step === 1 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">회원 유형 *</label>
                    <Select><SelectTrigger className="h-11"><SelectValue placeholder="회원 유형을 선택하세요" /></SelectTrigger>
                      <SelectContent><SelectItem value="FARM">농가</SelectItem><SelectItem value="CNSLT">컨설턴트</SelectItem></SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">아이디 *</label>
                    <Input placeholder="아이디를 입력하세요 (4자 이상)" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이름 *</label>
                    <Input placeholder="이름을 입력하세요" className="h-11" />
                  </div>
                </>
              )}
              {step === 2 && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이메일 *</label>
                    <Input type="email" placeholder="이메일을 입력하세요" className="h-11" />
                  </div>
                  <Button variant="outline" className="w-full h-11">인증번호 발송</Button>
                </div>
              )}
              {step === 3 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">휴대폰 번호 *</label>
                    <Input placeholder="010-0000-0000" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 *</label>
                    <Input type="password" placeholder="비밀번호 (8자 이상)" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 확인 *</label>
                    <Input type="password" placeholder="비밀번호를 다시 입력하세요" className="h-11" />
                  </div>
                </>
              )}
              <div className="flex gap-2 pt-2">
                {step > 1 && (
                  <Button variant="outline" onClick={() => setStep(s => s - 1)} className="flex-1 h-11">
                    <ChevronLeft className="w-4 h-4 mr-1" />이전
                  </Button>
                )}
                {step < 3 ? (
                  <Button onClick={() => setStep(s => s + 1)} className="flex-1 h-11">다음<ChevronRight className="w-4 h-4 ml-1" /></Button>
                ) : (
                  <Button className="flex-1 h-11">회원가입</Button>
                )}
              </div>
              <Button variant="outline" className="w-full h-11">로그인으로 돌아가기</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 3: 프로그레스 바 스타일
function SignupDesign3() {
  const [step, setStep] = useState(1);
  const progress = ((step - 1) / 2) * 100;

  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">
                <h1 className="text-2xl font-bold">회원가입</h1>
                <p className="text-muted-foreground text-sm">
                  {step === 1 && "기본 정보를 입력해주세요"}
                  {step === 2 && "이메일 인증을 진행해주세요"}
                  {step === 3 && "마지막 단계입니다"}
                </p>
              </div>
              {/* 프로그레스 바 */}
              <div className="space-y-2">
                <div className="flex justify-between text-xs text-gray-500">
                  <span>단계 {step}/3</span>
                  <span>{Math.round(progress)}% 완료</span>
                </div>
                <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                  <div className="h-full bg-primary transition-all duration-300" style={{ width: `${progress}%` }} />
                </div>
              </div>
              {step === 1 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">회원 유형 *</label>
                    <Select><SelectTrigger className="h-11"><SelectValue placeholder="회원 유형을 선택하세요" /></SelectTrigger>
                      <SelectContent><SelectItem value="FARM">농가</SelectItem><SelectItem value="CNSLT">컨설턴트</SelectItem></SelectContent>
                    </Select>
                  </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 placeholder="이름을 입력하세요" className="h-11" />
                  </div>
                </>
              )}
              {step === 2 && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이메일 *</label>
                    <Input type="email" placeholder="이메일을 입력하세요" className="h-11" />
                  </div>
                  <Button variant="outline" className="w-full h-11">인증번호 발송</Button>
                </div>
              )}
              {step === 3 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">휴대폰 번호 *</label>
                    <Input placeholder="010-0000-0000" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 *</label>
                    <Input type="password" placeholder="비밀번호 (8자 이상)" className="h-11" />
                  </div>
                </>
              )}
              <div className="flex gap-2 pt-2">
                {step > 1 && (
                  <Button variant="outline" onClick={() => setStep(s => s - 1)} className="flex-1 h-11">이전</Button>
                )}
                {step < 3 ? (
                  <Button onClick={() => setStep(s => s + 1)} className="flex-1 h-11">다음</Button>
                ) : (
                  <Button className="flex-1 h-11">회원가입 완료</Button>
                )}
              </div>
              <div className="text-center">
                <a href="#" className="text-sm text-gray-500 hover:text-primary">이미 계정이 있으신가요? 로그인</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// 시안 4: 현재 + 개선 (추천)
function SignupDesign4() {
  const [step, setStep] = useState(1);

  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">
                <h1 className="text-2xl font-bold">회원가입</h1>
                <p className="text-muted-foreground text-sm">
                  {step === 1 && "기본 정보"}
                  {step === 2 && "이메일 인증"}
                  {step === 3 && "추가 정보"}
                </p>
              </div>
              {/* 스텝 인디케이터 */}
              <div className="flex items-center justify-center gap-2 py-2">
                {[1, 2, 3].map((s) => (
                  <div key={s} className="flex items-center">
                    <div className={cn(
                      "w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors",
                      step === s ? "bg-primary text-white" : step > s ? "bg-primary/20 text-primary" : "bg-gray-100 text-gray-400"
                    )}>
                      {step > s ? <CheckCircle2 className="w-4 h-4" /> : s}
                    </div>
                    {s < 3 && <div className={cn("w-8 h-0.5 mx-1 transition-colors", step > s ? "bg-primary/20" : "bg-gray-200")} />}
                  </div>
                ))}
              </div>
              {step === 1 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">회원 유형 *</label>
                    <Select><SelectTrigger className="h-11"><SelectValue placeholder="회원 유형을 선택하세요" /></SelectTrigger>
                      <SelectContent><SelectItem value="FARM">농가</SelectItem><SelectItem value="CNSLT">컨설턴트</SelectItem><SelectItem value="ORGAN">기관</SelectItem></SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">아이디 *</label>
                    <Input placeholder="아이디를 입력하세요 (4자 이상)" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이름 *</label>
                    <Input placeholder="이름을 입력하세요 (2자 이상)" className="h-11" />
                  </div>
                </>
              )}
              {step === 2 && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">이메일 *</label>
                    <div className="flex gap-2">
                      <Input type="text" placeholder="이메일 아이디" className="h-11 flex-1" />
                      <span className="flex items-center text-gray-400">@</span>
                      <Select><SelectTrigger className="h-11 flex-1"><SelectValue placeholder="선택" /></SelectTrigger>
                        <SelectContent><SelectItem value="gmail.com">gmail.com</SelectItem><SelectItem value="naver.com">naver.com</SelectItem></SelectContent>
                      </Select>
                    </div>
                  </div>
                  <Button variant="outline" className="w-full h-11">인증번호 발송</Button>
                  <p className="text-xs text-center text-green-600">✓ 이메일 인증이 완료되면 다음 단계로 진행됩니다</p>
                </div>
              )}
              {step === 3 && (
                <>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">휴대폰 번호 *</label>
                    <Input placeholder="010-0000-0000" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 *</label>
                    <Input type="password" placeholder="비밀번호를 입력하세요 (8자 이상)" className="h-11" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">비밀번호 확인 *</label>
                    <Input type="password" placeholder="비밀번호를 다시 입력하세요" className="h-11" />
                  </div>
                </>
              )}
              <div className="flex gap-2 pt-2">
                {step > 1 && (
                  <Button variant="outline" onClick={() => setStep(s => s - 1)} className="flex-1 h-11">
                    <ChevronLeft className="w-4 h-4 mr-1" />이전
                  </Button>
                )}
                {step < 3 ? (
                  <Button onClick={() => setStep(s => s + 1)} className="flex-1 h-11">다음<ChevronRight className="w-4 h-4 ml-1" /></Button>
                ) : (
                  <Button className="flex-1 h-11">회원가입</Button>
                )}
              </div>
              <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>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function SignupDemo() {
  const designs = [
    { id: "current", name: "현재", description: "현재 적용된 3단계 스텝", features: ["숫자 인디케이터"], component: SignupDesign1 },
    { id: "label", name: "시안 2", description: "스텝에 라벨 추가", features: ["단계별 라벨", "연결선"], component: SignupDesign2 },
    { id: "progress", name: "시안 3", description: "프로그레스 바 스타일", features: ["진행률 바", "퍼센트 표시"], component: SignupDesign3 },
    { id: "improved", name: "시안 4", description: "현재 + 개선 (추천)", features: ["h-11 입력필드", "로그인 통일 스타일"], component: SignupDesign4 },
  ];

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