import React, { useState, useEffect } from 'react';
import { 
  LayoutDashboard, Truck, Droplets, Wrench, FileText, 
  Bell, CheckCircle, XCircle, AlertTriangle, Users, 
  MapPin, LogOut, Menu, Upload, Camera, Calendar
} from 'lucide-react';
import { 
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LineChart, Line, PieChart, Pie, Cell 
} from 'recharts';

// --- MOCK DATA & CONFIG ---
const THEME = {
  bg: "bg-slate-50",
  sidebar: "bg-white",
  primary: "bg-indigo-500",
  pastelBlue: "bg-blue-50 text-blue-700 border-blue-200",
  pastelGreen: "bg-emerald-50 text-emerald-700 border-emerald-200",
  pastelRed: "bg-rose-50 text-rose-700 border-rose-200",
  pastelOrange: "bg-amber-50 text-amber-700 border-amber-200",
};

const DUMMY_UNITS = [
  { id: 'DT-01', model: 'Dump Truck', lastHM: 5000, status: 'Ready' },
  { id: 'DT-02', model: 'Dump Truck', lastHM: 5200, status: 'Breakdown' },
  { id: 'EX-01', model: 'Excavator', lastHM: 8000, status: 'Ready' },
];

const DUMMY_SITES = ["Site A - Tambang Utama", "Site B - Port", "Site C - Disposal"];

// --- COMPONENTS ---

