import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// --- DUMMY DATA ---
const summaryData = {
  totalShipments: 1254,
  monthlyRevenue: 150000,
  monthlyExpenses: 35000,
};

const recentShipments = [
  { id: 'SH-8435', company: 'شركة الأجهزة الحديثة', client: 'شركة', status: 'قيد التوصيل' },
  { id: 'SH-8434', company: 'متجر الإلكترونيات', client: 'متجر', status: 'تم التسليم' },
  { id: 'SH-8433', company: 'مؤسسة المواد الغذائية', client: 'مؤسسة', status: 'تم التسليم' },
  { id: 'SH-8432', company: 'مصنع المنسوجات', client: 'مصنع', status: 'قيد التوصيل' },
  { id: 'SH-8431', company: 'مكتبة جرير', client: 'مكتبة', status: 'معلقة' },
];

const allShipments = [
    { id: 'SH-12345', client: 'شركة النور للتجارة', driver: 'أحمد محمود', date: '2024-07-21', status: 'تم التوصيل' },
    { id: 'SH-12346', client: 'مؤسسة الأمل الصناعية', driver: 'علي حسن', date: '2024-07-22', status: 'قيد التنفيذ' },
    { id: 'SH-12347', client: 'متجر الهدايا العصري', driver: 'خالد سعيد', date: '2024-07-22', status: 'قيد الانتظar' },
    { id: 'SH-12348', client: 'مكتبة الحكمة', driver: 'يوسف إبراهيم', date: '2024-07-23', status: 'تم الإلغاء' },
    { id: 'SH-12349', client: 'شركة الأجهزة الحديثة', driver: 'محمد عبدالله', date: '2024-07-24', status: 'قيد التنفيذ' },
    { id: 'SH-12350', client: 'مصنع الأثاث الراقي', driver: 'أحمد محمود', date: '2024-07-25', status: 'تم التوصيل' },
    { id: 'SH-12351', client: 'مؤسسة النسيج الذهبي', driver: 'علي حسن', date: '2024-07-26', status: 'قيد الانتظار' },
    { id: 'SH-12352', client: 'معرض السيارات الفاخرة', driver: 'خالد سعيد', date: '2024-07-27', status: 'قيد التنفيذ' },
];

// --- HELPER FUNCTIONS ---
const formatCurrency = (amount) => {
    return new Intl.NumberFormat('ar-SA', { style: 'currency', currency: 'SAR', minimumFractionDigits: 0, maximumFractionDigits:0 }).format(amount).replace('ر.س.', 'ريال');
};

const getStatusBadge = (status) => {
    switch (status) {
        case 'تم التسليم': return 'bg-green-100 text-green-800';
        case 'قيد التوصيل':
        case 'قيد التنفيذ': return 'bg-orange-100 text-orange-800';
        case 'قيد الانتظار':
        case 'معلقة': return 'bg-yellow-100 text-yellow-800';
        case 'تم الإلغاء': return 'bg-red-100 text-red-800';
        default: return 'bg-gray-100 text-gray-800';
    }
};


// --- ICONS ---
const HomeIcon = ({className}) => <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>;
const TruckIcon = ({className}) => <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 17H6v-6h11v6h-2M6 11V3h11v8" /></svg>;
const UserGroupIcon = ({className}) => <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.28-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.28.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>;
const CurrencyDollarIcon = ({className}) => <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v.01M12 6v-1h4a1 1 0 011 1v10a1 1 0 01-1 1h-4v-1m-4-1v1H7a1 1 0 01-1-1V7a1 1 0 011-1h3v1zm0 0V6m0 0h.01" /></svg>;
const TrashIcon = () => <svg className="h-5 w-5 text-gray-500 hover:text-red-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>;
const PencilIcon = () => <svg className="h-5 w-5 text-gray-500 hover:text-blue-600 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.5L15.232 5.232z" /></svg>;

// --- COMPONENTS ---

