'use client';

/**
 * 이슈 보고 모달
 *
 * - 이슈 유형 선택 (5개 버튼)
 * - 상세 내용 textarea
 * - 벨리데이션 & 성공 다이얼로그
 */

import { useState } from 'react';
import { AlertTriangle } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import type { WorkOrder } from '../ProductionDashboard/types';
import type { IssueType } from './types';
import { ISSUE_TYPE_LABELS } from './types';

interface IssueReportModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  order: WorkOrder | null;
}

export function IssueReportModal({ open, onOpenChange, order }: IssueReportModalProps) {
  const [selectedType, setSelectedType] = useState<IssueType | null>(null);
  const [description, setDescription] = useState('');
  const [showValidationAlert, setShowValidationAlert] = useState(false);
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);

  const issueTypes: IssueType[] = ['defect', 'noStock', 'delay', 'equipment', 'other'];

  const handleSubmit = () => {
    if (!selectedType) {
      setShowValidationAlert(true);
      return;
    }


    setShowSuccessAlert(true);
  };

  const handleSuccessClose = () => {
    setShowSuccessAlert(false);
    setSelectedType(null);
    setDescription('');
    onOpenChange(false);
  };

  const handleCancel = () => {
    setSelectedType(null);
    setDescription('');
    onOpenChange(false);
  };

  if (!order) return null;

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-orange-500" />
              이슈 보고
            </DialogTitle>
            <DialogDescription>
              <span className="block">작업: {order.orderNo}</span>
              <span className="block">{order.client}</span>
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4">
            {/* 이슈 유형 선택 */}
            <div>
              <label className="text-sm font-medium mb-2 block">이슈 유형</label>
              <div className="flex flex-wrap gap-2">
                {issueTypes.map((type) => (
                  <Button
                    key={type}
                    variant={selectedType === type ? 'default' : 'outline'}
                    size="sm"
                    onClick={() => setSelectedType(type)}
                    className={
                      selectedType === type
                        ? 'bg-orange-600 hover:bg-orange-700'
                        : 'hover:bg-orange-50 hover:border-orange-300'
                    }
                  >
                    {ISSUE_TYPE_LABELS[type]}
                  </Button>
                ))}
              </div>
            </div>

            {/* 상세 내용 */}
            <div>
              <label className="text-sm font-medium mb-2 block">상세 내용</label>
              <Textarea
                placeholder="이슈 상세 내용을 입력하세요..."
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={4}
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={handleCancel}>
              취소
            </Button>
            <Button onClick={handleSubmit} className="bg-orange-600 hover:bg-orange-700">
              보고
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 벨리데이션 알림 */}
      <AlertDialog open={showValidationAlert} onOpenChange={setShowValidationAlert}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>알림</AlertDialogTitle>
            <AlertDialogDescription>이슈 유형을 선택해주세요.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction>확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 성공 알림 */}
      <AlertDialog open={showSuccessAlert} onOpenChange={setShowSuccessAlert}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle className="text-green-600">
              이슈가 보고되었습니다.
            </AlertDialogTitle>
            <AlertDialogDescription asChild>
              <div className="space-y-2">
                <p>
                  <span className="text-muted-foreground">작업:</span>{' '}
                  <span className="font-medium text-foreground">{order.orderNo}</span>
                </p>
                <p>
                  <span className="text-muted-foreground">유형:</span>{' '}
                  <span className="font-medium text-foreground">
                    {selectedType && ISSUE_TYPE_LABELS[selectedType]}
                  </span>
                </p>
              </div>
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction onClick={handleSuccessClose}>확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}