import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { 
  Building2, 
  User, 
  Mail, 
  Phone, 
  Lock,
  CheckCircle2,
  Briefcase,
  Users,
  FileText,
  Sparkles
} from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";

interface SignupPageProps {
  onNavigateToLogin: () => void;
  onNavigateToLanding: () => void;
  onSignupComplete: (userData: any) => void;
}

export function SignupPage({ onNavigateToLogin, onNavigateToLanding, onSignupComplete }: SignupPageProps) {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    // 회사 정보
    companyName: "",
    businessNumber: "",
    industry: "",
    companySize: "",
    
    // 담당자 정보
    name: "",
    position: "",
    email: "",
    phone: "",
    password: "",
    passwordConfirm: "",
    
    // 약관
    agreeTerms: false,
    agreePrivacy: false,
  });

  const handleInputChange = (field: string, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSubmit = () => {
    const userData = {
      ...formData,
      role: "CEO",
    };
    
    onSignupComplete(userData);
  };

  const isStep1Valid = formData.companyName && formData.businessNumber && formData.industry && formData.companySize;
  const isStep2Valid = formData.name && formData.email && formData.phone && formData.password && formData.password === formData.passwordConfirm;
  const isStep3Valid = formData.agreeTerms && formData.agreePrivacy;

  return (
    <div className="min-h-screen bg-background flex flex-col items-center justify-center px-6 py-12">
      {/* Logo */}
      <div className="mb-8 text-center">
        <div className="inline-flex items-center justify-center gap-2 mb-4">
          <Sparkles className="w-6 h-6 text-primary" />
          <h1 className="text-2xl text-foreground">회원가입</h1>
        </div>
        <p className="text-muted-foreground">
          통합 생산 관리 시스템 <span className="text-primary font-semibold">SAM</span>에 가입하세요
        </p>
      </div>

      {/* Progress Steps */}
      <div className="w-full max-w-2xl mb-10">
        <div className="flex items-center justify-center gap-4">
          {/* Step 1 */}
          <div className="flex flex-col items-center">
            <div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold transition-all ${
              step >= 1 
                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" 
                : "bg-muted text-muted-foreground"
            }`}>
              {step > 1 ? <CheckCircle2 className="w-6 h-6" /> : "1"}
            </div>
            <span className={`text-sm mt-2 ${step >= 1 ? "text-foreground font-medium" : "text-muted-foreground"}`}>
              회사 정보
            </span>
          </div>

          {/* Connector */}
          <div className={`w-32 h-1 rounded transition-all ${step > 1 ? "bg-primary" : "bg-muted"}`} />

          {/* Step 2 */}
          <div className="flex flex-col items-center">
            <div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold transition-all ${
              step >= 2 
                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" 
                : "bg-muted text-muted-foreground"
            }`}>
              {step > 2 ? <CheckCircle2 className="w-6 h-6" /> : "2"}
            </div>
            <span className={`text-sm mt-2 ${step >= 2 ? "text-foreground font-medium" : "text-muted-foreground"}`}>
              담당자 정보
            </span>
          </div>

          {/* Connector */}
          <div className={`w-32 h-1 rounded transition-all ${step > 2 ? "bg-primary" : "bg-muted"}`} />

          {/* Step 3 */}
          <div className="flex flex-col items-center">
            <div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold transition-all ${
              step >= 3 
                ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" 
                : "bg-muted text-muted-foreground"
            }`}>
              3
            </div>
            <span className={`text-sm mt-2 ${step >= 3 ? "text-foreground font-medium" : "text-muted-foreground"}`}>
              약관 동의
            </span>
          </div>
        </div>
      </div>

      {/* Form Card */}
      <div className="w-full max-w-2xl bg-card border border-border rounded-2xl shadow-xl p-10">
        {/* Step 1: 회사 정보 */}
        {step === 1 && (
          <div className="space-y-6">
            <div className="mb-8">
              <h2 className="text-xl text-foreground mb-2">회사 정보를 입력해주세요</h2>
              <p className="text-muted-foreground">MES 시스템을 도입할 회사의 기본 정보를 알려주세요</p>
            </div>

            <div>
              <Label htmlFor="companyName" className="flex items-center gap-2 mb-2">
                <Building2 className="w-4 h-4 text-primary" />
                회사명 *
              </Label>
              <Input
                id="companyName"
                placeholder="예: 삼성전자"
                value={formData.companyName}
                onChange={(e) => handleInputChange("companyName", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="businessNumber" className="flex items-center gap-2 mb-2">
                <FileText className="w-4 h-4 text-primary" />
                사업자등록번호 *
              </Label>
              <Input
                id="businessNumber"
                placeholder="000-00-00000"
                value={formData.businessNumber}
                onChange={(e) => handleInputChange("businessNumber", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="industry" className="flex items-center gap-2 mb-2">
                <Briefcase className="w-4 h-4 text-primary" />
                업종 *
              </Label>
              <Select value={formData.industry} onValueChange={(value) => handleInputChange("industry", value)}>
                <SelectTrigger className="h-11">
                  <SelectValue placeholder="업종을 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="electronics">전자/반도체</SelectItem>
                  <SelectItem value="machinery">기계/장비</SelectItem>
                  <SelectItem value="automotive">자동차/부품</SelectItem>
                  <SelectItem value="chemical">화학/소재</SelectItem>
                  <SelectItem value="food">식품/제약</SelectItem>
                  <SelectItem value="textile">섬유/의류</SelectItem>
                  <SelectItem value="metal">금속/철강</SelectItem>
                  <SelectItem value="other">기타 제조업</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div>
              <Label htmlFor="companySize" className="flex items-center gap-2 mb-2">
                <Users className="w-4 h-4 text-primary" />
                기업 규모 *
              </Label>
              <Select value={formData.companySize} onValueChange={(value) => handleInputChange("companySize", value)}>
                <SelectTrigger className="h-11">
                  <SelectValue placeholder="기업 규모를 선택하세요" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="small">중소기업 (직원 10-50명)</SelectItem>
                  <SelectItem value="medium">중견기업 (직원 50-300명)</SelectItem>
                  <SelectItem value="large">대기업 (직원 300명 이상)</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <Button 
              onClick={() => setStep(2)} 
              disabled={!isStep1Valid}
              className="w-full h-11 mt-6"
            >
              다음 단계
            </Button>
          </div>
        )}

        {/* Step 2: 담당자 정보 */}
        {step === 2 && (
          <div className="space-y-6">
            <div className="mb-8">
              <h2 className="text-xl text-foreground mb-2">담당자 정보를 입력해주세요</h2>
              <p className="text-muted-foreground">시스템 관리자 계정으로 사용될 정보입니다</p>
            </div>

            <div>
              <Label htmlFor="name" className="flex items-center gap-2 mb-2">
                <User className="w-4 h-4 text-primary" />
                성명 *
              </Label>
              <Input
                id="name"
                placeholder="홍길동"
                value={formData.name}
                onChange={(e) => handleInputChange("name", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="position" className="flex items-center gap-2 mb-2">
                <Briefcase className="w-4 h-4 text-primary" />
                직책
              </Label>
              <Input
                id="position"
                placeholder="예: 생산관리팀장"
                value={formData.position}
                onChange={(e) => handleInputChange("position", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="email" className="flex items-center gap-2 mb-2">
                <Mail className="w-4 h-4 text-primary" />
                이메일 *
              </Label>
              <Input
                id="email"
                type="email"
                placeholder="example@company.com"
                value={formData.email}
                onChange={(e) => handleInputChange("email", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="phone" className="flex items-center gap-2 mb-2">
                <Phone className="w-4 h-4 text-primary" />
                연락처 *
              </Label>
              <Input
                id="phone"
                placeholder="010-0000-0000"
                value={formData.phone}
                onChange={(e) => handleInputChange("phone", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="password" className="flex items-center gap-2 mb-2">
                <Lock className="w-4 h-4 text-primary" />
                비밀번호 *
              </Label>
              <Input
                id="password"
                type="password"
                placeholder="8자 이상 입력"
                value={formData.password}
                onChange={(e) => handleInputChange("password", e.target.value)}
                className="h-11"
              />
            </div>

            <div>
              <Label htmlFor="passwordConfirm" className="flex items-center gap-2 mb-2">
                <Lock className="w-4 h-4 text-primary" />
                비밀번호 확인 *
              </Label>
              <Input
                id="passwordConfirm"
                type="password"
                placeholder="비밀번호 재입력"
                value={formData.passwordConfirm}
                onChange={(e) => handleInputChange("passwordConfirm", e.target.value)}
                className="h-11"
              />
              {formData.passwordConfirm && formData.password !== formData.passwordConfirm && (
                <p className="text-sm text-destructive mt-2">비밀번호가 일치하지 않습니다</p>
              )}
            </div>

            <div className="flex gap-3 mt-8">
              <Button 
                variant="outline"
                onClick={() => setStep(1)} 
                className="flex-1 h-11"
              >
                이전
              </Button>
              <Button 
                onClick={() => setStep(3)} 
                disabled={!isStep2Valid}
                className="flex-1 h-11"
              >
                다음 단계
              </Button>
            </div>
          </div>
        )}

        {/* Step 3: 약관 동의 */}
        {step === 3 && (
          <div className="space-y-6">
            <div className="mb-8">
              <h2 className="text-xl text-foreground mb-2">약관에 동의해주세요</h2>
              <p className="text-muted-foreground">서비스 이용을 위해 필수 약관에 동의가 필요합니다</p>
            </div>

            <div className="space-y-4">
              <label className={`flex items-start gap-4 p-5 border-2 rounded-lg cursor-pointer transition-all ${
                formData.agreeTerms ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
              }`}>
                <input
                  type="checkbox"
                  checked={formData.agreeTerms}
                  onChange={(e) => handleInputChange("agreeTerms", e.target.checked)}
                  className="mt-1 w-5 h-5 rounded border-input text-primary focus:ring-2 focus:ring-primary"
                />
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-bold text-destructive">[필수]</span>
                    <span className="font-semibold text-foreground">서비스 이용약관</span>
                  </div>
                  <p className="text-sm text-muted-foreground">SAM MES 시스템 이용약관에 동의합니다</p>
                </div>
                {formData.agreeTerms && (
                  <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0" />
                )}
              </label>

              <label className={`flex items-start gap-4 p-5 border-2 rounded-lg cursor-pointer transition-all ${
                formData.agreePrivacy ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
              }`}>
                <input
                  type="checkbox"
                  checked={formData.agreePrivacy}
                  onChange={(e) => handleInputChange("agreePrivacy", e.target.checked)}
                  className="mt-1 w-5 h-5 rounded border-input text-primary focus:ring-2 focus:ring-primary"
                />
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="font-bold text-destructive">[필수]</span>
                    <span className="font-semibold text-foreground">개인정보 수집 및 이용</span>
                  </div>
                  <p className="text-sm text-muted-foreground">개인정보 수집 및 이용에 동의합니다</p>
                </div>
                {formData.agreePrivacy && (
                  <CheckCircle2 className="w-6 h-6 text-primary flex-shrink-0" />
                )}
              </label>
            </div>

            <div className="bg-primary/10 border border-primary/20 rounded-lg p-5">
              <div className="flex items-start gap-3">
                <Sparkles className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                <p className="text-sm text-foreground">
                  <span className="font-semibold">30일 무료 체험</span> 기간 동안 모든 기능을 제한 없이 사용하실 수 있습니다.
                </p>
              </div>
            </div>

            <div className="flex gap-3 mt-8">
              <Button 
                variant="outline"
                onClick={() => setStep(2)} 
                className="flex-1 h-11"
              >
                이전
              </Button>
              <Button 
                onClick={handleSubmit} 
                disabled={!isStep3Valid}
                className="flex-1 h-11"
              >
                <CheckCircle2 className="w-5 h-5 mr-2" />
                가입 완료
              </Button>
            </div>
          </div>
        )}
      </div>

      {/* Login Link */}
      <div className="mt-8 text-center">
        <p className="text-muted-foreground">
          이미 계정이 있으신가요?{" "}
          <button 
            onClick={onNavigateToLogin}
            className="text-primary font-semibold hover:underline"
          >
            로그인
          </button>
        </p>
      </div>
    </div>
  );
}