import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Card } from '../ui/card';
import { Camera, Search } from 'lucide-react';
import { MachineryRecord } from '../../types/machinery';

interface QRCodeScannerProps {
  open: boolean;
  onClose: () => void;
  onMachineryFound: (machinery: MachineryRecord) => void;
  onSearch: (qrCode: string) => MachineryRecord | undefined;
}

export function QRCodeScanner({ open, onClose, onMachineryFound, onSearch }: QRCodeScannerProps) {
  const [qrCode, setQrCode] = useState('');
  const [error, setError] = useState('');

  const handleSearch = () => {
    setError('');
    
    if (!qrCode.trim()) {
      setError('请输入二维码内容');
      return;
    }

    const machinery = onSearch(qrCode);
    if (machinery) {
      onMachineryFound(machinery);
      setQrCode('');
      onClose();
    } else {
      setError('未找到对应的农机设备');
    }
  };

  const handleScanQRCode = () => {
    // 在实际应用中，这里应该调用摄像头扫描二维码
    // 这里模拟扫描过程
    alert('摄像头扫描功能需要在真实设备上使用。在演示环境中，请手动输入二维码内容。');
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>扫描农机二维码</DialogTitle>
          <DialogDescription className="sr-only">
            使用摄像头或手动输入扫描农机二维码
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <Card className="p-6 bg-muted/50">
            <div className="flex flex-col items-center space-y-4">
              <div className="w-48 h-48 border-2 border-dashed border-primary rounded-lg flex items-center justify-center">
                <Camera className="w-16 h-16 text-muted-foreground" />
              </div>
              <Button onClick={handleScanQRCode} className="w-full">
                <Camera className="w-4 h-4 mr-2" />
                启动摄像头扫描
              </Button>
            </div>
          </Card>

          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <span className="w-full border-t" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">或</span>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="qrCode">手动输入二维码内容</Label>
            <div className="flex gap-2">
              <Input
                id="qrCode"
                value={qrCode}
                onChange={(e) => {
                  setQrCode(e.target.value);
                  setError('');
                }}
                placeholder="输入二维码内容"
                onKeyPress={(e) => {
                  if (e.key === 'Enter') {
                    handleSearch();
                  }
                }}
              />
              <Button onClick={handleSearch}>
                <Search className="w-4 h-4" />
              </Button>
            </div>
            {error && (
              <p className="text-sm text-destructive">{error}</p>
            )}
          </div>

          <div className="text-sm text-muted-foreground">
            <p>提示：</p>
            <ul className="list-disc list-inside space-y-1 mt-2">
              <li>扫描农机设备上的二维码即可查看完整档案</li>
              <li>也可以手动输入二维码内容进行查询</li>
              <li>示例格式: machinery-{'{设备ID}'}</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