const Dashboard = () => {
  const dataPerformance = [
    { name: 'Op. Andi', siklusLalu: 40, siklusIni: 24 },
    { name: 'Op. Budi', siklusLalu: 30, siklusIni: 13 },
    { name: 'Op. Citra', siklusLalu: 20, siklusIni: 58 },
  ];

  const dataFuel = [
    { name: 'H1', ratio: 12 }, { name: 'H2', ratio: 14 }, { name: 'H3', ratio: 11 },
    { name: 'H4', ratio: 18 }, { name: 'H5', ratio: 12 }, { name: 'H6', ratio: 13 },
  ];

  const dataStatus = [
    { name: 'Ready', value: 85 },
    { name: 'Breakdown', value: 15 },
  ];
  const COLORS = ['#10B981', '#F43F5E'];

  return (
    <div className="space-y-6 animate-fade-in">
      <h2 className="text-2xl font-bold text-slate-800 font-poppins">Dashboard Eksekutif</h2>
      
      {/* Stat Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className={`p-6 rounded-2xl shadow-sm border ${THEME.pastelBlue}`}>
          <div className="text-sm font-medium opacity-70">Total HM Bulan Ini</div>
          <div className="text-3xl font-bold mt-2">1,240 Jam</div>
        </div>
        <div className={`p-6 rounded-2xl shadow-sm border ${THEME.pastelGreen}`}>
          <div className="text-sm font-medium opacity-70">Unit Ready</div>
          <div className="text-3xl font-bold mt-2">85%</div>
        </div>
        <div className={`p-6 rounded-2xl shadow-sm border ${THEME.pastelOrange}`}>
          <div className="text-sm font-medium opacity-70">Pending Approval</div>
          <div className="text-3xl font-bold mt-2">12 Data</div>
        </div>
        <div className={`p-6 rounded-2xl shadow-sm border ${THEME.pastelRed}`}>
          <div className="text-sm font-medium opacity-70">Unit Breakdown</div>
          <div className="text-3xl font-bold mt-2">3 Unit</div>
        </div>
      </div>

      {/* Charts Row 1 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
          <h3 className="font-semibold mb-4 text-slate-700">Kinerja Operator (Jam Kerja)</h3>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={dataPerformance}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="name" axisLine={false} tickLine={false} />
                <YAxis axisLine={false} tickLine={false} />
                <Tooltip cursor={{fill: '#f1f5f9'}} />
                <Legend />
                <Bar dataKey="siklusLalu" fill="#cbd5e1" name="Siklus Lalu" radius={[4, 4, 0, 0]} />
                <Bar dataKey="siklusIni" fill="#6366f1" name="Siklus Ini" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
          <h3 className="font-semibold mb-4 text-slate-700">Ketersediaan Unit (PA)</h3>
          <div className="h-64 flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={dataStatus}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {dataStatus.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* Service Warning Widget */}
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
        <h3 className="font-semibold mb-4 text-slate-700 flex items-center">
          <AlertTriangle size={18} className="text-amber-500 mr-2" />
          Peringatan Servis (Predictive)
        </h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm text-left">
            <thead className="text-xs text-slate-500 uppercase bg-slate-50">
              <tr>
                <th className="px-4 py-3">Unit</th>
                <th className="px-4 py-3">HM Saat Ini</th>
                <th className="px-4 py-3">Jadwal Servis</th>
                <th className="px-4 py-3">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b">
                <td className="px-4 py-3 font-medium">DT-05</td>
                <td className="px-4 py-3">4,980</td>
                <td className="px-4 py-3">5,000</td>
                <td className="px-4 py-3"><span className="bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs">Due Soon</span></td>
              </tr>
              <tr className="border-b">
                <td className="px-4 py-3 font-medium">EX-02</td>
                <td className="px-4 py-3">12,050</td>
                <td className="px-4 py-3">12,000</td>
                <td className="px-4 py-3"><span className="bg-rose-100 text-rose-800 px-2 py-1 rounded-full text-xs font-bold">OVERDUE</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

const InputOperational = () => {
  const [formData, setFormData] = useState({
    date: new Date().toISOString().split('T')[0],
    unit: '',
    hmStart: '',
    hmStop: '',
    ritase: 0,
    site: DUMMY_SITES[0],
    spl: false
  });
  const [error, setError] = useState(null);
  const [success, setSuccess] = useState(false);
  
  // Simulated Last HM lookup
  const lastHM = 5000; 

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
    setError(null);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const start = parseFloat(formData.hmStart);
    const stop = parseFloat(formData.hmStop);

    // LOGIC VALIDASI CERDAS
    if (stop <= start) {
      setError("Error: HM Stop tidak boleh lebih kecil atau sama dengan HM Start.");
      return;
    }
    if (start < lastHM) {
      setError(`Error: HM Start (${start}) lebih kecil dari HM Terakhir unit ini (${lastHM}). Manipulasi data terdeteksi.`);
      return;
    }

    setSuccess(true);
    setTimeout(() => setSuccess(false), 3000);
  };

  return (
    <div className="max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-sm border border-slate-100 font-poppins">
      <h2 className="text-xl font-bold text-slate-800 mb-6 flex items-center">
        <FileText className="mr-2 text-indigo-500" /> Input Operasional Harian
      </h2>

      {error && (
        <div className="mb-4 p-4 bg-rose-50 text-rose-700 rounded-lg border border-rose-200 flex items-center text-sm">
          <XCircle size={18} className="mr-2" /> {error}
        </div>
      )}

      {success && (
        <div className="mb-4 p-4 bg-emerald-50 text-emerald-700 rounded-lg border border-emerald-200 flex items-center text-sm">
          <CheckCircle size={18} className="mr-2" /> Data berhasil disimpan (Status: Pending Approval)
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Tanggal</label>
            <input 
              type="date" 
              name="date"
              value={formData.date} 
              onChange={handleChange}
              className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Shift</label>
            <select className="w-full p-2 border border-slate-200 rounded-lg outline-none">
              <option>Shift 1 (Siang)</option>
              <option>Shift 2 (Malam)</option>
            </select>
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Lokasi Site</label>
          <select 
            name="site"
            value={formData.site}
            onChange={handleChange}
            className="w-full p-2 border border-slate-200 rounded-lg outline-none"
          >
            {DUMMY_SITES.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Unit</label>
          <select 
            name="unit" 
            onChange={handleChange}
            className="w-full p-2 border border-slate-200 rounded-lg outline-none"
          >
            <option value="">Pilih Unit...</option>
            {DUMMY_UNITS.map(u => <option key={u.id} value={u.id}>{u.id} - {u.model}</option>)}
          </select>
          <p className="text-xs text-slate-400 mt-1">HM Terakhir Tercatat: {lastHM}</p>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">HM Start</label>
            <input 
              type="number" 
              name="hmStart"
              value={formData.hmStart}
              onChange={handleChange}
              placeholder="Contoh: 5000"
              className="w-full p-2 border border-slate-200 rounded-lg outline-none" 
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">HM Stop</label>
            <input 
              type="number" 
              name="hmStop"
              value={formData.hmStop}
              onChange={handleChange}
              placeholder="Contoh: 5010"
              className="w-full p-2 border border-slate-200 rounded-lg outline-none" 
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Total Ritase (Optional)</label>
          <input 
            type="number" 
            name="ritase"
            value={formData.ritase}
            onChange={handleChange}
            className="w-full p-2 border border-slate-200 rounded-lg outline-none" 
          />
        </div>

        <div className="p-4 bg-slate-50 rounded-lg border border-dashed border-slate-300">
          <label className="block text-sm font-medium text-slate-700 mb-2">Bukti Foto HM (Wajib)</label>
          <div className="flex items-center space-x-4">
            <button type="button" className="flex items-center px-4 py-2 bg-white border border-slate-300 rounded-lg text-sm text-slate-600 hover:bg-slate-50">
              <Camera size={16} className="mr-2" /> Foto HM Start
            </button>
            <button type="button" className="flex items-center px-4 py-2 bg-white border border-slate-300 rounded-lg text-sm text-slate-600 hover:bg-slate-50">
              <Camera size={16} className="mr-2" /> Foto HM Stop
            </button>
          </div>
        </div>

        <div className="flex items-center">
           <input 
            type="checkbox" 
            name="spl"
            checked={formData.spl}
            onChange={handleChange}
            className="w-4 h-4 text-indigo-600 rounded"
          />
          <label className="ml-2 text-sm text-slate-700">Ada Surat Perintah Lembur (SPL)?</label>
        </div>

        <button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-xl shadow-lg shadow-indigo-200 transition-all">
          Simpan Data
        </button>
      </form>
    </div>
  );
};

const ApprovalFlow = () => {
  const [data, setData] = useState([
    { id: 1, date: '2023-10-25', unit: 'DT-01', operator: 'Budi', hmTotal: 8, status: 'Pending' },
    { id: 2, date: '2023-10-25', unit: 'EX-04', operator: 'Sari', hmTotal: 10, status: 'Pending' },
    { id: 3, date: '2023-10-24', unit: 'DT-02', operator: 'Anto', hmTotal: 12, status: 'Approved' },
  ]);

  const handleAction = (id, newStatus) => {
    setData(prev => prev.map(item => item.id === id ? { ...item, status: newStatus } : item));
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
      <div className="p-6 border-b border-slate-100 flex justify-between items-center">
        <h2 className="text-lg font-bold text-slate-800">Workflow Approval</h2>
        <span className="bg-amber-100 text-amber-800 text-xs px-2 py-1 rounded-full font-medium">2 Pending</span>
      </div>
      <table className="w-full text-sm text-left">
        <thead className="text-xs text-slate-500 uppercase bg-slate-50">
          <tr>
            <th className="px-6 py-3">Tanggal</th>
            <th className="px-6 py-3">Operator</th>
            <th className="px-6 py-3">Unit</th>
            <th className="px-6 py-3">Total Jam</th>
            <th className="px-6 py-3">Status</th>
            <th className="px-6 py-3 text-right">Aksi</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id} className="border-b hover:bg-slate-50">
              <td className="px-6 py-4">{item.date}</td>
              <td className="px-6 py-4 font-medium text-slate-900">{item.operator}</td>
              <td className="px-6 py-4">{item.unit}</td>
              <td className="px-6 py-4">{item.hmTotal} Jam</td>
              <td className="px-6 py-4">
                <span className={`px-2 py-1 rounded-full text-xs font-semibold
                  ${item.status === 'Pending' ? 'bg-amber-100 text-amber-700' : ''}
                  ${item.status === 'Approved' ? 'bg-emerald-100 text-emerald-700' : ''}
                  ${item.status === 'Rejected' ? 'bg-rose-100 text-rose-700' : ''}
                `}>
                  {item.status}
                </span>
              </td>
              <td className="px-6 py-4 text-right">
                {item.status === 'Pending' && (
                  <div className="flex justify-end space-x-2">
                    <button 
                      onClick={() => handleAction(item.id, 'Approved')}
                      className="p-1 bg-emerald-100 text-emerald-600 rounded hover:bg-emerald-200" title="Approve">
                      <CheckCircle size={18} />
                    </button>
                    <button 
                      onClick={() => handleAction(item.id, 'Rejected')}
                      className="p-1 bg-rose-100 text-rose-600 rounded hover:bg-rose-200" title="Reject">
                      <XCircle size={18} />
                    </button>
                  </div>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// --- MAIN LAYOUT ---

export default function OperationalApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const NavItem = ({ id, icon: Icon, label }) => (
    <button
      onClick={() => { setActiveTab(id); setIsMobileMenuOpen(false); }}
      className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all mb-1 font-medium text-sm
        ${activeTab === id ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200' : 'text-slate-500 hover:bg-slate-50 hover:text-indigo-600'}
      `}
    >
      <Icon size={20} />
      <span>{label}</span>
    </button>
  );

  return (
    <div className={`min-h-screen ${THEME.bg} font-poppins flex`}>
      {/* Sidebar */}
      <aside className={`fixed z-20 md:static w-64 h-full bg-white border-r border-slate-100 p-6 flex flex-col transition-transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
        <div className="flex items-center space-x-3 mb-10">
          <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-indigo-200">
            O
          </div>
          <div>
            <h1 className="font-bold text-slate-800 text-lg leading-tight">OpWeb<span className="text-indigo-600">App</span></h1>
            <p className="text-xs text-slate-400">Fleet Management</p>
          </div>
        </div>

        <nav className="flex-1">
          <NavItem id="dashboard" icon={LayoutDashboard} label="Dashboard" />
          <NavItem id="operational" icon={FileText} label="Input Operasional" />
          <NavItem id="approval" icon={CheckCircle} label="Workflow Approval" />
          <NavItem id="fuel" icon={Droplets} label="Bahan Bakar" />
          <NavItem id="maintenance" icon={Wrench} label="Maintenance" />
          <NavItem id="report" icon={FileText} label="Laporan" />
        </nav>

        <div className="mt-auto pt-6 border-t border-slate-100">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-xs font-bold text-slate-600">AD</div>
            <div>
              <p className="text-sm font-bold text-slate-700">Admin Site</p>
              <p className="text-xs text-slate-400">Head Office</p>
            </div>
          </div>
          <button className="flex items-center space-x-2 text-rose-500 text-sm font-medium hover:text-rose-700">
            <LogOut size={16} /> <span>Keluar</span>
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 overflow-y-auto h-screen">
        {/* Mobile Header */}
        <div className="md:hidden flex justify-between items-center mb-6">
          <div className="flex items-center space-x-2">
            <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold">O</div>
            <h1 className="font-bold text-slate-800">OpWebApp</h1>
          </div>
          <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
            <Menu className="text-slate-600" />
          </button>
        </div>

        {/* Dynamic Content */}
        <div className="max-w-6xl mx-auto">
          {activeTab === 'dashboard' && <Dashboard />}
          {activeTab === 'operational' && <InputOperational />}
          {activeTab === 'approval' && <ApprovalFlow />}
          {activeTab === 'fuel' && <div className="p-10 text-center text-slate-400">Modul Bahan Bakar (Mockup Placeholder)</div>}
          {activeTab === 'maintenance' && <div className="p-10 text-center text-slate-400">Modul Maintenance (Mockup Placeholder)</div>}
        </div>
      </main>
    </div>
  );
}