import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import { formatDateTime } from '../../utils/helpers';
import type { FabricBatch } from '../../types';

interface InboundRecordsProps {
  batches: FabricBatch[];
}

export function InboundRecords({ batches }: InboundRecordsProps) {
  const { isMobile } = useResponsive();
  const [expandedBatch, setExpandedBatch] = useState<string | null>(null);

  if (isMobile) {
    return (
      <div className="space-y-3">
        {batches.map(batch => (
          <motion.div
            key={batch.id}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"
          >
            <div
              className="p-4 cursor-pointer"
              onClick={() => setExpandedBatch(expandedBatch === batch.id ? null : batch.id)}
            >
              <div className="flex justify-between items-start">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded-lg text-xs font-mono">
                      {batch.batch_no}
                    </span>
                  </div>
                  <p className="text-sm text-gray-900">
                    {batch.product ?
                      `${batch.product.product_name}-${batch.product.weight}g-${batch.product.color}` :
                      '未知产品'}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium text-gray-900">{batch.rolls}匹/件</span>
                  {expandedBatch === batch.id ? (
                    <ChevronUp className="w-5 h-5 text-gray-400" />
                  ) : (
                    <ChevronDown className="w-5 h-5 text-gray-400" />
                  )}
                </div>
              </div>
            </div>

            <AnimatePresence>
              {expandedBatch === batch.id && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: 'auto', opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="px-4 pb-4 border-t border-gray-100 bg-gray-50"
                >
                  <div className="pt-3 space-y-2">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <p className="text-xs text-gray-500 mb-1">匹/件数</p>
                        <p className="text-sm text-gray-700 font-medium">{batch.rolls}匹/件</p>
                      </div>
                      <div>
                        <p className="text-xs text-gray-500 mb-1">米数</p>
                        <p className="text-sm text-gray-700 font-medium">{batch.meters}m</p>
                      </div>
                    </div>
                    <div>
                      <p className="text-xs text-gray-500 mb-1">备注</p>
                      <p className="text-sm text-gray-700">{batch.notes || '-'}</p>
                    </div>
                    <div>
                      <p className="text-xs text-gray-500 mb-1">入库时间</p>
                      <p className="text-sm text-gray-700">{formatDateTime(batch.created_at)}</p>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        ))}
      </div>
    );
  }

  // 桌面端表格
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
      <table className="w-full">
        <thead className="bg-gray-50 border-b border-gray-200">
          <tr>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">批号</th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">产品</th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">匹/件数</th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">米数</th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">备注</th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">入库时间</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {batches.map(batch => (
            <tr key={batch.id} className="hover:bg-gray-50 transition-colors">
              <td className="px-4 py-4">
                <span className="px-2 py-1 bg-blue-50 text-blue-700 rounded-lg text-sm font-mono">
                  {batch.batch_no}
                </span>
              </td>
              <td className="px-4 py-4 text-sm text-gray-900">
                {batch.product ?
                  `${batch.product.product_name}-${batch.product.weight}g-${batch.product.color}` :
                  '未知产品'}
              </td>
              <td className="px-4 py-4 text-sm text-gray-600">{batch.rolls}匹/件</td>
              <td className="px-4 py-4 text-sm text-gray-600">{batch.meters}m</td>
              <td className="px-4 py-4 text-sm text-gray-500">{batch.notes || '-'}</td>
              <td className="px-4 py-4 text-sm text-gray-500">
                {formatDateTime(batch.created_at)}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
