import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { washingApi } from '../../api';
import { motion } from 'framer-motion';
import { ArrowLeft, CheckCircle, Droplets, ChevronRight } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import type { WashingPlan } from '../../types';

interface CompletedFabricItem {
  id: string;
  plan_code: string;
  purchaser_name: string;
  product_name: string;
  product_color: string;
  fabric_code: string;
  planned_meters: number;
  actual_washed_meters: number;
  shrinkage_rate: number;
  washing_date: string;
  rolls: number;
  completed_at: string;
}

export function CompletedFabric() {
  const navigate = useNavigate();
  const { auth } = useAuth();
  const { isMobile } = useResponsive();
  const [items, setItems] = useState<CompletedFabricItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!auth.company) return;
    fetchCompletedFabric();
  }, [auth.company]);

  const fetchCompletedFabric = async () => {
    setLoading(true);

    try {
      const data = await washingApi.listCompletedPlans();

      const formattedItems = (data || []).map((plan: any) => ({
        id: plan.id,
        plan_code: plan.plan_code,
        purchaser_name: plan.purchaser_name || plan.company?.name || '未知采购商',
        product_name: plan.product_name || plan.product?.product_name || '-',
        product_color: plan.product_color || plan.product?.color || '-',
        fabric_code: plan.fabric_code || plan.product?.fabric_code || '-',
        planned_meters: plan.planned_meters,
        actual_washed_meters: plan.completion?.actual_washed_meters || plan.actual_washed_meters || 0,
        shrinkage_rate: plan.completion?.actual_shrinkage_rate || plan.actual_shrinkage_rate || 0,
        washing_date: plan.completion?.washing_date || plan.washing_date || '',
        rolls: plan.completion?.rolls || 0,
        completed_at: plan.completion?.completed_at || plan.updated_at
      }));
      setItems(formattedItems);
    } catch {
    }
    setLoading(false);
  };

  const totalBefore = items.reduce((sum, item) => sum + item.planned_meters, 0);
  const totalAfter = items.reduce((sum, item) => sum + item.actual_washed_meters, 0);
  const avgShrinkage = items.length > 0 
    ? items.reduce((sum, item) => sum + item.shrinkage_rate, 0) / items.length 
    : 0;

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50/30 to-violet-50/30">
      {/* Header - 与 Dashboard 一致 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 md:px-8 py-4 flex items-center gap-3">
          <button
            onClick={() => navigate('/washing')}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <ArrowLeft className="w-5 h-5 text-gray-600" />
          </button>
          <div>
            <h1 className="text-lg font-bold text-gray-900">已完成坯布</h1>
            <p className="text-xs text-gray-500">查看已完成水洗的坯布记录</p>
          </div>
        </div>
      </header>

      <div className="p-4 md:p-8 max-w-7xl mx-auto">
        {/* 统计卡片 */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
          <div className="bg-white rounded-xl p-4 shadow-sm">
            <p className="text-xs text-gray-500 mb-1">已完成计划</p>
            <p className="text-2xl font-bold text-gray-800">{items.length}</p>
          </div>
          <div className="bg-purple-50 rounded-xl p-4 shadow-sm">
            <p className="text-xs text-purple-600 mb-1">水洗前米数</p>
            <p className="text-2xl font-bold text-purple-700">{totalBefore.toFixed(2)}</p>
          </div>
          <div className="bg-green-50 rounded-xl p-4 shadow-sm">
            <p className="text-xs text-green-600 mb-1">水洗后米数</p>
            <p className="text-2xl font-bold text-green-700">{totalAfter.toFixed(2)}</p>
          </div>
          <div className="bg-purple-50 rounded-xl p-4 shadow-sm">
            <p className="text-xs text-purple-600 mb-1">平均缩水率</p>
            <p className="text-2xl font-bold text-purple-700">{avgShrinkage.toFixed(2)}%</p>
          </div>
        </div>

        {/* 列表 */}
        {loading ? (
          <div className="text-center py-12 text-gray-400">加载中...</div>
        ) : items.length === 0 ? (
          <div className="text-center py-12 text-gray-400">
            <CheckCircle className="w-12 h-12 mx-auto mb-3 text-gray-300" />
            <p>暂无已完成坯布</p>
          </div>
        ) : (
          <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
            <div className="p-4 border-b border-gray-100">
              <h2 className="text-base font-semibold text-gray-800">已完成列表</h2>
            </div>
            <div className="divide-y divide-gray-100">
              {items.map((item, index) => (
                <motion.div
                  key={item.id}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: Math.min(index * 0.02, 0.1) }}
                  onClick={() => navigate(`/washing/plans?id=${item.id}`)}
                  className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-1 rounded-lg text-xs font-medium bg-green-50 text-green-600">
                          已完成
                        </span>
                        <span className="text-xs text-gray-400">{item.plan_code}</span>
                      </div>
                      <p className="font-medium text-gray-800 mb-1">
                        {item.purchaser_name}
                      </p>
                      <p className="text-sm text-gray-600">
                        {item.product_name} - {item.product_color}
                      </p>
                      <p className="text-xs text-gray-400 mt-1">
                        坯布码: {item.fabric_code} | 匹/件数: {item.rolls}匹/件
                      </p>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-600 mb-1">
                        <span className="text-blue-600">{item.planned_meters}米</span>
                        <span className="mx-1">→</span>
                        <span className="text-green-600 font-bold">{item.actual_washed_meters}米</span>
                      </div>
                      <p className="text-xs text-purple-600">
                        缩水率: {item.shrinkage_rate}%
                      </p>
                      <p className="text-xs text-gray-400 mt-1">
                        {item.washing_date ? new Date(item.washing_date).toLocaleDateString('zh-CN') : '-'}
                      </p>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
