'use client';

/**
 * 검사 등록 페이지
 */

import { useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { ClipboardCheck, ImageIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { PageLayout } from '@/components/organisms/PageLayout';
import { inspectionItemsTemplate, judgeMeasurement } from './mockData';
import type { InspectionItem, QualityCheckItem, MeasurementItem } from './types';

export function InspectionCreate() {
  const router = useRouter();

  // 폼 상태
  const [formData, setFormData] = useState({
    lotNo: 'WO-251219-05', // 자동 (예시)
    itemName: '조인트바', // 자동 (예시)
    processName: '조립 공정', // 자동 (예시)
    quantity: 50,
    inspector: '',
    remarks: '',
  });

  // 검사 항목 상태
  const [inspectionItems, setInspectionItems] = useState<InspectionItem[]>(
    inspectionItemsTemplate.map(item => ({ ...item }))
  );

  // validation 에러 상태
  const [validationErrors, setValidationErrors] = useState<string[]>([]);

  // 폼 입력 핸들러
  const handleInputChange = (field: string, value: string | number) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    // 입력 시 에러 클리어
    if (validationErrors.length > 0) {
      setValidationErrors([]);
    }
  };

  // 품질 검사 항목 결과 변경 (양호/불량)
  const handleQualityResultChange = useCallback((itemId: string, result: '양호' | '불량') => {
    setInspectionItems(prev => prev.map(item => {
      if (item.id === itemId && item.type === 'quality') {
        return {
          ...item,
          result,
          judgment: result === '양호' ? '적합' : '부적합',
        } as QualityCheckItem;
      }
      return item;
    }));
    // 입력 시 에러 클리어
    setValidationErrors([]);
  }, []);

  // 측정 항목 값 변경
  const handleMeasurementChange = useCallback((itemId: string, value: string) => {
    setInspectionItems(prev => prev.map(item => {
      if (item.id === itemId && item.type === 'measurement') {
        const measuredValue = parseFloat(value) || 0;
        const judgment = judgeMeasurement(item.spec, measuredValue);
        return {
          ...item,
          measuredValue,
          judgment,
        } as MeasurementItem;
      }
      return item;
    }));
    // 입력 시 에러 클리어
    setValidationErrors([]);
  }, []);

  // 취소
  const handleCancel = () => {
    router.push('/quality/inspections');
  };

  // validation 체크
  const validateForm = (): boolean => {
    const errors: string[] = [];

    // 필수 필드: 작업자
    if (!formData.inspector.trim()) {
      errors.push('작업자는 필수 입력 항목입니다.');
    }

    // 검사 항목 validation
    inspectionItems.forEach((item, index) => {
      if (item.type === 'quality') {
        const qualityItem = item as QualityCheckItem;
        if (!qualityItem.result) {
          errors.push(`${index + 1}. ${item.name}: 결과를 선택해주세요.`);
        }
      } else if (item.type === 'measurement') {
        const measurementItem = item as MeasurementItem;
        if (measurementItem.measuredValue === undefined || measurementItem.measuredValue === null) {
          errors.push(`${index + 1}. ${item.name}: 측정값을 입력해주세요.`);
        }
      }
    });

    setValidationErrors(errors);
    return errors.length === 0;
  };

  // 검사완료
  const handleSubmit = () => {
    // validation 체크
    if (!validateForm()) {
      return;
    }

    // TODO: API 호출
    console.log('Submit:', { ...formData, items: inspectionItems });
    router.push('/quality/inspections');
  };

  return (
    <PageLayout>
      <div className="space-y-6">
        {/* 헤더 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <ClipboardCheck className="w-6 h-6" />
            <h1 className="text-xl font-semibold">검사 등록</h1>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={handleCancel}>
              취소
            </Button>
            <Button onClick={handleSubmit}>
              검사완료
            </Button>
          </div>
        </div>

        {/* Validation 에러 표시 */}
        {validationErrors.length > 0 && (
          <Alert className="bg-red-50 border-red-200">
            <AlertDescription className="text-red-900">
              <div className="flex items-start gap-2">
                <span className="text-lg">⚠️</span>
                <div className="flex-1">
                  <strong className="block mb-2">
                    입력 내용을 확인해주세요 ({validationErrors.length}개 오류)
                  </strong>
                  <ul className="space-y-1 text-sm">
                    {validationErrors.map((error, index) => (
                      <li key={index} className="flex items-start gap-1">
                        <span>•</span>
                        <span>{error}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </AlertDescription>
          </Alert>
        )}

        {/* 검사 개요 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">검사 개요</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="space-y-2">
                <Label className="text-muted-foreground">LOT NO (자동)</Label>
                <Input
                  value={formData.lotNo}
                  disabled
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">품목명 (자동)</Label>
                <Input
                  value={formData.itemName}
                  disabled
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">공정명 (자동)</Label>
                <Input
                  value={formData.processName}
                  disabled
                  className="bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label>수량</Label>
                <Input
                  type="number"
                  value={formData.quantity}
                  onChange={(e) => handleInputChange('quantity', parseInt(e.target.value) || 0)}
                  placeholder="수량 입력"
                />
              </div>
              <div className="space-y-2">
                <Label>작업자 *</Label>
                <Input
                  value={formData.inspector}
                  onChange={(e) => handleInputChange('inspector', e.target.value)}
                  placeholder="작업자 입력"
                />
              </div>
              <div className="space-y-2 md:col-span-3">
                <Label>특이사항</Label>
                <Input
                  value={formData.remarks}
                  onChange={(e) => handleInputChange('remarks', e.target.value)}
                  placeholder="특이사항 입력"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 검사 기준 및 도해 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">검사 기준 및 도해</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-center h-48 bg-muted rounded-lg border-2 border-dashed">
              <div className="text-center text-muted-foreground">
                <ImageIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
                <p>템플릿에서 설정한 조인트바 표준 도면이 표시됨</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 검사 데이터 입력 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">검사 데이터 입력</CardTitle>
            <p className="text-sm text-muted-foreground">
              * 측정값을 입력하면 판정이 자동 처리됩니다.
            </p>
          </CardHeader>
          <CardContent className="space-y-6">
            {inspectionItems.map((item, index) => (
              <div key={item.id} className="p-4 border rounded-lg">
                <div className="flex items-center justify-between mb-4">
                  <h4 className="font-medium">
                    {index + 1}. {item.name}
                    {item.type === 'measurement' && ` (${(item as MeasurementItem).unit})`}
                  </h4>
                  <span className={`text-sm font-medium ${
                    item.judgment === '적합' ? 'text-green-600' :
                    item.judgment === '부적합' ? 'text-red-600' :
                    'text-muted-foreground'
                  }`}>
                    판정: {item.judgment || '-'}
                  </span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label className="text-muted-foreground">기준(Spec)</Label>
                    <Input
                      value={item.spec}
                      disabled
                      className="bg-muted"
                    />
                  </div>

                  {item.type === 'quality' ? (
                    <div className="space-y-2">
                      <Label>결과 입력 *</Label>
                      <RadioGroup
                        value={(item as QualityCheckItem).result || ''}
                        onValueChange={(value) => handleQualityResultChange(item.id, value as '양호' | '불량')}
                        className="flex items-center gap-4 h-10"
                      >
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="양호" id={`${item.id}-pass`} />
                          <Label htmlFor={`${item.id}-pass`} className="cursor-pointer">양호</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="불량" id={`${item.id}-fail`} />
                          <Label htmlFor={`${item.id}-fail`} className="cursor-pointer">불량</Label>
                        </div>
                      </RadioGroup>
                    </div>
                  ) : (
                    <div className="space-y-2">
                      <Label>측정값 입력 ({(item as MeasurementItem).unit}) *</Label>
                      <Input
                        type="number"
                        step="0.1"
                        value={(item as MeasurementItem).measuredValue || ''}
                        onChange={(e) => handleMeasurementChange(item.id, e.target.value)}
                        placeholder={`측정값 입력 (${(item as MeasurementItem).unit})`}
                      />
                    </div>
                  )}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </PageLayout>
  );
}