'use client';

/**
 * 검사 상세/수정 페이지
 */

import { useState, useCallback, useMemo } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { ClipboardCheck, Printer, Paperclip } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { PageLayout } from '@/components/organisms/PageLayout';
import { mockInspections, judgmentColorMap, judgeMeasurement } from './mockData';
import type { InspectionItem, QualityCheckItem, MeasurementItem } from './types';

interface InspectionDetailProps {
  id: string;
}

export function InspectionDetail({ id }: InspectionDetailProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const isEditMode = searchParams.get('mode') === 'edit';

  // 검사 데이터 조회 (mockData에서)
  const inspection = useMemo(() => {
    return mockInspections.find(i => i.id === id);
  }, [id]);

  // 수정 폼 상태
  const [editReason, setEditReason] = useState('');
  const [inspectionItems, setInspectionItems] = useState<InspectionItem[]>(
    inspection?.items || []
  );

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

  // 품질 검사 항목 결과 변경 (양호/불량)
  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 handleBack = () => {
    router.push('/quality/inspections');
  };

  // 수정 모드 진입
  const handleEditMode = () => {
    router.push(`/quality/inspections/${id}?mode=edit`);
  };

  // 수정 취소
  const handleCancelEdit = () => {
    router.push(`/quality/inspections/${id}`);
  };

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

    // 필수 필드: 수정 사유
    if (!editReason.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 handleSubmitEdit = () => {
    // validation 체크
    if (!validateForm()) {
      return;
    }
    // TODO: API 호출
    console.log('Submit Edit:', { editReason, items: inspectionItems });
    router.push(`/quality/inspections/${id}`);
  };

  // 수정 사유 변경 핸들러
  const handleEditReasonChange = (value: string) => {
    setEditReason(value);
    // 입력 시 에러 클리어
    if (validationErrors.length > 0) {
      setValidationErrors([]);
    }
  };

  // 성적서 출력
  const handlePrintReport = () => {
    // TODO: 성적서 출력 기능
    console.log('Print Report');
  };

  if (!inspection) {
    return (
      <PageLayout>
        <div className="flex items-center justify-center h-64">
          <p className="text-muted-foreground">검사 데이터를 찾을 수 없습니다.</p>
        </div>
      </PageLayout>
    );
  }

  // 상세 보기 모드
  if (!isEditMode) {
    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>
              <Badge variant="outline" className="text-sm">{inspection.inspectionNo}</Badge>
              {inspection.result && (
                <Badge className={`${judgmentColorMap[inspection.result]} border-0`}>
                  {inspection.result}
                </Badge>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" onClick={handlePrintReport}>
                <Printer className="w-4 h-4 mr-1.5" />
                성적서
              </Button>
              <Button variant="outline" onClick={handleBack}>
                목록
              </Button>
              <Button onClick={handleEditMode}>
                수정
              </Button>
            </div>
          </div>

          {/* 검사 정보 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">검사 정보</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                  <Label className="text-muted-foreground text-xs">검사번호</Label>
                  <p className="font-medium">{inspection.inspectionNo}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">검사유형</Label>
                  <p className="font-medium">{inspection.inspectionType}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">검사일자</Label>
                  <p className="font-medium">{inspection.inspectionDate || '-'}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">판정결과</Label>
                  <p className="font-medium">
                    {inspection.result && (
                      <Badge className={`${judgmentColorMap[inspection.result]} border-0`}>
                        {inspection.result}
                      </Badge>
                    )}
                    {!inspection.result && '-'}
                  </p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">품목명</Label>
                  <p className="font-medium">{inspection.itemName}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">LOT NO</Label>
                  <p className="font-medium">{inspection.lotNo}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">공정명</Label>
                  <p className="font-medium">{inspection.processName}</p>
                </div>
                <div>
                  <Label className="text-muted-foreground text-xs">검사자</Label>
                  <p className="font-medium">{inspection.inspector || '-'}</p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 검사 결과 데이터 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">검사 결과 데이터</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[150px]">항목명</TableHead>
                    <TableHead className="w-[150px]">기준(Spec)</TableHead>
                    <TableHead className="w-[150px]">측정값/결과</TableHead>
                    <TableHead className="w-[100px]">판정</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {inspection.items.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.spec}</TableCell>
                      <TableCell>
                        {item.type === 'quality'
                          ? (item as QualityCheckItem).result || '-'
                          : `${(item as MeasurementItem).measuredValue || '-'} ${(item as MeasurementItem).unit}`
                        }
                      </TableCell>
                      <TableCell>
                        <span className={item.judgment ? judgmentColorMap[item.judgment] : ''}>
                          {item.judgment || '-'}
                        </span>
                      </TableCell>
                    </TableRow>
                  ))}
                  {inspection.items.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={4} className="text-center text-muted-foreground">
                        검사 데이터가 없습니다.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          {/* 종합 의견 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">종합 의견</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm">{inspection.opinion || '의견이 없습니다.'}</p>
            </CardContent>
          </Card>

          {/* 첨부 파일 */}
          <Card>
            <CardHeader>
              <CardTitle className="text-base">첨부 파일</CardTitle>
            </CardHeader>
            <CardContent>
              {inspection.attachments && inspection.attachments.length > 0 ? (
                <div className="space-y-2">
                  {inspection.attachments.map((file) => (
                    <div key={file.id} className="flex items-center gap-2 text-sm">
                      <Paperclip className="w-4 h-4 text-muted-foreground" />
                      <a href={file.fileUrl} className="text-blue-600 hover:underline">
                        {file.fileName}
                      </a>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">첨부 파일이 없습니다.</p>
              )}
            </CardContent>
          </Card>
        </div>
      </PageLayout>
    );
  }

  // 수정 모드
  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={handleCancelEdit}>
              취소
            </Button>
            <Button onClick={handleSubmitEdit}>
              수정 완료
            </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={inspection.lotNo} disabled className="bg-muted" />
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">품목명 (비활성)</Label>
                <Input value={inspection.itemName} disabled className="bg-muted" />
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">공정명 (비활성)</Label>
                <Input value={inspection.processName} disabled className="bg-muted" />
              </div>
              <div className="space-y-2">
                <Label className="text-muted-foreground">수량 (비활성)</Label>
                <Input value={`${inspection.quantity} ${inspection.unit}`} disabled className="bg-muted" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 수정 사유 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">
              수정 사유 (필수 <span className="text-red-500">★</span>)
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Textarea
              value={editReason}
              onChange={(e) => handleEditReasonChange(e.target.value)}
              placeholder="수정 사유를 입력하세요 (예: 오기입 수정, 높이 측정값 입력 오류)"
              className="min-h-[100px]"
            />
          </CardContent>
        </Card>

        {/* 검사 데이터 수정 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">검사 데이터 수정</CardTitle>
          </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})`}
                      />
                      <p className="text-xs text-muted-foreground">
                        ※ (16.6으로 잘못 연결 16.6으로 수정)
                      </p>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </PageLayout>
  );
}
