import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Legend, Cell } from 'recharts';
import { StatCard } from '../ui/StatCard';
import { Activity, Target, TrendingUp, Zap, Clock, Radio, AlertCircle } from 'lucide-react';

const stationData = [
  { name: '嘉兴嘉燃', 消耗: 420, 剩余: 580, 上限: 1000 },
  { name: '嘉兴嘉锦', 消耗: 380, 剩余: 420, 上限: 800 },
  { name: '如皋华神', 消耗: 160, 剩余: 340, 上限: 500 },
  { name: '花桥中石油', 消耗: 80, 剩余: 220, 上限: 300 },
  { name: '常熟嘉化', 消耗: 45, 剩余: 155, 上限: 200 }
];

const stationGrowth = [
  { date: '4/18', 嘉燃: 10, 嘉锦: 3, 其他: 0 },
  { date: '4/19', 嘉燃: 6, 嘉锦: 3, 其他: 0 },
  { date: '4/20', 嘉燃: 7, 嘉锦: 0, 其他: 0 },
  { date: '4/21', 嘉燃: 5, 嘉锦: 3, 其他: 0 },
  { date: '4/22', 嘉燃: 7, 嘉锦: 3, 其他: 1 },
  { date: '4/23', 嘉燃: 7, 嘉锦: 15, 其他: 7 },
  { date: '4/24', 嘉燃: 9, 嘉锦: 14, 其他: 6 },
  { date: '4/25', 嘉燃: 6, 嘉锦: 12, 其他: 4 },
  { date: '4/26', 嘉燃: 6, 嘉锦: 13, 其他: 3 },
  { date: '4/27', 嘉燃: 6, 嘉锦: 13, 其他: 3 },
  { date: '4/28', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
  { date: '4/29', 嘉燃: 7, 嘉锦: 13, 其他: 2 },
];

export function EfficiencyView() {
  return (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-100 rounded-xl p-5 flex items-start shadow-sm">
        <div className="bg-indigo-100/80 p-2 rounded-lg mr-4 shrink-0">
          <Radio className="w-5 h-5 text-indigo-600" />
        </div>
        <div>
          <h4 className="text-sm font-bold text-indigo-900 flex items-center">
            二期底层物联网 (IoT) 直连规划中
            <span className="ml-3 px-2 py-0.5 rounded text-[10px] bg-indigo-200 text-indigo-800 font-bold tracking-wider">PHASE 2</span>
          </h4>
          <p className="text-sm text-indigo-700 mt-1.5 leading-relaxed">
            目前系统已全面掌握<span className="font-semibold text-indigo-900 border-b border-indigo-200">「商流与信息流」</span>（在线预约单量与排班）。当前板块基于历史单量测算，呈现<b>算法预估负荷模型演示</b>。下阶段将重点打通<span className="font-semibold text-indigo-900 border-b border-indigo-200">「物理数据流」</span>，与加气机等底层硬件直连获取真实库存，彻底实现“数字孪生式”的加氢调配闭环。
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <StatCard 
          title="全网综合日均加注量预估" 
          value="1,085 kg" 
          subValue="主要覆盖嘉兴、南通等核心枢纽网的测算值"
          icon={Activity} 
          highlight
        />
        <StatCard 
          title="全网各站总负荷上限满载" 
          value="2,800 kg" 
          subValue="所有加注站理论最高吞吐物理上限汇总"
          icon={Zap} 
        />
        <StatCard 
          title="系统优化全站有效工时" 
          value="~4.5 小时" 
          subValue="主要由预约时限测算出的无效排队节省时间"
          icon={Clock} 
          trend={-45}
        />
        <StatCard 
          title="平均承载饱和度 (预估)" 
          value="38.5 %" 
          subValue="预留了充足的峰值缓冲池与调配拓展空间"
          icon={Target} 
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm">
          <div className="flex justify-between items-center mb-6">
            <div>
              <h3 className="text-lg font-bold text-slate-800">主力站点日增单量趋势实况</h3>
              <p className="text-sm text-slate-500 mt-1">此部分属于已打通的一期“信息流”真实数据展示</p>
            </div>
            <div className="flex bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg text-sm font-semibold items-center border border-indigo-100">
              <TrendingUp className="w-4 h-4 mr-1.5" />
              全线看涨
            </div>
          </div>
          <div className="h-[300px] w-full">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={stationGrowth} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
                <defs>
                  <linearGradient id="colorJr" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#0ea5e9" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#0ea5e9" stopOpacity={0}/>
                  </linearGradient>
                  <linearGradient id="colorJj" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} dy={10} />
                <YAxis axisLine={false} tickLine={false} tick={{fill: '#64748b', fontSize: 12}} />
                <CartesianGrid vertical={false} stroke="#f1f5f9" strokeDasharray="4 4" />
                <Tooltip cursor={{stroke: '#cbd5e1', strokeWidth: 1, strokeDasharray: '4 4'}} contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' }} />
                <Legend verticalAlign="top" height={36} iconType="circle" wrapperStyle={{ fontSize: '12px' }} />
                <Area type="monotone" dataKey="嘉燃" stackId="1" stroke="#0ea5e9" strokeWidth={2} fillOpacity={1} fill="url(#colorJr)" />
                <Area type="monotone" dataKey="嘉锦" stackId="1" stroke="#8b5cf6" strokeWidth={2} fillOpacity={1} fill="url(#colorJj)" />
                <Area type="monotone" dataKey="其他" stackId="1" stroke="#f59e0b" strokeWidth={2} fillOpacity={0.1} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-100 p-6 shadow-sm flex flex-col justify-between relative overflow-hidden">
          <div className="absolute top-0 right-0 p-6 opacity-5 pointer-events-none">
            <Zap className="w-32 h-32" />
          </div>
          <div className="mb-6 relative z-10">
            <div className="flex flex-col xl:flex-row xl:justify-between xl:items-start gap-3">
              <div>
                <h3 className="text-lg font-bold text-slate-800">各站负荷吞吐预估模型 (kg)</h3>
                <p className="text-sm text-slate-500 mt-1">数据按历史预约进行算法推演，演示智能匹配效果</p>
              </div>
              <span className="flex items-center text-[10px] lg:text-xs font-bold bg-amber-50 text-amber-600 px-2 py-1 rounded-md border border-amber-200 w-fit shrink-0">
                <AlertCircle className="w-3 h-3 mr-1.5" />
                IoT硬件直连筹备中
              </span>
            </div>
          </div>
          <div className="flex-1 min-h-[300px] relative z-10">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={stationData} layout="vertical" margin={{ top: 0, right: 30, left: 20, bottom: 0 }}>
                <XAxis type="number" hide />
                <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} tick={{fill: '#475569', fontSize: 12, fontWeight: 500}} width={80} />
                <Tooltip cursor={{fill: '#f8fafc'}} contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.05)' }}/>
                <Legend verticalAlign="top" height={36} iconType="circle" wrapperStyle={{ fontSize: '12px' }} />
                <Bar dataKey="消耗" stackId="a" fill="#4f46e5" radius={[0, 0, 0, 0]} barSize={24} name="当前消耗测算负荷" />
                <Bar dataKey="剩余" stackId="a" fill="#e2e8f0" radius={[0, 4, 4, 0]} barSize={24} name="未饱和推演备用空间" />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    </div>
  );
}