const Sidebar = ({ activeView, setActiveView }) => {
    const navItems = [
        { id: 'dashboard', name: 'الرئيسية', icon: HomeIcon },
        { id: 'shipments', name: 'الشحنات', icon: TruckIcon },
        { id: 'accounts', name: 'الحسابات', icon: CurrencyDollarIcon },
        { id: 'clients', name: 'العملاء', icon: UserGroupIcon },
    ];

    return (
        <aside className="w-64 bg-blue-800 text-white flex flex-col">
            <div className="p-6 text-center border-b border-blue-700">
                <h1 className="text-2xl font-bold font-display flex items-center justify-center gap-2">
                    <TruckIcon className="w-8 h-8"/>
                    <span>نقـــل</span>
                </h1>
            </div>
            <nav className="flex-1 p-4">
                <ul>
                    {navItems.map(item => (
                        <li key={item.id}>
                            <button
                                type="button"
                                onClick={() => setActiveView(item.id)}
                                className={`w-full flex items-center gap-4 px-4 py-3 rounded-lg transition-colors duration-200 ${
                                    activeView === item.id ? 'bg-blue-700 text-white font-semibold' : 'text-blue-200 hover:bg-blue-700 hover:text-white'
                                }`}
                            >
                                <item.icon className="h-5 w-5" />
                                <span>{item.name}</span>
                            </button>
                        </li>
                    ))}
                </ul>
            </nav>
        </aside>
    );
};

