iloom-flatten/src/pages/purchaser/AccountsPayable.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { supabase } from '../../supabase/client';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, ChevronDown, ChevronRight, DollarSign, Package, CheckCircle, Clock, AlertCircle } from 'lucide-react';

interface AccountsPayable {
  id: string;
  plan_id: string;
  textile_factory_id: string;
  factory_name: string;
  total_amount: number;
  paid_amount: number;
  unpaid_amount: number;
  total_quantity: number;
  paid_quantity: number;
  unpaid_quantity: number;
  price_per_meter: number;
  status: string;
  created_at: string;
  updated_at: string;
  plan_code: string;
  product_name: string;
  color: string;
}

interface AccountsPayableItem {
  id: string;
  inventory_record_id: string | null;
  quantity: number;
  rolls: number | null;
  price_per_meter: number;
  amount: number;
  status: string;
  created_at: string;
  paid_at: string | null;
}

export function AccountsPayable() {
  const navigate = useNavigate();
  const { auth } = useAuth();
  const [payables, setPayables] = useState<AccountsPayable[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
  const [payableItems, setPayableItems] = useState<Record<string, AccountsPayableItem[]>>({});

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

  const fetchPayables = async () => {
    setLoading(true);
    
    // 获取应付账款列表
    const { data: apData, error: apError } = await supabase
      .from('accounts_payable')
      .select('*')
      .eq('purchaser_id', auth.company!.id)
      .order('created_at', { ascending: false });

    if (apError) {
      console.error('获取应付账款失败:', apError);
      setLoading(false);
      return;
    }

    // 获取工厂信息
    const factoryIds = [...new Set((apData || []).map(ap => ap.textile_factory_id))];
    const { data: factoriesData } = await supabase
      .from('companies')
      .select('id, name')
      .in('id', factoryIds);

    const factoryMap: Record<string, string> = {};
    (factoriesData || []).forEach(f => {
      factoryMap[f.id] = f.name;
    });

    // 获取计划信息
    const planIds = [...new Set((apData || []).map(ap => ap.plan_id))];
    const { data: plansData } = await supabase
      .from('production_plans')
      .select('id, plan_code, product_name, color')
      .in('id', planIds);

    const planMap: Record<string, { plan_code: string; product_name: string; color: string }> = {};
    (plansData || []).forEach(p => {
      planMap[p.id] = { plan_code: p.plan_code, product_name: p.product_name, color: p.color };
    });

    // 组合数据
    const payablesWithInfo: AccountsPayable[] = (apData || []).map(ap => ({
      ...ap,
      factory_name: factoryMap[ap.textile_factory_id] || '未知工厂',
      plan_code: planMap[ap.plan_id]?.plan_code || '',
      product_name: planMap[ap.plan_id]?.product_name || '',
      color: planMap[ap.plan_id]?.color || ''
    }));

    setPayables(payablesWithInfo);
    setLoading(false);
  };

  const fetchPayableItems = async (payableId: string) => {
    const { data: itemsData } = await supabase
      .from('accounts_payable_items')
      .select('*')
      .eq('accounts_payable_id', payableId)
      .order('created_at', { ascending: false });

    setPayableItems(prev => ({
      ...prev,
      [payableId]: itemsData || []
    }));
  };

  const toggleExpand = (payableId: string) => {
    if (expandedPlan === payableId) {
      setExpandedPlan(null);
    } else {
      setExpandedPlan(payableId);
      if (!payableItems[payableId]) {
        fetchPayableItems(payableId);
      }
    }
  };

  const getStatusConfig = (status: string) => {
    switch (status) {
      case 'paid':
        return { label: '已结清', color: 'text-green-600', bgColor: 'bg-green-50', icon: CheckCircle };
      case 'partial':
        return { label: '部分付款', color: 'text-amber-600', bgColor: 'bg-amber-50', icon: Clock };
      default:
        return { label: '未付款', color: 'text-red-600', bgColor: 'bg-red-50', icon: AlertCircle };
    }
  };

  // 统计
  const totalUnpaid = payables.reduce((sum, p) => sum + p.unpaid_amount, 0);
  const totalPaid = payables.reduce((sum, p) => sum + p.paid_amount, 0);

  return (
    <div className="min-h-screen bg-gray-50 p-3 sm:p-4 md:p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="flex items-center gap-2 sm:gap-3 md:gap-4 mb-4 sm:mb-5 md:mb-6">
          <motion.button
            whileTap={{ scale: 0.95 }}
            onClick={() => navigate('/purchaser')}
            className="p-2 hover:bg-gray-200 rounded-full transition-colors will-change-transform"
          >
            <ArrowLeft className="w-5 h-5 sm:w-6 sm:h-6 text-gray-600" />
          </motion.button>
          <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800">应付账款</h1>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-2 gap-3 sm:gap-4 mb-4 sm:mb-6">
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4"
          >
            <div className="flex items-center gap-2 mb-2">
              <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
                <DollarSign className="w-4 h-4 text-red-600" />
              </div>
              <span className="text-xs sm:text-sm text-gray-500">未付金额</span>
            </div>
            <p className="text-lg sm:text-xl font-bold text-red-600">¥{totalUnpaid.toFixed(2)}</p>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4"
          >
            <div className="flex items-center gap-2 mb-2">
              <div className="w-8 h-8 rounded-lg bg-green-100 flex items-center justify-center">
                <CheckCircle className="w-4 h-4 text-green-600" />
              </div>
              <span className="text-xs sm:text-sm text-gray-500">已付金额</span>
            </div>
            <p className="text-lg sm:text-xl font-bold text-green-600">¥{totalPaid.toFixed(2)}</p>
          </motion.div>
        </div>

        {/* 应付账款列表 */}
        {loading ? (
          <div className="flex flex-col items-center justify-center py-12 sm:py-16">
            <motion.div
              animate={{ rotate: 360 }}
              transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
              className="w-6 h-6 sm:w-8 sm:h-8 border-2 border-blue-500 border-t-transparent rounded-full mb-3"
            />
            <p className="text-gray-400 text-sm">加载中...</p>
          </div>
        ) : payables.length === 0 ? (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center py-12 sm:py-16 text-gray-400 bg-white rounded-xl border border-dashed border-gray-300"
          >
            <Package className="w-12 h-12 mx-auto mb-3 text-gray-300" />
            <p className="mb-2 text-sm sm:text-base">暂无应付账款</p>
            <p className="text-xs sm:text-sm text-gray-400">生产记录将自动生成应付账款</p>
          </motion.div>
        ) : (
          <div className="space-y-3 sm:space-y-4">
            {payables.map((payable, index) => {
              const statusConfig = getStatusConfig(payable.status);
              const StatusIcon = statusConfig.icon;
              const isExpanded = expandedPlan === payable.id;
              const items = payableItems[payable.id] || [];

              return (
                <motion.div
                  key={payable.id}
                  initial={{ opacity: 0, y: 15 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: Math.min(index * 0.03, 0.2), duration: 0.25 }}
                  className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"
                >
                  {/* 头部 */}
                  <motion.div
                    onClick={() => toggleExpand(payable.id)}
                    whileTap={{ scale: 0.995 }}
                    className="flex items-center justify-between p-3 sm:p-4 cursor-pointer hover:bg-gray-50 transition-colors will-change-transform"
                  >
                    <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
                      <motion.div
                        animate={{ rotate: isExpanded ? 90 : 0 }}
                        transition={{ duration: 0.2 }}
                        className="p-1 rounded hover:bg-gray-200 will-change-transform flex-shrink-0"
                      >
                        <ChevronRight size={18} className="sm:w-5 sm:h-5" />
                      </motion.div>
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <h3 className="font-semibold text-gray-800 text-sm sm:text-base truncate">
                            {payable.product_name}-{payable.color}
                          </h3>
                          <span className={`px-2 py-0.5 text-xs rounded-full whitespace-nowrap ${statusConfig.bgColor} ${statusConfig.color}`}>
                            {statusConfig.label}
                          </span>
                        </div>
                        <p className="text-xs text-gray-500">{payable.plan_code} · {payable.factory_name}</p>
                      </div>
                    </div>
                    <div className="text-right flex-shrink-0 ml-2">
                      <p className="text-sm font-bold text-gray-800">¥{payable.unpaid_amount.toFixed(2)}</p>
                      <p className="text-xs text-gray-400">未付</p>
                    </div>
                  </motion.div>

                  {/* 展开的明细 */}
                  <AnimatePresence>
                    {isExpanded && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
                        className="border-t border-gray-100"
                      >
                        <div className="p-3 sm:p-4 bg-gray-50">
                          {/* 汇总信息 */}
                          <div className="grid grid-cols-3 gap-2 sm:gap-4 mb-4 p-3 bg-white rounded-lg border border-gray-200">
                            <div>
                              <p className="text-xs text-gray-500 mb-1">总数量</p>
                              <p className="text-sm font-medium text-gray-800">{payable.total_quantity}米</p>
                            </div>
                            <div>
                              <p className="text-xs text-gray-500 mb-1">单价</p>
                              <p className="text-sm font-medium text-gray-800">¥{payable.price_per_meter}/米</p>
                            </div>
                            <div>
                              <p className="text-xs text-gray-500 mb-1">总金额</p>
                              <p className="text-sm font-medium text-gray-800">¥{payable.total_amount.toFixed(2)}</p>
                            </div>
                          </div>

                          {/* 入库明细 */}
                          <h4 className="text-xs font-medium text-gray-500 mb-2">入库明细</h4>
                          {items.length === 0 ? (
                            <p className="text-xs text-gray-400 py-2">暂无明细</p>
                          ) : (
                            <div className="space-y-2">
                              {items.map((item, itemIndex) => (
                                <motion.div
                                  key={item.id}
                                  initial={{ opacity: 0, x: -10 }}
                                  animate={{ opacity: 1, x: 0 }}
                                  transition={{ delay: itemIndex * 0.05 }}
                                  className="flex items-center justify-between p-2 bg-white rounded-lg border border-gray-200"
                                >
                                  <div className="flex items-center gap-2">
                                    <span className="text-xs text-gray-500">
                                      {new Date(item.created_at).toLocaleDateString('zh-CN')}
                                    </span>
                                    <span className="text-xs text-gray-700">
                                      {item.quantity}米 / {item.rolls}匹/件
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-2">
                                    <span className="text-xs text-gray-500">
                                      ¥{item.price_per_meter}/米
                                    </span>
                                    <span className="text-sm font-medium text-gray-800">
                                      ¥{item.amount.toFixed(2)}
                                    </span>
                                    {item.status === 'paid' ? (
                                      <span className="px-1.5 py-0.5 text-xs rounded-full bg-green-50 text-green-600">
                                        已付
                                      </span>
                                    ) : (
                                      <span className="px-1.5 py-0.5 text-xs rounded-full bg-red-50 text-red-600">
                                        未付
                                      </span>
                                    )}
                                  </div>
                                </motion.div>
                              ))}
                            </div>
                          )}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}