import React, { useState, useEffect, useMemo } from 'react';
import { Plus, Trash2, Calculator, ArrowRight, Zap, Wind, TrendingUp, DollarSign, Info, AlertTriangle, Clock, User, MapPin, Calendar } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';

// --- CONSTANTS & HELPERS ---

const HP_TO_KW = 0.7457;

const kwToHp = (kw: number) => parseFloat((kw / HP_TO_KW).toFixed(1));
const hpToKw = (hp: number) => parseFloat((hp * HP_TO_KW).toFixed(2));

// CẤU HÌNH GIÁ ĐIỆN SẢN XUẤT (Cập nhật mới nhất)
const ELECTRICITY_RATES = {
  voltageLevel1: { // Dưới 6 kV
    normal: 1896,
    offPeak: 1241,
    peak: 3474
  },
  voltageLevel2: { // 6kV - 22kV
    normal: 1812,
    offPeak: 1178,
    peak: 3348
  },
  voltageLevel3: { // 22kV - 110kV (Farm rất lớn)
    normal: 1749,
    offPeak: 1136,
    peak: 3242
  }
};

const calculateWeightedPrice = (rates: typeof ELECTRICITY_RATES.voltageLevel1) => {
  const peakHoursPerWeek = 5 * 6;
  const offPeakHoursPerWeek = 6 * 7;
  const normalHoursPerWeek = 168 - peakHoursPerWeek - offPeakHoursPerWeek;

  const totalCostPerWeek = (peakHoursPerWeek * rates.peak) + 
                           (offPeakHoursPerWeek * rates.offPeak) + 
                           (normalHoursPerWeek * rates.normal);
                           
  return totalCostPerWeek / 168;
};


// Dữ liệu ước tính cho máy Roots Blower (BS Series) và Bi Gốm
const MACHINE_DATA: Record<string, { baseFlow: number, baseKw: number }> = {
  'BS 65': { baseFlow: 2.7, baseKw: 2.2 }, // ~3HP
  'BS 80': { baseFlow: 5.2, baseKw: 4.0 }, // ~5.5HP
  'BS 100': { baseFlow: 8.5, baseKw: 7.5 }, // ~10HP
  'BS 125': { baseFlow: 14.5, baseKw: 11 }, // ~15HP
  'BS 150': { baseFlow: 22.0, baseKw: 15 }, // ~20HP
  'BS 200': { baseFlow: 40.0, baseKw: 30 }, // ~40HP
  'BS 250': { baseFlow: 60.0, baseKw: 45 }, // ~60HP
  'Vòng bi gốm': { baseFlow: 24.0, baseKw: 15 }, // ~20HP
};

const PRESSURE_OPTIONS = [20, 25, 30, 35];

// Thông số Dolic làm chuẩn so sánh
const DOLIC_SPECS: Record<number, Record<number, number>> = {
  15: { 
    20: 38,
    25: 36,
    30: 34,
    35: 30
  },
  18: {
    35: 26
  }
};

