import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Card } from "./ui/card";
import { Badge } from "./ui/badge";
import { 
  ArrowLeft, 
  Send, 
  CheckCircle2, 
  Clock,
  Mail,
  Phone,
  User,
  Building2,
  Sparkles
} from "lucide-react";

interface DemoRequestPageProps {
  onNavigateToLanding: () => void;
  onRequestComplete: () => void;
}

export function DemoRequestPage({ onNavigateToLanding, onRequestComplete }: DemoRequestPageProps) {
  const [formData, setFormData] = useState({
    name: "",
    company: "",
    email: "",
    phone: "",
    industry: "",
    requirements: ""
  });
  
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    // 데모 리드 데이터를 로컬스토리지에 저장
    const existingLeads = JSON.parse(localStorage.getItem('demoLeads') || '[]');
    const newLead = {
      id: Date.now().toString(),
      ...formData,
      status: "신규",
      createdAt: new Date().toISOString(),
      assignedTo: null,
      demoLink: null
    };
    
    localStorage.setItem('demoLeads', JSON.stringify([...existingLeads, newLead]));
    
    // 제출 시뮬레이션
    setTimeout(() => {
      setIsSubmitting(false);
      setIsSubmitted(true);
    }, 1500);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  if (isSubmitted) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
        <Card className="max-w-2xl w-full p-12 text-center clean-shadow-xl">
          <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <CheckCircle2 className="w-12 h-12 text-green-600" />
          </div>
          
          <h2 className="text-3xl font-bold text-foreground mb-4">
            데모 요청이 접수되었습니다!
          </h2>
          
          <p className="text-muted-foreground text-lg mb-8">
            <strong className="text-foreground">{formData.name}</strong>님, 요청해주셔서 감사합니다.
          </p>

          <div className="bg-primary/10 rounded-2xl p-6 mb-8">
            <div className="flex items-center justify-center space-x-3 mb-3">
              <Clock className="w-6 h-6 text-primary" />
              <h3 className="font-bold text-foreground text-xl">영업 담당자가 곧 연락드립니다</h3>
            </div>
            <p className="text-muted-foreground">
              영업 담당자가 귀사의 요구사항을 확인한 후<br />
              <strong className="text-primary">1영업일 이내</strong>에 연락드려 맞춤형 데모를 제공해드리겠습니다.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-4 mb-8">
            <div className="bg-accent/50 rounded-xl p-4">
              <Mail className="w-5 h-5 text-primary mb-2 mx-auto" />
              <p className="text-sm text-muted-foreground">이메일</p>
              <p className="font-semibold text-foreground">{formData.email}</p>
            </div>
            <div className="bg-accent/50 rounded-xl p-4">
              <Phone className="w-5 h-5 text-primary mb-2 mx-auto" />
              <p className="text-sm text-muted-foreground">연락처</p>
              <p className="font-semibold text-foreground">{formData.phone}</p>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Button 
              onClick={onNavigateToLanding}
              className="rounded-xl px-8 py-6 bg-primary hover:bg-primary/90"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              홈으로 돌아가기
            </Button>
          </div>
        </Card>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
      <Card className="max-w-3xl w-full p-8 md:p-12 clean-shadow-xl">
        <Button
          variant="ghost"
          onClick={onNavigateToLanding}
          className="mb-6 rounded-xl"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          돌아가기
        </Button>

        <div className="text-center mb-8">
          <Badge className="mb-4 bg-primary/10 text-primary border-primary/20 rounded-full px-4 py-2">
            <Sparkles className="w-4 h-4 mr-2 inline" />
            데모 신청
          </Badge>
          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            SAM 솔루션 데모 요청
          </h1>
          <p className="text-muted-foreground text-lg">
            귀사의 제조 환경에 최적화된 맞춤형 데모를 제공해드립니다
          </p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="name" className="text-base flex items-center">
                <User className="w-4 h-4 mr-2 text-primary" />
                이름 *
              </Label>
              <Input
                id="name"
                name="name"
                value={formData.name}
                onChange={handleChange}
                placeholder="홍길동"
                required
                className="clean-input border-0 bg-input-background/60 text-base py-6"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="company" className="text-base flex items-center">
                <Building2 className="w-4 h-4 mr-2 text-primary" />
                회사명 *
              </Label>
              <Input
                id="company"
                name="company"
                value={formData.company}
                onChange={handleChange}
                placeholder="㈜ 제조기업"
                required
                className="clean-input border-0 bg-input-background/60 text-base py-6"
              />
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="email" className="text-base flex items-center">
                <Mail className="w-4 h-4 mr-2 text-primary" />
                이메일 *
              </Label>
              <Input
                id="email"
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="example@company.com"
                required
                className="clean-input border-0 bg-input-background/60 text-base py-6"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="phone" className="text-base flex items-center">
                <Phone className="w-4 h-4 mr-2 text-primary" />
                연락처 *
              </Label>
              <Input
                id="phone"
                name="phone"
                type="tel"
                value={formData.phone}
                onChange={handleChange}
                placeholder="010-1234-5678"
                required
                className="clean-input border-0 bg-input-background/60 text-base py-6"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="industry" className="text-base">
              산업 분야 *
            </Label>
            <Input
              id="industry"
              name="industry"
              value={formData.industry}
              onChange={handleChange}
              placeholder="예: 자동차 부품 제조, 식품 가공, 전자 제품 조립 등"
              required
              className="clean-input border-0 bg-input-background/60 text-base py-6"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="requirements" className="text-base">
              관심 기능 및 요구사항
            </Label>
            <Textarea
              id="requirements"
              name="requirements"
              value={formData.requirements}
              onChange={handleChange}
              placeholder="관심 있는 기능이나 해결하고 싶은 문제를 자유롭게 작성해주세요"
              rows={5}
              className="clean-input border-0 bg-input-background/60 text-base resize-none"
            />
          </div>

          <div className="bg-accent/50 rounded-xl p-4 flex items-start space-x-3">
            <Clock className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
            <div className="text-sm">
              <p className="font-semibold text-foreground mb-1">빠른 응답 보장</p>
              <p className="text-muted-foreground">
                영업 담당자가 귀하의 요청을 확인 후 1영업일 이내에 연락드립니다.
              </p>
            </div>
          </div>

          <Button
            type="submit"
            disabled={isSubmitting}
            className="w-full rounded-xl py-7 text-lg bg-primary hover:bg-primary/90 clean-shadow-lg"
          >
            {isSubmitting ? (
              <>
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
                전송 중...
              </>
            ) : (
              <>
                <Send className="w-5 h-5 mr-2" />
                데모 요청하기
              </>
            )}
          </Button>
        </form>
      </Card>
    </div>
  );
}
