"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { CustomCalendar } from "@/components/ui/custom-calendar";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { AlertCircle, CheckCircle, Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface FormData {
  name: string;
  email: string;
  phone: string;
  category: string;
  priority: string;
  startDate?: Date;
  endDate?: Date;
  description: string;
  isActive: boolean;
}

interface FormErrors {
  name?: string;
  email?: string;
  phone?: string;
  category?: string;
  startDate?: string;
}

export function ExampleFormDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    name: "",
    email: "",
    phone: "",
    category: "",
    priority: "medium",
    description: "",
    isActive: true,
  });
  const [errors, setErrors] = useState<FormErrors>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // 폼 유효성 검사
  const validateForm = (): boolean => {
    const newErrors: FormErrors = {};

    // 이름 검증
    if (!formData.name.trim()) {
      newErrors.name = "이름을 입력해주세요";
    } else if (formData.name.length < 2) {
      newErrors.name = "이름은 2자 이상이어야 합니다";
    }

    // 이메일 검증
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!formData.email.trim()) {
      newErrors.email = "이메일을 입력해주세요";
    } else if (!emailRegex.test(formData.email)) {
      newErrors.email = "올바른 이메일 형식이 아닙니다";
    }

    // 전화번호 검증
    const phoneRegex = /^[0-9-]+$/;
    if (formData.phone && !phoneRegex.test(formData.phone)) {
      newErrors.phone = "올바른 전화번호 형식이 아닙니다";
    }

    // 카테고리 검증
    if (!formData.category) {
      newErrors.category = "카테고리를 선택해주세요";
    }

    // 날짜 검증
    if (formData.startDate && formData.endDate) {
      if (formData.startDate > formData.endDate) {
        newErrors.startDate = "시작일은 종료일보다 이전이어야 합니다";
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // 폼 제출
  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    setIsSubmitting(true);

    // API 호출 시뮬레이션 (실제로는 API 호출)
    await new Promise((resolve) => setTimeout(resolve, 1500));

    console.log("폼 데이터:", formData);

    setIsSubmitting(false);
    setIsOpen(false);

    // 폼 초기화
    setFormData({
      name: "",
      email: "",
      phone: "",
      category: "",
      priority: "medium",
      description: "",
      isActive: true,
    });
    setErrors({});
  };

  // 폼 필드 변경
  const handleChange = (field: keyof FormData, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    // 해당 필드의 에러 제거
    if (errors[field as keyof FormErrors]) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors[field as keyof FormErrors];
        return newErrors;
      });
    }
  };

  // 취소
  const handleCancel = () => {
    setIsOpen(false);
    setFormData({
      name: "",
      email: "",
      phone: "",
      category: "",
      priority: "medium",
      description: "",
      isActive: true,
    });
    setErrors({});
  };

  return (
    <>
      {/* 트리거 버튼 */}
      <Button onClick={() => setIsOpen(true)} className="gap-2">
        예시 폼 열기
      </Button>

      {/* 폼 Dialog */}
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">사용자 정보 등록</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              아래 정보를 입력하여 새로운 사용자를 등록하세요. 필수 항목은 * 표시되어 있습니다.
            </DialogDescription>
          </DialogHeader>

          {/* 폼 컨텐츠 */}
          <div className="space-y-4">
            {/* 이름 (필수) */}
            <div className="space-y-2">
              <Label htmlFor="name" className="text-xs sm:text-sm">
                이름 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => handleChange("name", e.target.value)}
                placeholder="홍길동"
                className={cn("h-8 text-xs sm:h-10 sm:text-sm", errors.name && "border-destructive")}
              />
              {errors.name && (
                <p className="text-destructive flex items-center gap-1 text-xs">
                  <AlertCircle className="h-3 w-3" />
                  {errors.name}
                </p>
              )}
            </div>

            {/* 이메일 (필수) */}
            <div className="space-y-2">
              <Label htmlFor="email" className="text-xs sm:text-sm">
                이메일 <span className="text-destructive">*</span>
              </Label>
              <Input
                id="email"
                type="email"
                value={formData.email}
                onChange={(e) => handleChange("email", e.target.value)}
                placeholder="example@email.com"
                className={cn("h-8 text-xs sm:h-10 sm:text-sm", errors.email && "border-destructive")}
              />
              {errors.email && (
                <p className="text-destructive flex items-center gap-1 text-xs">
                  <AlertCircle className="h-3 w-3" />
                  {errors.email}
                </p>
              )}
              {!errors.email && formData.email && formData.email.includes("@") && (
                <p className="text-muted-foreground flex items-center gap-1 text-xs">
                  <CheckCircle className="h-3 w-3 text-green-600" />
                  올바른 형식입니다
                </p>
              )}
            </div>

            {/* 전화번호 (선택) */}
            <div className="space-y-2">
              <Label htmlFor="phone" className="text-xs sm:text-sm">
                전화번호
              </Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => handleChange("phone", e.target.value)}
                placeholder="010-1234-5678"
                className={cn("h-8 text-xs sm:h-10 sm:text-sm", errors.phone && "border-destructive")}
              />
              {errors.phone && (
                <p className="text-destructive flex items-center gap-1 text-xs">
                  <AlertCircle className="h-3 w-3" />
                  {errors.phone}
                </p>
              )}
            </div>

            {/* 카테고리 & 우선순위 (같은 줄) */}
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {/* 카테고리 (필수) */}
              <div className="space-y-2">
                <Label htmlFor="category" className="text-xs sm:text-sm">
                  카테고리 <span className="text-destructive">*</span>
                </Label>
                <Select value={formData.category} onValueChange={(value) => handleChange("category", value)}>
                  <SelectTrigger
                    id="category"
                    className={cn("h-8 text-xs sm:h-10 sm:text-sm", errors.category && "border-destructive")}
                  >
                    <SelectValue placeholder="선택하세요" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="customer">고객</SelectItem>
                    <SelectItem value="partner">파트너</SelectItem>
                    <SelectItem value="supplier">공급업체</SelectItem>
                    <SelectItem value="employee">직원</SelectItem>
                  </SelectContent>
                </Select>
                {errors.category && (
                  <p className="text-destructive flex items-center gap-1 text-xs">
                    <AlertCircle className="h-3 w-3" />
                    {errors.category}
                  </p>
                )}
              </div>

              {/* 우선순위 */}
              <div className="space-y-2">
                <Label htmlFor="priority" className="text-xs sm:text-sm">
                  우선순위
                </Label>
                <Select value={formData.priority} onValueChange={(value) => handleChange("priority", value)}>
                  <SelectTrigger id="priority" className="h-8 text-xs sm:h-10 sm:text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">낮음</SelectItem>
                    <SelectItem value="medium">보통</SelectItem>
                    <SelectItem value="high">높음</SelectItem>
                    <SelectItem value="urgent">긴급</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* 시작일 & 종료일 (같은 줄) */}
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {/* 시작일 */}
              <div className="space-y-2">
                <Label className="text-xs sm:text-sm">시작일</Label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      className={cn(
                        "h-8 w-full justify-start text-left text-xs font-normal sm:h-10 sm:text-sm",
                        !formData.startDate && "text-muted-foreground",
                        errors.startDate && "border-destructive",
                      )}
                    >
                      {formData.startDate ? (
                        formData.startDate.toLocaleDateString("ko-KR", {
                          year: "numeric",
                          month: "long",
                          day: "numeric",
                        })
                      ) : (
                        <span>날짜 선택</span>
                      )}
                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <CustomCalendar
                      mode="single"
                      selected={formData.startDate}
                      onSelect={(date) => handleChange("startDate", date)}
                    />
                  </PopoverContent>
                </Popover>
                {errors.startDate && (
                  <p className="text-destructive flex items-center gap-1 text-xs">
                    <AlertCircle className="h-3 w-3" />
                    {errors.startDate}
                  </p>
                )}
              </div>

              {/* 종료일 */}
              <div className="space-y-2">
                <Label className="text-xs sm:text-sm">종료일</Label>
                <Popover>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      className={cn(
                        "h-8 w-full justify-start text-left text-xs font-normal sm:h-10 sm:text-sm",
                        !formData.endDate && "text-muted-foreground",
                      )}
                    >
                      {formData.endDate ? (
                        formData.endDate.toLocaleDateString("ko-KR", {
                          year: "numeric",
                          month: "long",
                          day: "numeric",
                        })
                      ) : (
                        <span>날짜 선택</span>
                      )}
                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0">
                    <CustomCalendar
                      mode="single"
                      selected={formData.endDate}
                      onSelect={(date) => handleChange("endDate", date)}
                    />
                  </PopoverContent>
                </Popover>
              </div>
            </div>

            {/* 설명 */}
            <div className="space-y-2">
              <Label htmlFor="description" className="text-xs sm:text-sm">
                설명
              </Label>
              <Textarea
                id="description"
                value={formData.description}
                onChange={(e) => handleChange("description", e.target.value)}
                placeholder="추가 정보를 입력하세요..."
                className="min-h-[80px] text-xs sm:text-sm"
              />
              <p className="text-muted-foreground text-xs">{formData.description.length} / 500자</p>
            </div>

            {/* 활성화 상태 */}
            <div className="flex items-center justify-between rounded-lg border p-3 sm:p-4">
              <div className="space-y-0.5">
                <Label htmlFor="isActive" className="text-xs font-medium sm:text-sm">
                  활성화 상태
                </Label>
                <p className="text-muted-foreground text-xs">사용자 계정을 활성화합니다</p>
              </div>
              <Switch
                id="isActive"
                checked={formData.isActive}
                onCheckedChange={(checked) => handleChange("isActive", checked)}
              />
            </div>
          </div>

          {/* 푸터 */}
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={handleCancel}
              disabled={isSubmitting}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={isSubmitting}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isSubmitting ? "처리 중..." : "등록"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}