'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { partsApi, alertsApi, type Part, type StockAlert } from '@parts/api';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Package,
  TrendingUp,
  TrendingDown,
  AlertTriangle,
  Plus,
  List,
  ArrowRightLeft,
  ChevronRight,
  Bell,
  Clock,
  RefreshCw,
} from 'lucide-react';
import { toast } from '@/lib/toast';

interface InventoryStats {
  totalParts: number;
  activeParts: number;
  lowStockParts: number;
  outOfStockParts: number;
}

export default function PartsOverviewPage() {
  const router = useRouter();
  const { t, locale } = useTranslation();
  const { isReady } = useAuthGuard();
  const [stats, setStats] = useState<InventoryStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [alerts, setAlerts] = useState<StockAlert[]>([]);
  const [recentParts, setRecentParts] = useState<Part[]>([]);

  useEffect(() => {
    if (isReady) {
      loadData();
    }
  }, [isReady]);

  const loadData = async () => {
    await Promise.all([
      loadStats(),
      loadAlerts(),
      loadRecentParts(),
    ]);
  };

  const loadStats = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await partsApi.getStats();
      setStats(response); // 响应拦截器已自动解包，直接使用 response
    } catch (error: any) {
      console.error('Failed to load stats:', error);
      if (error.response?.status === 403) {
        setError(t.parts.noPermissionToViewStats);
        setStats({
          totalParts: 0,
          activeParts: 0,
          lowStockParts: 0,
          outOfStockParts: 0,
        });
      } else {
        setError(t.common.error);
      }
    } finally {
      setLoading(false);
    }
  };

  const loadAlerts = async () => {
    try {
      const response = await alertsApi.list({
        status: 'PENDING',
        limit: 5,
      });
      setAlerts(response.items || []);
    } catch (error) {
      console.error('Failed to load alerts:', error);
    }
  };

  const loadRecentParts = async () => {
    try {
      const response = await partsApi.list({
        page: 1,
        limit: 5,
      });
      setRecentParts(response.items || []);
    } catch (error) {
      console.error('Failed to load recent parts:', error);
    }
  };

  const handleAcknowledgeAlert = async (alertId: string) => {
    try {
      await alertsApi.acknowledge({ alertId });
      toast.success(t.parts.acknowledgeAlert || 'Alert acknowledged');
      loadAlerts();
    } catch (error) {
      console.error('Failed to acknowledge alert:', error);
      toast.error(t.common.error);
    }
  };

  // 快捷操作卡片
  const quickActions = [
    {
      title: t.parts.createPart,
      description: t.parts.quickCreateDesc,
      icon: Plus,
      color: 'bg-blue-50 text-blue-600',
      action: () => router.push('/parts/create'),
    },
    {
      title: t.parts.viewParts,
      description: t.parts.quickViewDesc,
      icon: List,
      color: 'bg-green-50 text-green-600',
      action: () => router.push('/parts/manage'),
    },
    {
      title: t.parts.inventoryOps,
      description: t.parts.quickInventoryDesc,
      icon: ArrowRightLeft,
      color: 'bg-purple-50 text-purple-600',
      action: () => router.push('/parts/inventory-ops'),
    },
  ];

  const getStockStatusBadge = (alert: StockAlert) => {
    const severity = alert.severity;
    if (severity === 'CRITICAL') {
      return 'bg-red-100 text-red-700';
    } else if (severity === 'HIGH') {
      return 'bg-orange-100 text-orange-700';
    } else if (severity === 'MEDIUM') {
      return 'bg-yellow-100 text-yellow-700';
    }
    return 'bg-gray-100 text-gray-700';
  };

  const formatTimeAgo = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60));
    
    if (diffInHours < 1) return t.parts.justNow;
    if (diffInHours < 24) return t.parts.hoursAgo.replace('{hours}', diffInHours.toString());
    const diffInDays = Math.floor(diffInHours / 24);
    if (diffInDays < 7) return t.parts.daysAgo.replace('{days}', diffInDays.toString());
    return date.toLocaleDateString(t.locale === 'zh' ? 'zh-CN' : 'en-US');
  };

  // 等待认证完成
  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>
    );
  }

  return (
    <div className="min-h-full">
      <div className="px-8 py-8">
        {/* 权限错误提示 */}
        {error && (
          <div className="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div className="flex items-center">
              <AlertTriangle className="w-5 h-5 text-yellow-600 mr-2" />
              <p className="text-sm text-yellow-800">{error}</p>
            </div>
          </div>
        )}

        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">
                  {t.parts.totalParts}
                </p>
                <p className="mt-2 text-3xl font-semibold text-gray-900">
                  {loading ? '-' : stats?.totalParts || 0}
                </p>
              </div>
              <div className="bg-blue-100 rounded-lg p-3">
                <Package className="w-6 h-6 text-blue-600" />
              </div>
            </div>
            <div className="mt-4">
              <Button
                variant="ghost"
                size="sm"
                className="w-full justify-between"
                onClick={() => router.push('/parts/manage')}
              >
                {t.common.viewDetails}
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">
                  {t.parts.activeParts}
                </p>
                <p className="mt-2 text-3xl font-semibold text-green-600">
                  {loading ? '-' : stats?.activeParts || 0}
                </p>
              </div>
              <div className="bg-green-100 rounded-lg p-3">
                <TrendingUp className="w-6 h-6 text-green-600" />
              </div>
            </div>
            <div className="mt-4">
              <Button
                variant="ghost"
                size="sm"
                className="w-full justify-between"
                onClick={() => router.push('/parts/manage?status=ACTIVE')}
              >
                {t.common.viewDetails}
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">
                  {t.parts.lowStockParts}
                </p>
                <p className="mt-2 text-3xl font-semibold text-orange-600">
                  {loading ? '-' : stats?.lowStockParts || 0}
                </p>
              </div>
              <div className="bg-orange-100 rounded-lg p-3">
                <AlertTriangle className="w-6 h-6 text-orange-600" />
              </div>
            </div>
            <div className="mt-4">
              <Button
                variant="ghost"
                size="sm"
                className="w-full justify-between text-orange-600 hover:bg-orange-50"
                onClick={() => router.push('/parts/manage?stockStatus=LOW')}
              >
                {t.common.viewDetails}
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">
                  {t.parts.outOfStockParts}
                </p>
                <p className="mt-2 text-3xl font-semibold text-red-600">
                  {loading ? '-' : stats?.outOfStockParts || 0}
                </p>
              </div>
              <div className="bg-red-100 rounded-lg p-3">
                <TrendingDown className="w-6 h-6 text-red-600" />
              </div>
            </div>
            <div className="mt-4">
              <Button
                variant="ghost"
                size="sm"
                className="w-full justify-between text-red-600 hover:bg-red-50"
                onClick={() => router.push('/parts/manage?stockStatus=OUT_OF_STOCK')}
              >
                {t.common.viewDetails}
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>

        {/* 快捷操作 */}
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">
            {t.common.quickActions}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {quickActions.map((action, index) => {
              const Icon = action.icon;
              return (
                <div
                  key={`quick-action-${index}`}
                  className="bg-white rounded-lg shadow p-6 hover:shadow-lg transition-shadow cursor-pointer"
                  onClick={action.action}
                >
                  <div className={`${action.color} rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4`}>
                    <Icon className="w-6 h-6" />
                  </div>
                  <h3 className="text-base font-semibold text-gray-900 mb-2">
                    {action.title}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {action.description}
                  </p>
                  <div className="mt-4">
                    <Button variant="ghost" size="sm" className="w-full justify-between">
                      {t.parts.goToButton}
                      <ChevronRight className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* 库存预警面板 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* 库存预警 */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900 flex items-center">
                <Bell className="w-5 h-5 mr-2 text-orange-600" />
                {t.parts.stockAlertsTitle}
              </h2>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push('/parts/alerts')}
              >
                {t.parts.viewAllButton}
                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            </div>
            <div className="bg-white rounded-lg shadow">
              {alerts.length === 0 ? (
                <div className="p-8 text-center text-gray-500">
                  <AlertTriangle className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                  <p>{t.parts.noAlertsMessage}</p>
                </div>
              ) : (
                <div className="divide-y divide-gray-200">
                  {alerts.map((alert) => (
                    <div key={alert.id} className="p-4 hover:bg-gray-50">
                      <div className="flex items-start justify-between">
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <span className={`px-2 py-0.5 rounded text-xs font-medium ${getStockStatusBadge(alert)}`}>
                              {alert.severity}
                            </span>
                            <span className="text-sm font-medium text-gray-900">
                              {alert.alertType}
                            </span>
                          </div>
                          <p className="text-sm text-gray-600 mb-2">
                            {alert.message}
                          </p>
                          <div className="flex items-center text-xs text-gray-500">
                            <Clock className="w-3 h-3 mr-1" />
                            {formatTimeAgo(alert.createdAt)}
                          </div>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleAcknowledgeAlert(alert.id)}
                        >
                          {t.parts.acknowledgeButton}
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* 最近添加 */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-gray-900 flex items-center">
                <Clock className="w-5 h-5 mr-2 text-blue-600" />
                {t.parts.recentlyAddedTitle}
              </h2>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => router.push('/parts/manage')}
              >
                {t.parts.viewAllButton}
                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            </div>
            <div className="bg-white rounded-lg shadow">
              {recentParts.length === 0 ? (
                <div className="p-8 text-center text-gray-500">
                  <Package className="w-12 h-12 mx-auto mb-3 text-gray-400" />
                  <p>{t.parts.noDataMessage}</p>
                </div>
              ) : (
                <div className="divide-y divide-gray-200">
                  {recentParts.map((part) => (
                    <div
                      key={part.id}
                      className="p-4 hover:bg-gray-50 cursor-pointer"
                      onClick={() => router.push(`/parts/${part.id}`)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-1">
                          <p className="text-sm font-medium text-gray-900">
                            {part.partNumber}
                          </p>
                          <p className="text-sm text-gray-500">
                            {locale === 'zh' ? (part.partNameCn || part.partNameEn) : part.partNameEn}
                          </p>
                        </div>
                        <div className="text-right">
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                            part.stockStatus === 'NORMAL' ? 'bg-green-100 text-green-700' :
                            part.stockStatus === 'LOW' ? 'bg-orange-100 text-orange-700' :
                            'bg-red-100 text-red-700'
                          }`}>
                            {part.currentStock} {part.unit}
                          </span>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* 刷新按钮 */}
        <div className="flex justify-center">
          <Button
            variant="outline"
            onClick={loadData}
            disabled={loading}
          >
            {loading ? (
              <>
                <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                {t.parts.refreshing}
              </>
            ) : (
              <>
                <RefreshCw className="w-4 h-4 mr-2" />
                {t.parts.refreshData}
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}