export default function DolicAnalyzer() {
  // --- STATE ---
  const [pressure, setPressure] = useState(30);
  const [voltageLevel, setVoltageLevel] = useState<keyof typeof ELECTRICITY_RATES>('voltageLevel1');
  
  // Customer Info State
  const [customerInfo, setCustomerInfo] = useState({
    name: '',
    address: '',
    date: new Date().toLocaleDateString('vi-VN')
  });

  const averageElectricityPrice = useMemo(() => {
    return calculateWeightedPrice(ELECTRICITY_RATES[voltageLevel]);
  }, [voltageLevel]);

  const [farmMachines, setFarmMachines] = useState([
    { id: 1, type: 'BS 150', quantity: 1, powerHP: 20, powerKw: 15 } 
  ]);
  const [activeTab, setActiveTab] = useState('input');

  // --- HANDLERS ---
  const handleCustomerChange = (field: string, value: string) => {
    setCustomerInfo(prev => ({ ...prev, [field]: value }));
  };

  const addMachine = () => {
    const newId = farmMachines.length > 0 ? Math.max(...farmMachines.map(m => m.id)) + 1 : 1;
    setFarmMachines([...farmMachines, { id: newId, type: 'BS 150', quantity: 1, powerHP: 20, powerKw: 15 }]);
  };

  const removeMachine = (id: number) => {
    setFarmMachines(farmMachines.filter(m => m.id !== id));
  };

  const updateMachine = (id: number, field: string, value: any) => {
    setFarmMachines(farmMachines.map(m => {
      if (m.id === id) {
        let updated = { ...m, [field]: value };
        
        if (field === 'type') {
          const baseKw = MACHINE_DATA[value].baseKw;
          updated.powerKw = baseKw;
          updated.powerHP = kwToHp(baseKw);
        } else if (field === 'powerHP') {
          updated.powerKw = hpToKw(value);
        }
        
        return updated;
      }
      return m;
    }));
  };

  // --- CALCULATIONS ---
  
  // 1. Tính toán hệ thống hiện tại
  const currentSystemStats = useMemo(() => {
    let totalKw = 0;
    let totalFlow = 0;

    farmMachines.forEach(m => {
      totalKw += Number(m.powerKw) * Number(m.quantity);
      
      let flowFactor = 1; 
      if (pressure === 20) flowFactor = 1.1;
      if (pressure === 25) flowFactor = 1.05;
      if (pressure === 35) flowFactor = 0.95;

      const baseFlow = MACHINE_DATA[m.type]?.baseFlow || 0;
      
      totalFlow += baseFlow * flowFactor * Number(m.quantity);
    });

    const efficiency = totalKw > 0 ? totalFlow / totalKw * 60 : 0; 

    return { totalKw, totalFlow, efficiency };
  }, [farmMachines, pressure]);

  // 2. Tính toán giải pháp Dolic 15kW thay thế
  const dolicSolution = useMemo(() => {
    const dolicFlowPerUnit = DOLIC_SPECS[15][pressure] || 34;
    const dolicPowerPerUnit = 15; // Dolic 15kW cố định

    const unitsNeeded = currentSystemStats.totalFlow / dolicFlowPerUnit;
    const totalDolicKw = unitsNeeded * dolicPowerPerUnit;
    
    // Tổng lưu lượng khí của hệ thống Dolic đề xuất (m3/phút)
    // = Số lượng máy * Lưu lượng mỗi máy
    const totalDolicFlow = unitsNeeded * dolicFlowPerUnit; 

    const dolicEfficiency = (dolicFlowPerUnit * 60) / dolicPowerPerUnit;

    const kwSavedPerHour = currentSystemStats.totalKw - totalDolicKw;
    
    const moneyLostPerHour = kwSavedPerHour * averageElectricityPrice;
    const moneyLostPerDay = moneyLostPerHour * 24;
    const moneyLostPerMonth = moneyLostPerDay * 30;
    const moneySavedPerYear = moneyLostPerDay * 270; 

    return {
      flowPerUnit: dolicFlowPerUnit,
      powerPerUnit: dolicPowerPerUnit,
      unitsNeeded,
      totalKw: totalDolicKw,
      totalFlow: totalDolicFlow, // Thêm trường này
      efficiency: dolicEfficiency,
      kwSavedPerHour,
      moneyLostPerDay,
      moneyLostPerMonth,
      moneySavedPerYear
    };
  }, [currentSystemStats, pressure, averageElectricityPrice]);

  // Chart Data
  const chartData = [
    {
      name: 'Hệ thống cũ',
      'Hiệu suất (m³ khí / 1 kWh điện)': parseFloat((currentSystemStats.totalFlow * 60 / currentSystemStats.totalKw).toFixed(1)),
      color: '#94a3b8' 
    },
    {
      name: 'Dolic 15kW',
      'Hiệu suất (m³ khí / 1 kWh điện)': parseFloat(dolicSolution.efficiency.toFixed(1)),
      color: '#0ea5e9' 
    }
  ];

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(value);
  };

  return (
    <div className="min-h-screen bg-slate-50 p-4 font-sans text-slate-800">
      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
        
        {/* Header */}
        <header className="bg-gradient-to-r from-blue-700 to-sky-500 p-6 text-white flex flex-col md:flex-row justify-between items-center gap-4">
          <div>
            <h1 className="text-2xl font-bold flex items-center gap-2">
              <Wind className="w-8 h-8" />
              DOLIC Performance Analyzer
            </h1>
            <p className="text-blue-100 text-sm mt-1">Công cụ so sánh hiệu năng máy nén khí cho trại nuôi</p>
          </div>
          <div className="flex flex-col items-end gap-1">
             <div className="bg-white/10 px-4 py-2 rounded-lg backdrop-blur-sm border border-white/20 text-right">
                <span className="text-xs text-blue-100 block uppercase tracking-wider">Phiên bản so sánh</span>
                <span className="font-bold">Dolic DL15 (15kW)</span>
             </div>
             <div className="text-xs text-blue-100 flex items-center gap-1 opacity-80">
                <Clock className="w-3 h-3" /> Giá điện tích hợp 3 khung giờ
             </div>
          </div>
        </header>

        {/* Tab Selection (Mobile friendly) */}
        <div className="flex border-b border-slate-200 md:hidden">
          <button 
            className={`flex-1 py-3 font-medium ${activeTab === 'input' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-slate-500'}`}
            onClick={() => setActiveTab('input')}
          >
            1. Nhập liệu Farm
          </button>
          <button 
            className={`flex-1 py-3 font-medium ${activeTab === 'result' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-slate-500'}`}
            onClick={() => setActiveTab('result')}
          >
            2. Kết quả & So sánh
          </button>
        </div>

        <div className="flex flex-col md:flex-row">
          
          {/* LEFT PANEL: INPUT */}
          <div className={`w-full md:w-5/12 p-6 bg-slate-50 border-r border-slate-200 ${activeTab === 'result' ? 'hidden md:block' : 'block'}`}>
            
            {/* Customer Info Section */}
            <div className="bg-blue-50 border border-blue-100 rounded-xl p-4 mb-6 shadow-sm">
              <h3 className="text-sm font-bold text-blue-800 uppercase tracking-wide mb-3 flex items-center gap-2">
                <User className="w-4 h-4" /> Thông tin khách hàng
              </h3>
              <div className="space-y-3">
                <div>
                  <label className="text-xs font-semibold text-slate-500 mb-1 block">Tên khách hàng / Farm</label>
                  <input 
                    type="text" 
                    placeholder="Nhập tên khách hàng..."
                    className="w-full p-2 text-sm border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white"
                    value={customerInfo.name}
                    onChange={(e) => handleCustomerChange('name', e.target.value)}
                  />
                </div>
                <div>
                  <label className="text-xs font-semibold text-slate-500 mb-1 block">Địa chỉ</label>
                  <div className="relative">
                    <MapPin className="w-4 h-4 text-slate-400 absolute left-2 top-2.5" />
                    <input 
                      type="text" 
                      placeholder="Nhập địa chỉ..."
                      className="w-full p-2 pl-8 text-sm border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white"
                      value={customerInfo.address}
                      onChange={(e) => handleCustomerChange('address', e.target.value)}
                    />
                  </div>
                </div>
                <div className="flex justify-between items-center pt-2 border-t border-blue-200 mt-2">
                   <div className="flex items-center gap-1 text-xs text-slate-500">
                     <Calendar className="w-3 h-3" /> Ngày phân tích:
                   </div>
                   <div className="text-sm font-bold text-blue-700 bg-white px-2 py-1 rounded border border-blue-100">
                     {customerInfo.date}
                   </div>
                </div>
              </div>
            </div>

            <h2 className="text-lg font-bold text-slate-700 mb-4 flex items-center gap-2">
              <Calculator className="w-5 h-5 text-blue-600" />
              Cấu hình Farm hiện tại
            </h2>

            {/* Global Settings */}
            <div className="mb-6 bg-white p-4 rounded-xl shadow-sm border border-slate-200 space-y-4">
              
              {/* Voltage Level Selection */}
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Cấp điện áp Farm</label>
                <select 
                  className="w-full p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium focus:ring-2 focus:ring-blue-500 outline-none"
                  value={voltageLevel}
                  onChange={(e) => setVoltageLevel(e.target.value as keyof typeof ELECTRICITY_RATES)}
                >
                  <option value="voltageLevel1">Dưới 6kV (Farm nhỏ/vừa)</option>
                  <option value="voltageLevel2">6kV - 22kV (Farm lớn)</option>
                  <option value="voltageLevel3">22kV - 110kV (Công ty lớn)</option>
                </select>
                <div className="mt-2 text-xs text-slate-500 flex justify-between px-1">
                   <span>TB: {formatCurrency(averageElectricityPrice).replace('₫', '')}/kWh</span>
                   <span className="text-green-600 font-medium">Đã tính tỷ lệ 3 khung giờ</span>
                </div>
              </div>

              {/* Pressure Selection */}
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Áp suất vận hành (kPa)</label>
                <div className="grid grid-cols-4 gap-2">
                  {PRESSURE_OPTIONS.map(p => (
                    <button
                      key={p}
                      onClick={() => setPressure(p)}
                      className={`py-2 rounded-lg text-sm font-bold transition-all ${
                        pressure === p 
                          ? 'bg-blue-600 text-white shadow-md shadow-blue-200' 
                          : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
                      }`}
                    >
                      {p}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Machines List */}
            <div className="space-y-3 mb-6">
              {farmMachines.map((machine, index) => (
                <div key={machine.id} className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 relative group transition-all hover:border-blue-300">
                  <div className="absolute -left-3 top-4 bg-slate-200 text-slate-500 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">
                    {index + 1}
                  </div>
                  <button 
                    onClick={() => removeMachine(machine.id)}
                    className="absolute top-2 right-2 text-slate-300 hover:text-red-500 transition-colors p-1"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>

                  <div className="grid grid-cols-1 gap-3">
                    <div>
                      <label className="text-xs font-bold text-slate-500 uppercase">Loại máy</label>
                      <select 
                        className="w-full mt-1 p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium focus:ring-2 focus:ring-blue-500 outline-none"
                        value={machine.type}
                        onChange={(e) => updateMachine(machine.id, 'type', e.target.value)}
                      >
                        {Object.keys(MACHINE_DATA).map(key => (
                          <option key={key} value={key}>{key}</option>
                        ))}
                      </select>
                    </div>
                    
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-xs font-bold text-slate-500 uppercase">Số lượng</label>
                        <input 
                          type="number" 
                          min="1"
                          className="w-full mt-1 p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none"
                          value={machine.quantity}
                          onChange={(e) => updateMachine(machine.id, 'quantity', parseInt(e.target.value) || 0)}
                        />
                      </div>
                      <div>
                        <label className="text-xs font-bold text-slate-500 uppercase flex justify-between">
                          CS (HP)
                          <Info className="w-3 h-3 text-slate-400" />
                        </label>
                        <input 
                          type="number" 
                          className="w-full mt-1 p-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-bold focus:ring-2 focus:ring-blue-500 outline-none"
                          value={machine.powerHP}
                          onChange={(e) => updateMachine(machine.id, 'powerHP', parseFloat(e.target.value) || 0)}
                        />
                        {/* Display converted kW */}
                        <div className="text-[10px] text-slate-400 text-right mt-1 font-medium">
                          ≈ {machine.powerKw} kW
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <button 
              onClick={addMachine}
              className="w-full py-3 border-2 border-dashed border-blue-200 rounded-xl text-blue-600 font-bold hover:bg-blue-50 hover:border-blue-400 transition-all flex items-center justify-center gap-2"
            >
              <Plus className="w-5 h-5" /> Thêm động cơ
            </button>

            {/* Total Summary Mini */}
            <div className="mt-8 bg-slate-800 text-white p-4 rounded-xl">
              <div className="flex justify-between items-center mb-2">
                <span className="text-slate-300 text-sm">Tổng điện tiêu thụ:</span>
                <span className="text-xl font-bold text-yellow-400">{currentSystemStats.totalKw.toFixed(1)} kW</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-slate-300 text-sm">Tổng khí (ước tính):</span>
                <span className="text-lg font-bold">{currentSystemStats.totalFlow.toFixed(1)} m³/phút</span>
              </div>
            </div>
            
            <button 
              className="md:hidden w-full mt-4 bg-blue-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-200"
              onClick={() => setActiveTab('result')}
            >
              Xem kết quả so sánh
            </button>
          </div>

          {/* RIGHT PANEL: ANALYSIS */}
          <div className={`w-full md:w-7/12 p-6 bg-white ${activeTab === 'input' ? 'hidden md:block' : 'block'}`}>
            
            {/* Header Report for Screenshot */}
            {customerInfo.name && (
              <div className="mb-6 p-4 bg-slate-50 border-l-4 border-blue-500 rounded-r-lg">
                <h2 className="text-xl font-bold text-slate-800 mb-1">Báo cáo hiệu quả năng lượng</h2>
                <div className="text-sm text-slate-600">
                  Khách hàng: <span className="font-semibold text-blue-700">{customerInfo.name}</span> 
                  {customerInfo.address && <span> - {customerInfo.address}</span>}
                </div>
              </div>
            )}

            <h2 className="text-lg font-bold text-slate-700 mb-6 flex items-center gap-2">
              <TrendingUp className="w-5 h-5 text-green-600" />
              Phân tích hiệu quả chuyển đổi
            </h2>

            {/* Main Stats Comparison */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
              {/* Current */}
              <div className="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Hiện trạng (Cũ)</div>
                <div className="flex items-end gap-2 mb-1">
                  <span className="text-3xl font-black text-slate-600">
                    {(currentSystemStats.totalFlow * 60 / currentSystemStats.totalKw || 0).toFixed(1)}
                  </span>
                  <span className="text-sm font-medium text-slate-500 mb-1">m³/kWh</span>
                </div>
                <div className="text-sm text-slate-500 mb-4">Hiệu suất sinh khí</div>
                
                <div className="pt-4 border-t border-slate-200 space-y-2">
                   <div className="flex justify-between text-sm">
                      <span className="text-slate-500">Tiêu thụ:</span>
                      <span className="font-bold text-slate-700">{currentSystemStats.totalKw.toFixed(1)} kWh</span>
                   </div>
                   <div className="flex justify-between text-sm">
                      <span className="text-slate-500">Tổng khí:</span>
                      <span className="font-bold text-slate-700">{currentSystemStats.totalFlow.toFixed(1)} m³/phút</span>
                   </div>
                </div>
              </div>

              {/* New Dolic */}
              <div className="p-4 rounded-2xl bg-blue-50 border border-blue-100 relative overflow-hidden">
                <div className="absolute top-0 right-0 bg-blue-600 text-white text-[10px] px-2 py-1 rounded-bl-lg font-bold">KHUYÊN DÙNG</div>
                <div className="text-xs font-bold text-blue-400 uppercase tracking-wider mb-2">Hệ thống Dolic 15kW</div>
                <div className="flex items-end gap-2 mb-1">
                  <span className="text-3xl font-black text-blue-600">
                    {dolicSolution.efficiency.toFixed(1)}
                  </span>
                  <span className="text-sm font-medium text-blue-500 mb-1">m³/kWh</span>
                </div>
                <div className="text-sm text-blue-500 font-medium mb-4">Hiệu suất sinh khí</div>
                
                 <div className="pt-4 border-t border-blue-200 space-y-2">
                   <div className="flex justify-between text-sm">
                      <span className="text-blue-500">Tiêu thụ:</span>
                      <span className="font-bold text-blue-700">
                        {dolicSolution.totalKw.toFixed(1)} kWh
                      </span>
                   </div>
                   <div className="flex justify-between text-sm">
                      <span className="text-blue-500">Tổng khí:</span>
                      <span className="font-bold text-blue-700">
                        {dolicSolution.totalFlow.toFixed(1)} m³/phút
                      </span>
                   </div>
                </div>
              </div>
            </div>

            {/* Money Calculation Detailed */}
            <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-6 border border-green-100 mb-8">
              <h3 className="text-green-800 font-bold flex items-center gap-2 mb-6">
                <DollarSign className="w-5 h-5" />
                Dự tính hiệu quả kinh tế
              </h3>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {/* 1. Mất oan mỗi ngày */}
                <div className="bg-white p-4 rounded-xl border border-red-100 shadow-sm relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-1 h-full bg-red-400"></div>
                  <div className="text-xs font-bold text-red-400 uppercase mb-1 flex items-center gap-1">
                    <AlertTriangle className="w-3 h-3" /> Tiền mất oan / Ngày
                  </div>
                  <div className="text-xl font-black text-slate-700">
                    {dolicSolution.moneyLostPerDay > 0 ? formatCurrency(dolicSolution.moneyLostPerDay) : '0 ₫'}
                  </div>
                  <div className="text-[10px] text-slate-400 mt-1">Lãng phí do dùng máy cũ</div>
                </div>

                {/* 2. Mất oan mỗi tháng */}
                <div className="bg-white p-4 rounded-xl border border-orange-100 shadow-sm relative overflow-hidden">
                  <div className="absolute top-0 left-0 w-1 h-full bg-orange-400"></div>
                  <div className="text-xs font-bold text-orange-400 uppercase mb-1 flex items-center gap-1">
                    <AlertTriangle className="w-3 h-3" /> Tiền mất oan / Tháng
                  </div>
                  <div className="text-xl font-black text-slate-700">
                    {dolicSolution.moneyLostPerMonth > 0 ? formatCurrency(dolicSolution.moneyLostPerMonth) : '0 ₫'}
                  </div>
                  <div className="text-[10px] text-slate-400 mt-1">Lãng phí tích lũy 30 ngày</div>
                </div>

                {/* 3. Tiết kiệm 1 năm - Hero Metric */}
                <div className="bg-green-600 p-4 rounded-xl shadow-lg shadow-green-200 relative overflow-hidden transform md:-translate-y-2">
                  <div className="text-xs font-bold text-green-100 uppercase mb-1 flex items-center gap-1">
                    <Zap className="w-3 h-3" /> Tiết kiệm được / 1 Năm
                  </div>
                  <div className="text-2xl font-black text-white">
                    {dolicSolution.moneySavedPerYear > 0 ? formatCurrency(dolicSolution.moneySavedPerYear) : '0 ₫'}
                  </div>
                  <div className="text-[10px] text-green-200 mt-1">Tính cho 3 vụ nuôi (270 ngày)</div>
                </div>
              </div>

              {/* Additional Context */}
              <div className="mt-6 flex flex-col md:flex-row gap-4 justify-between items-center text-sm border-t border-green-200 pt-4">
                <div className="flex gap-4 items-center">
                  <div>
                    <span className="text-green-700 block text-xs font-bold uppercase">Số máy Dolic cần đầu tư</span>
                    <span className="font-bold text-green-900 bg-white px-2 py-0.5 rounded border border-green-200">
                      {dolicSolution.unitsNeeded.toFixed(1)} máy
                    </span>
                  </div>
                  <div className="h-8 w-px bg-green-200"></div>
                  <div>
                     <span className="text-green-700 block text-xs font-bold uppercase">Giá điện TB (24/7)</span>
                     <span className="font-bold text-green-900">{formatCurrency(averageElectricityPrice)}/kWh</span>
                  </div>
                </div>
                {dolicSolution.moneySavedPerYear > 0 && (
                  <div className="text-right">
                    <span className="text-xs text-green-600 italic">
                      "Số tiền này đủ để anh mua thêm {(dolicSolution.moneySavedPerYear / 20000000).toFixed(0)} tấn thức ăn!"
                    </span>
                  </div>
                )}
              </div>
            </div>

            {/* Chart */}
            <div className="h-64 w-full mb-8">
               <h3 className="text-sm font-bold text-slate-500 mb-4 text-center">Biểu đồ so sánh lượng khí tạo ra từ 1 kWh điện</h3>
               <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={chartData} layout="vertical" margin={{ top: 5, right: 30, left: 40, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                    <XAxis type="number" hide />
                    <YAxis dataKey="name" type="category" width={100} tick={{fontSize: 12, fontWeight: 600}} />
                    <Tooltip cursor={{fill: 'transparent'}} />
                    <Bar dataKey="Hiệu suất (m³ khí / 1 kWh điện)" radius={[0, 4, 4, 0]} barSize={40}>
                      {chartData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Bar>
                  </BarChart>
               </ResponsiveContainer>
            </div>

            {/* Footer Note */}
            <div className="mt-6 flex items-start gap-2 bg-blue-50 p-3 rounded-lg text-xs text-blue-700">
              <Info className="w-4 h-4 mt-0.5 shrink-0" />
              <p>
                Kết quả tính toán dựa trên thông số kỹ thuật chuẩn của máy Dolic DL15 (34m³/min @ 30kPa) và dữ liệu trung bình của các dòng máy Roots/Bi gốm trên thị trường. Giá điện được tính theo giá trung bình của chu kỳ 24h (bao gồm Giờ Bình thường, Cao điểm và Thấp điểm) theo quy định EVN.
              </p>
            </div>

          </div>
        </div>
      </div>
    </div>
  );
}