import React from 'react';
import { motion } from 'framer-motion';
import type { PlanCardDisplay } from '../types';

interface PlanCardProps {
  plan: PlanCardDisplay;
  onClick?: () => void;
}

const statusConfig: Record<string, { label: string; gradient: string }> = {
  pending: { label: '待确定', gradient: 'from-amber-400 to-orange-400' },
  producing: { label: '生产中', gradient: 'from-blue-400 to-indigo-400' },
  completed: { label: '已完成', gradient: 'from-green-400 to-emerald-400' }
};

export function PlanCard({ plan, onClick }: PlanCardProps) {
  const status = statusConfig[plan.status] || { label: plan.status, gradient: 'from-gray-400 to-gray-500' };

  const getElapsedDays = () => {
    if (!plan.startTime) return 0;
    const start = new Date(plan.startTime);
    const now = new Date();
    return Math.floor((now.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
  };

  const elapsedDays = getElapsedDays();

  const progressGradient = plan.status === 'completed' ? 'from-green-400 to-emerald-400' :
    plan.status === 'producing' ? 'from-blue-400 to-indigo-400' : 'from-amber-400 to-orange-400';

  return (
    <motion.div
      whileHover={{ scale: 1.03, y: -4 }}
      whileTap={{ scale: 0.97 }}
      onClick={onClick}
      className="bg-white/80 backdrop-blur rounded-xl border border-gray-200/80 p-4 cursor-pointer shadow-sm hover:shadow-lg transition-shadow"
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="text-base font-semibold text-gray-900">
          {plan.productName}-{plan.color}
        </h3>
        <span className={`px-2.5 py-1 text-xs font-medium rounded-lg bg-gradient-to-r ${status.gradient} text-white shadow-sm`}>
          {status.label}
        </span>
      </div>

      <p className="text-sm text-gray-600 mb-1">{plan.fabricCode}-{plan.colorCode}</p>
      <p className="text-xs text-gray-400 mb-3">计划编号: {plan.planCode}</p>

      <div className="space-y-2">
        <div className="flex items-center justify-between text-xs text-gray-500">
          <span>进度</span><span>{plan.progress}%</span>
        </div>
        <div className="h-2.5 bg-gray-100 rounded-full overflow-hidden">
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: `${plan.progress}%` }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className={`h-full rounded-full bg-gradient-to-r ${progressGradient}`}
          />
        </div>
        <div className="flex items-center justify-between text-xs text-gray-500">
          <span>已入库: {plan.completedQuantity}m</span>
          <span>计划: {plan.targetQuantity}m</span>
        </div>
      </div>

      {plan.startTime && (
        <div className="mt-3 pt-3 border-t border-gray-100">
          <p className="text-xs text-gray-400">开始时间: {new Date(plan.startTime).toLocaleDateString('zh-CN')}</p>
          <p className="text-xs text-gray-500 mt-0.5">已耗时: <span className="font-medium text-gray-700">{elapsedDays}</span> 天</p>
        </div>
      )}
    </motion.div>
  );
}