'use client';

import { useState, useEffect } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { QRScanner } from '@/components/common/QrScanner';
import { 
  Camera, 
  Search,
  PackageCheck, 
  PackageMinus, 
  Loader2,
  AlertCircle,
  CheckCircle2,
  Box,
  Package
} from 'lucide-react';
import { toast } from '@/lib/toast';
import { partsApi, inventoryApi } from '@parts/api';

interface PartDetails {
  id: string;
  partNumber: string;
  partNameEn: string;
  partNameCn?: string;
  currentStock: number;
  minStock: number;
  maxStock?: number;
  unit: string;
  station?: string;
  warehouseLocation?: string;
  qrCode: string;
  specifications?: string;
  remark?: string;
}

export default function ScanInventoryPage() {
  const { t, locale } = useTranslation();
  const { isReady } = useAuthGuard();
  const [qrCode, setQrCode] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [part, setPart] = useState<PartDetails | null>(null);
  const [operationQuantity, setOperationQuantity] = useState(1);
  const [operationReason, setOperationReason] = useState('');
  const [showScanner, setShowScanner] = useState(false);
  
  // 检测是否为移动设备
  const [isMobile, setIsMobile] = useState(false);
  
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    
    return () => window.removeEventListener('resize', checkMobile);
  }, []);
  
  // 等待认证完成
  if (!isReady) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
      </div>
    );
  }

  /**
   * 解析二维码内容
   * 支持两种格式：
   * 1. JSON 格式: {"pn":"PART-001","name":"Part Name","ts":"2024-01-01T00:00:00.000Z"}
   * 2. 纯零件号: PART-001
   */
  const parseQRCode = (qrData: string): string => {
    try {
      // 尝试解析 JSON 格式
      const data = JSON.parse(qrData);
      if (data.pn) {
        return data.pn; // 返回 Part Number
      }
    } catch {
      // 不是 JSON，直接返回原始内容作为零件号
    }
    return qrData.trim();
  };

  // 处理扫码或手动输入
  const handleScan = async (code?: string, showSuccessToast: boolean = true) => {
    const searchCode = code || qrCode;
    if (!searchCode.trim()) {
      toast.error(t.scan.emptyCode);
      return;
    }

    setIsLoading(true);
    try {
      // 解析二维码，获取零件号
      const partNumber = parseQRCode(searchCode);
      console.log('Parsed part number:', partNumber, 'from:', searchCode);
      
      // 通过零件号查询零件
      const response = (await partsApi.getByCode(partNumber)) as any;
      console.log('Part API response:', response);
      
      // 处理响应格式（支持直接返回和包裹在data中的两种格式）
      const partData = response.data || response;
      console.log('Extracted part data:', partData);
      
      setPart(partData);
      
      // 重置操作表单
      setOperationQuantity(1);
      setOperationReason('');
      setQrCode(''); // 清空输入框

      // 只在需要时显示成功提示
      if (showSuccessToast) {
        toast.success(t.scan.scanSuccess);
      }
    } catch (error: any) {
      console.error('Scan failed:', error);
      toast.error(error.response?.data?.message || t.scan.scanFailed);
      setPart(null);
    } finally {
      setIsLoading(false);
    }
  };

  // 签入操作
  const handleCheckIn = async () => {
    if (!part) return;
    if (operationQuantity <= 0) {
      toast.error(t.inventory.invalidQuantity);
      return;
    }

    setIsLoading(true);
    try {
      await inventoryApi.checkIn({
        code: part.partNumber,
        quantity: operationQuantity,
        reason: operationReason || undefined,
      });

      toast.success(t.inventory.checkInSuccess);
      
      // 重新加载零件信息（不显示扫描成功提示）
      await handleScan(part.partNumber, false);
    } catch (error: any) {
      console.error('Check-in failed:', error);
      toast.error(error.response?.data?.message || t.inventory.checkInFailed);
    } finally {
      setIsLoading(false);
    }
  };

  // 签出操作
  const handleCheckOut = async () => {
    if (!part) return;
    if (operationQuantity <= 0) {
      toast.error(t.inventory.invalidQuantity);
      return;
    }
    if (operationQuantity > part.currentStock) {
      toast.error(t.inventory.insufficientStock);
      return;
    }

    setIsLoading(true);
    try {
      await inventoryApi.checkOut({
        code: part.partNumber,
        quantity: operationQuantity,
        station: part.station || '默认工位',
        reason: operationReason || undefined,
      });

      toast.success(t.inventory.checkOutSuccess);
      
      // 重新加载零件信息（不显示扫描成功提示）
      await handleScan(part.partNumber, false);
    } catch (error: any) {
      console.error('Check-out failed:', error);
      toast.error(error.response?.data?.message || t.inventory.checkOutFailed);
    } finally {
      setIsLoading(false);
    }
  };

  // 获取库存状态
  const getStockStatus = () => {
    if (!part) return { status: 'normal', label: '', color: '' };
    
    if (part.currentStock === 0) {
      return { 
        status: 'out',
        label: t.parts.statusOut, 
        color: 'bg-red-100 text-red-700',
      };
    }
    if (part.currentStock <= part.minStock) {
      return { 
        status: 'low',
        label: t.parts.statusLow, 
        color: 'bg-amber-100 text-amber-700',
      };
    }
    return { 
      status: 'normal',
      label: t.parts.statusNormal, 
      color: 'bg-green-100 text-green-700',
    };
  };

  const stockStatus = getStockStatus();
  const displayName = part ? (locale === 'zh' ? (part.partNameCn || part.partNameEn) : part.partNameEn) : '';

  return (
    <div className="h-screen flex flex-col bg-gradient-to-br from-blue-50 via-white to-slate-50">
      {/* 标题栏 */}
      <div className="bg-white border-b shadow-sm flex-shrink-0">
        <div className="px-4 md:px-6 py-4">
          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 text-center">
            {t.scan.title}
          </h1>
          {!isMobile && (
            <p className="text-sm text-gray-600 text-center mt-1">
              {t.scan.subtitle}
            </p>
          )}
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-4xl mx-auto p-4 md:p-6 lg:p-8 space-y-6">
          
          {/* 扫码输入区域 - 简洁设计 */}
          <Card className="border-2 border-blue-200 shadow-lg">
            <CardContent className="pt-6 pb-6">
              <div className="space-y-4">
                {/* 输入框 */}
                <div className="relative">
                  <Input
                    placeholder={t.scan.scanOrEnterCode}
                    value={qrCode}
                    onChange={(e) => setQrCode(e.target.value)}
                    onKeyPress={(e) => {
                      if (e.key === 'Enter' && qrCode.trim() && !isLoading) {
                        handleScan();
                      }
                    }}
                    className="h-14 md:h-16 text-base md:text-lg pl-12 pr-4 border-2 focus:border-blue-400"
                    autoFocus
                    disabled={isLoading}
                  />
                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                </div>

                {/* 操作按钮组 */}
                <div className="grid grid-cols-2 gap-3">
                  {/* 确认/查询按钮 */}
                  <Button
                    onClick={() => handleScan()}
                    disabled={!qrCode.trim() || isLoading}
                    size="lg"
                    className="h-12 md:h-14 text-base md:text-lg font-semibold bg-blue-600 hover:bg-blue-700 shadow-md"
                  >
                    {isLoading ? (
                      <>
                        <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                        {t.scan.scanning}
                      </>
                    ) : (
                      <>
                        <Search className="w-5 h-5 mr-2" />
                        {t.common.confirm}
                      </>
                    )}
                  </Button>

                  {/* 扫码按钮 */}
                  <Button
                    onClick={() => setShowScanner(true)}
                    size="lg"
                    variant="outline"
                    className="h-12 md:h-14 text-base md:text-lg font-semibold border-2 border-blue-600 text-blue-600 hover:bg-blue-50 shadow-md"
                    disabled={isLoading}
                  >
                    <Camera className="w-5 h-5 mr-2" />
                    {t.scan.cameraMode}
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 零件详情区域 */}
          {part && (
            <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
              {/* 零件基本信息 */}
              <Card className="border-2 border-blue-100 shadow-lg">
                <CardHeader className="pb-4">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1 min-w-0">
                      <CardTitle className="text-xl md:text-2xl mb-2 flex items-center gap-3">
                        <Package className="w-6 h-6 md:w-7 md:h-7 text-blue-600 flex-shrink-0" />
                        <span className="truncate">{displayName}</span>
                      </CardTitle>
                      <p className="text-sm md:text-base text-gray-600 font-mono">{part.partNumber}</p>
                    </div>
                    <div className={`flex-shrink-0 px-4 py-2 rounded-full font-semibold flex items-center gap-2 ${stockStatus.color}`}>
                      {stockStatus.status === 'out' ? (
                        <AlertCircle className="w-4 h-4" />
                      ) : (
                        <CheckCircle2 className="w-4 h-4" />
                      )}
                      {stockStatus.label}
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* 关键信息 */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {/* 当前库存 */}
                    <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-5 rounded-xl border border-blue-200">
                      <p className="text-xs md:text-sm text-gray-600 mb-1 font-medium">{t.parts.currentStockLabel}</p>
                      <p className="text-3xl md:text-4xl font-bold text-blue-600">
                        {part.currentStock}
                      </p>
                      <p className="text-sm text-gray-600 mt-1">{part.unit}</p>
                    </div>

                    {/* 工位 */}
                    {part.station && (
                      <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-5 rounded-xl border border-purple-200">
                        <p className="text-xs md:text-sm text-gray-600 mb-1 font-medium">{t.parts.stationLabel}</p>
                        <p className="text-xl md:text-2xl font-semibold text-purple-700 truncate">{part.station}</p>
                      </div>
                    )}

                    {/* 仓位 */}
                    {part.warehouseLocation && (
                      <div className="bg-gradient-to-br from-amber-50 to-amber-100 p-5 rounded-xl border border-amber-200">
                        <p className="text-xs md:text-sm text-gray-600 mb-1 font-medium">{t.parts.warehouseLocationLabel}</p>
                        <p className="text-xl md:text-2xl font-semibold text-amber-700 truncate">{part.warehouseLocation}</p>
                      </div>
                    )}
                  </div>

                  {/* 库存范围 */}
                  {(part.minStock || part.maxStock) && (
                    <div className="flex items-center justify-center gap-6 md:gap-8 p-4 bg-gray-50 rounded-lg border border-gray-200">
                      <div className="text-center">
                        <p className="text-xs text-gray-500 mb-1">{t.parts.minStockLabel}</p>
                        <p className="text-lg md:text-xl font-bold text-gray-900">{part.minStock || 0}</p>
                      </div>
                      {part.maxStock && (
                        <>
                          <div className="h-10 w-px bg-gray-300"></div>
                          <div className="text-center">
                            <p className="text-xs text-gray-500 mb-1">{t.parts.maxStockLabel}</p>
                            <p className="text-lg md:text-xl font-bold text-gray-900">{part.maxStock}</p>
                          </div>
                        </>
                      )}
                    </div>
                  )}

                  {/* 规格和备注 */}
                  {(part.specifications || part.remark) && (
                    <div className="space-y-3 pt-2 border-t">
                      {part.specifications && (
                        <div>
                          <p className="text-xs font-medium text-gray-500 mb-1">
                            {locale === 'zh' ? '规格' : 'Specifications'}
                          </p>
                          <p className="text-sm text-gray-700 bg-gray-50 p-2 rounded">
                            {part.specifications}
                          </p>
                        </div>
                      )}
                      {part.remark && (
                        <div>
                          <p className="text-xs font-medium text-gray-500 mb-1">
                            {locale === 'zh' ? '备注' : 'Remark'}
                          </p>
                          <p className="text-sm text-gray-700 bg-amber-50 p-2 rounded border-l-2 border-amber-400">
                            {part.remark}
                          </p>
                        </div>
                      )}
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* 库存操作区域 */}
              <Card className="border-2 border-gray-200 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-lg md:text-xl">{t.inventory.operations}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* 数量和原因输入 */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        {t.inventory.quantity}
                      </label>
                      <Input
                        type="number"
                        min="1"
                        value={operationQuantity}
                        onChange={(e) => setOperationQuantity(Math.max(1, parseInt(e.target.value) || 1))}
                        className="h-12 text-base"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">
                        {t.inventory.reason} <span className="text-gray-400">({t.common.optional})</span>
                      </label>
                      <Input
                        value={operationReason}
                        onChange={(e) => setOperationReason(e.target.value)}
                        placeholder={t.inventory.reasonPlaceholder}
                        className="h-12 text-base"
                      />
                    </div>
                  </div>

                  {/* 操作按钮 */}
                  <div className="grid grid-cols-2 gap-4 pt-2">
                    <Button
                      onClick={handleCheckIn}
                      disabled={isLoading}
                      size="lg"
                      className="h-14 md:h-16 text-base md:text-lg font-semibold bg-green-600 hover:bg-green-700 shadow-md"
                    >
                      <PackageCheck className="w-5 h-5 mr-2" />
                      {t.inventory.checkIn}
                    </Button>
                    <Button
                      onClick={handleCheckOut}
                      disabled={isLoading || part.currentStock === 0}
                      size="lg"
                      variant="destructive"
                      className="h-14 md:h-16 text-base md:text-lg font-semibold shadow-md"
                    >
                      <PackageMinus className="w-5 h-5 mr-2" />
                      {t.inventory.checkOut}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

          {/* 提示信息 */}
          {!part && !isLoading && (
            <div className="text-center py-12">
              <Box className="w-16 h-16 mx-auto text-gray-300 mb-4" />
              <p className="text-gray-500 text-lg">{t.scan.noPartScanned}</p>
              <p className="text-gray-400 text-sm mt-2">{t.scan.scanCodePrompt}</p>
            </div>
          )}
        </div>
      </div>

      {/* 摄像头扫码组件 */}
      {showScanner && (
        <QRScanner
          onScan={(code) => {
            setShowScanner(false);
            setQrCode(code);
            handleScan(code);
          }}
          onClose={() => setShowScanner(false)}
        />
      )}
    </div>
  );
}