const Dashboard = () => {
    const StatCard = ({ title, value, color, isCurrency = false }) => (
        <div className="bg-white p-6 rounded-lg shadow-md flex-1">
            <h3 className="text-gray-500 text-md font-semibold">{title}</h3>
            <p className={`text-4xl font-bold mt-2 ${color}`}>
                {isCurrency ? formatCurrency(value) : value.toLocaleString('ar-EG')}
            </p>
        </div>
    );

    return (
        <div className="p-8">
            <header>
                <h1 className="text-3xl font-bold text-gray-800">لوحة التحكم الرئيسية</h1>
                <p className="text-gray-500 mt-1">مرحباً بك، إليك ملخص نشاطك اليوم.</p>
            </header>
            <div className="mt-8 flex gap-6">
                <StatCard title="إجمالي الشحنات" value={summaryData.totalShipments} color="text-blue-600" />
                <StatCard title="الإيرادات الشهرية" value={summaryData.monthlyRevenue} color="text-green-600" isCurrency />
                <StatCard title="المصروفات الشهرية" value={summaryData.monthlyExpenses} color="text-red-600" isCurrency />
            </div>
            <div className="mt-10 bg-white p-6 rounded-lg shadow-md">
                <h2 className="text-xl font-bold text-gray-800">أحدث الشحنات</h2>
                <table className="w-full mt-4 text-right">
                    <thead>
                        <tr className="border-b text-gray-500">
                            <th className="p-3 font-semibold">رقم الشحنة</th>
                            <th className="p-3 font-semibold">العميل</th>
                            <th className="p-3 font-semibold">الشركة</th>
                            <th className="p-3 font-semibold">الحالة</th>
                        </tr>
                    </thead>
                    <tbody>
                        {recentShipments.map((shipment, index) => (
                            <tr key={index} className="border-b last:border-0 hover:bg-gray-50">
                                <td className="p-4">{shipment.id}</td>
                                <td className="p-4 font-semibold">{shipment.company}</td>
                                <td className="p-4">{shipment.client}</td>
                                <td className="p-4">
                                    <span className={`px-3 py-1 text-sm font-semibold rounded-full ${getStatusBadge(shipment.status)}`}>
                                        {shipment.status}
                                    </span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
};

const ShipmentsTable = ({ onAddShipment }) => {
    return (
        <div className="p-8">
             <header className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-bold text-gray-800">إدارة الشحنات</h1>
                    <p className="text-gray-500 mt-1">عرض وتعديل جميع الشحنات في مكان واحد.</p>
                </div>
                <button onClick={onAddShipment} className="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                    إضافة شحنة جديدة
                </button>
            </header>
            <div className="mt-8 bg-white rounded-lg shadow-md overflow-hidden">
                 <table className="w-full text-right">
                    <thead className="bg-gray-50">
                        <tr className="border-b text-gray-600">
                            <th className="p-4 font-semibold">رقم الشحنة</th>
                            <th className="p-4 font-semibold">العميل</th>
                            <th className="p-4 font-semibold">السائق</th>
                            <th className="p-4 font-semibold">التاريخ</th>
                            <th className="p-4 font-semibold">الحالة</th>
                            <th className="p-4 font-semibold">إجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                         {allShipments.map((shipment, index) => (
                            <tr key={index} className="border-b last:border-0 hover:bg-gray-50">
                                <td className="p-4">{shipment.id}</td>
                                <td className="p-4 font-semibold">{shipment.client}</td>
                                <td className="p-4">{shipment.driver}</td>
                                <td className="p-4 text-gray-600">{shipment.date}</td>
                                <td className="p-4">
                                    <span className={`px-3 py-1 text-sm font-semibold rounded-full ${getStatusBadge(shipment.status)}`}>
                                        {shipment.status}
                                    </span>
                                </td>
                                <td className="p-4">
                                    <div className="flex gap-4">
                                        <button aria-label="تعديل"><PencilIcon/></button>
                                        <button aria-label="حذف"><TrashIcon/></button>
                                    </div>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
};

const AddShipmentModal = ({ onClose }) => {
    const InputField = ({ label, placeholder, type = 'text' }) => (
        <div className="mb-4">
            <label className="block text-gray-700 text-sm font-bold mb-2">{label}</label>
            <input type={type} placeholder={placeholder} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>
    );

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity">
            <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl p-8 m-4 animate-fade-in-down">
                <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">إضافة شحنة جديدة</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8">
                    <div>
                        <h3 className="text-lg font-semibold mb-3 border-b pb-2">بيانات المرسل</h3>
                        <InputField label="الاسم" placeholder="ادخل اسم المرسل" />
                        <InputField label="رقم الهاتف" placeholder="ادخل رقم الهاتف" type="tel" />
                        <InputField label="العنوان" placeholder="ادخل عنوان المرسل بالتفصيل" />
                    </div>
                    <div>
                        <h3 className="text-lg font-semibold mb-3 border-b pb-2">بيانات المستلم</h3>
                        <InputField label="الاسم" placeholder="ادخل اسم المستلم" />
                        <InputField label="رقم الهاتف" placeholder="ادخل رقم الهاتف" type="tel" />
                        <InputField label="العنوان" placeholder="ادخل عنوان المستلم بالتفصيل" />
                    </div>
                </div>

                <div className="mt-6">
                    <h3 className="text-lg font-semibold mb-3 border-b pb-2">تفاصيل الشحنة</h3>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-x-6">
                        <div className="col-span-3 md:col-span-1">
                            <InputField label="الوصف" placeholder="وصف موجز لمحتويات الشحنة" />
                        </div>
                        <div className="col-span-3 md:col-span-1">
                             <InputField label="الوزن (كجم)" placeholder="مثال: 5" />
                        </div>
                        <div className="col-span-3 md:col-span-1">
                             <InputField label="التكلفة (ر.س)" placeholder="مثال: 50.00" />
                        </div>
                    </div>
                </div>

                <div className="mt-8 flex justify-center gap-4">
                    <button onClick={onClose} className="bg-blue-600 text-white px-8 py-2 rounded-lg font-semibold hover:bg-blue-700 transition-colors">إضافة الشحنة</button>
                    <button onClick={onClose} className="bg-gray-200 text-gray-700 px-8 py-2 rounded-lg font-semibold hover:bg-gray-300 transition-colors">إلغاء</button>
                </div>
            </div>
        </div>
    );
};

function App() {
  const [activeView, setActiveView] = useState('dashboard');
  const [isModalOpen, setIsModalOpen] = useState(false);

  const renderView = () => {
    switch (activeView) {
      case 'shipments':
        return <ShipmentsTable onAddShipment={() => setIsModalOpen(true)} />;
      case 'accounts':
        return <div className="p-8"><h1 className="text-3xl font-bold">إدارة الحسابات</h1></div>;
      case 'clients':
        return <div className="p-8"><h1 className="text-3xl font-bold">العملاء</h1></div>;
      case 'dashboard':
      default:
        return <Dashboard />;
    }
  };

  return (
    <div className="flex h-screen bg-gray-100 font-sans">
      <Sidebar activeView={activeView} setActiveView={setActiveView} />
      <main className="flex-1 overflow-y-auto">
        {renderView()}
      </main>
      {isModalOpen && <AddShipmentModal onClose={() => setIsModalOpen(false)} />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);