import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Badge } from "./ui/badge";
import { ArrowLeft, CheckCircle, XCircle, AlertTriangle } from "lucide-react";

interface IncomingInspectionProps {
  onBack: () => void;
  onComplete: () => void;
  receivingData?: any;
}

export function IncomingInspection({ onBack, onComplete, receivingData }: IncomingInspectionProps) {
  const [inspectionResult, setInspectionResult] = useState<'pass' | 'fail' | 'conditional'>('pass');
  const [inspectorName, setInspectorName] = useState('김검사');
  const [inspectionNotes, setInspectionNotes] = useState('');

  const handleSubmit = () => {
    // 검사 결과 저장 로직 (DataContext에 추가 예정)
    console.log('검사 완료:', {
      receivingData,
      inspectionResult,
      inspectorName,
      inspectionNotes,
      inspectionDate: new Date().toISOString()
    });
    onComplete();
  };

  return (
    <Card className="border-0 shadow-lg bg-white/80 backdrop-blur">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-3">
            <Button
              variant="ghost"
              size="sm"
              onClick={onBack}
              className="mr-2"
            >
              <ArrowLeft className="w-4 h-4" />
            </Button>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center shadow-md">
                <CheckCircle className="w-5 h-5 text-white" />
              </div>
              <div>
                <h2 className="text-base md:text-lg">수입검사</h2>
                <p className="text-xs text-muted-foreground mt-0.5">
                  입고 자재 품질검사 수행
                </p>
              </div>
            </div>
          </CardTitle>
        </div>
      </CardHeader>
      <CardContent className="px-3 md:px-6">
        <div className="space-y-6">
          {/* 입고 정보 요약 */}
          {receivingData && (
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50/50 p-4 rounded-xl border border-blue-100">
              <h3 className="font-semibold mb-3 text-blue-900">입고 정보</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                <div>
                  <span className="text-muted-foreground">품목:</span>
                  <p className="font-medium">{receivingData.itemName || '-'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">규격:</span>
                  <p className="font-medium">{receivingData.specification || '-'}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">수량:</span>
                  <p className="font-medium">{receivingData.quantity || 0}</p>
                </div>
                <div>
                  <span className="text-muted-foreground">공급업체:</span>
                  <p className="font-medium">{receivingData.supplier || '-'}</p>
                </div>
              </div>
            </div>
          )}

          {/* 검사 정보 입력 */}
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="inspector">검사자</Label>
                <Input
                  id="inspector"
                  value={inspectorName}
                  onChange={(e) => setInspectorName(e.target.value)}
                  placeholder="검사자명 입력"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="inspectionDate">검사일자</Label>
                <Input
                  id="inspectionDate"
                  type="date"
                  defaultValue={new Date().toISOString().split('T')[0]}
                />
              </div>
            </div>

            {/* 검사 결과 선택 */}
            <div className="space-y-2">
              <Label>검사 결과</Label>
              <div className="flex flex-wrap gap-2">
                <Button
                  type="button"
                  variant={inspectionResult === 'pass' ? 'default' : 'outline'}
                  className={inspectionResult === 'pass' ? 'bg-green-600 hover:bg-green-700' : ''}
                  onClick={() => setInspectionResult('pass')}
                >
                  <CheckCircle className="w-4 h-4 mr-2" />
                  합격
                </Button>
                <Button
                  type="button"
                  variant={inspectionResult === 'fail' ? 'default' : 'outline'}
                  className={inspectionResult === 'fail' ? 'bg-red-600 hover:bg-red-700' : ''}
                  onClick={() => setInspectionResult('fail')}
                >
                  <XCircle className="w-4 h-4 mr-2" />
                  불합격
                </Button>
                <Button
                  type="button"
                  variant={inspectionResult === 'conditional' ? 'default' : 'outline'}
                  className={inspectionResult === 'conditional' ? 'bg-yellow-600 hover:bg-yellow-700' : ''}
                  onClick={() => setInspectionResult('conditional')}
                >
                  <AlertTriangle className="w-4 h-4 mr-2" />
                  조건부합격
                </Button>
              </div>
            </div>

            {/* 검사 소견 */}
            <div className="space-y-2">
              <Label htmlFor="notes">검사 소견</Label>
              <Textarea
                id="notes"
                value={inspectionNotes}
                onChange={(e) => setInspectionNotes(e.target.value)}
                placeholder="검사 결과에 대한 상세 내용을 입력하세요"
                rows={5}
              />
            </div>
          </div>

          {/* 결과 표시 */}
          <div className="flex items-center justify-between p-4 bg-gradient-to-r from-slate-50 to-gray-50 rounded-xl border">
            <div className="flex items-center gap-3">
              <div className="text-sm text-muted-foreground">최종 판정:</div>
              {inspectionResult === 'pass' && (
                <Badge className="bg-green-600">합격</Badge>
              )}
              {inspectionResult === 'fail' && (
                <Badge className="bg-red-600">불합격</Badge>
              )}
              {inspectionResult === 'conditional' && (
                <Badge className="bg-yellow-600">조건부합격</Badge>
              )}
            </div>
          </div>

          {/* 액션 버튼 */}
          <div className="flex justify-end gap-3 pt-4 border-t">
            <Button variant="outline" onClick={onBack}>
              취소
            </Button>
            <Button
              onClick={handleSubmit}
              className="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
            >
              검사 완료
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
