import React, { useState } from 'react';
import { Calculator, Package, DollarSign, Truck, Plane, ArrowRight, ArrowLeft } from 'lucide-react';

// Main App Component
export default function ShippingCalculator() {
  // State for active tab
  const [activeTab, setActiveTab] = useState('sea'); // 'sea' or 'air'
  
  // Sea Shipping Calculator (CBM)
  const SeaShippingCalculator = () => {
    // State for dimensions and units
    const [dimensions, setDimensions] = useState({
      length: '',
      width: '',
      height: '',
      quantity: 1
    });
    const [unit, setUnit] = useState('cm');
    const [result, setResult] = useState(null);
    
    // Handle input changes
    const handleChange = (e) => {
      const { name, value } = e.target;
      setDimensions({
        ...dimensions,
        [name]: value
      });
    };
    
    // Calculate CBM and cost
    const calculateCBM = () => {
      // Validate inputs
      if (!dimensions.length || !dimensions.width || !dimensions.height) {
        alert('الرجاء إدخال جميع الأبعاد');
        return;
      }
      
      // Convert to meters if needed
      const conversionFactor = unit === 'cm' ? 0.01 : 1;
      
      // Calculate volume in cubic meters
      const length = parseFloat(dimensions.length) * conversionFactor;
      const width = parseFloat(dimensions.width) * conversionFactor;
      const height = parseFloat(dimensions.height) * conversionFactor;
      const quantity = parseInt(dimensions.quantity) || 1;
      
      const cbm = length * width * height * quantity;
      
      // Calculate cost (partial CBM counts as full)
      const fullCBM = Math.ceil(cbm);
      const cost = fullCBM * 280;
      
      setResult({
        cbm,
        fullCBM,
        cost
      });
    };
    
    // Reset form
    const resetForm = () => {
      setDimensions({
        length: '',
        width: '',
        height: '',
        quantity: 1
      });
      setResult(null);
    };

    return (
      <>
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <div className="flex items-center mb-6 border-b pb-4 border-blue-100">
            <Package className="text-blue-800 ml-3" size={24} />
            <h2 className="text-xl font-semibold text-blue-800">أدخل أبعاد الشحنة</h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الطول</label>
                <div className="flex">
                  <input
                    type="number"
                    name="length"
                    value={dimensions.length}
                    onChange={handleChange}
                    className="w-full rounded-r-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 text-left"
                    placeholder="0"
                    min="0"
                    step="any"
                  />
                  <span className="bg-gray-100 px-3 py-2 text-gray-600 rounded-l-md border border-gray-300 border-r-0">
                    {unit}
                  </span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">العرض</label>
                <div className="flex">
                  <input
                    type="number"
                    name="width"
                    value={dimensions.width}
                    onChange={handleChange}
                    className="w-full rounded-r-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 text-left"
                    placeholder="0"
                    min="0"
                    step="any"
                  />
                  <span className="bg-gray-100 px-3 py-2 text-gray-600 rounded-l-md border border-gray-300 border-r-0">
                    {unit}
                  </span>
                </div>
              </div>
            </div>
            
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الارتفاع</label>
                <div className="flex">
                  <input
                    type="number"
                    name="height"
                    value={dimensions.height}
                    onChange={handleChange}
                    className="w-full rounded-r-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 text-left"
                    placeholder="0"
                    min="0"
                    step="any"
                  />
                  <span className="bg-gray-100 px-3 py-2 text-gray-600 rounded-l-md border border-gray-300 border-r-0">
                    {unit}
                  </span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الكمية</label>
                <input
                  type="number"
                  name="quantity"
                  value={dimensions.quantity}
                  onChange={handleChange}
                  className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 text-left"
                  placeholder="1"
                  min="1"
                />
              </div>
            </div>
          </div>
          
          <div className="mt-4 mb-6">
            <label className="block text-sm font-medium text-gray-700 mb-1">وحدة القياس</label>
            <div className="flex space-x-4 space-x-reverse">
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  className="form-radio text-blue-600"
                  name="unit"
                  value="cm"
                  checked={unit === 'cm'}
                  onChange={() => setUnit('cm')}
                />
                <span className="mr-2 text-gray-700">سنتيمتر (سم)</span>
              </label>
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  className="form-radio text-blue-600"
                  name="unit"
                  value="m"
                  checked={unit === 'm'}
                  onChange={() => setUnit('m')}
                />
                <span className="mr-2 text-gray-700">متر (م)</span>
              </label>
            </div>
          </div>
          
          <div className="flex flex-wrap gap-3 mt-6">
            <button
              onClick={calculateCBM}
              className="bg-blue-800 hover:bg-blue-900 text-white px-6 py-2 rounded-md flex items-center transition-colors"
            >
              <Calculator size={18} className="ml-2" />
              حساب التكلفة
            </button>
            
            <button
              onClick={resetForm}
              className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-md flex items-center transition-colors"
            >
              إعادة تعيين
            </button>
          </div>
        </div>
        
        {result && (
          <div className="bg-white rounded-lg shadow-lg p-6 mb-8 border-t-4 border-blue-800">
            <div className="flex items-center mb-6 border-b pb-4 border-blue-100">
              <DollarSign className="text-blue-800 ml-3" size={24} />
              <h2 className="text-xl font-semibold text-blue-800">نتائج الحساب</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <div className="mb-4">
                  <p className="text-sm text-gray-600">الحجم الفعلي</p>
                  <p className="text-2xl font-bold text-blue-900">{result.cbm.toFixed(4)} CBM</p>
                </div>
                
                <div className="mb-4">
                  <p className="text-sm text-gray-600">الحجم المحسوب للفواتير</p>
                  <p className="text-2xl font-bold text-blue-900">{result.fullCBM} CBM</p>
                  <p className="text-xs text-gray-500 mt-1">* يتم احتساب الأحجام الجزئية كوحدة CBM كاملة</p>
                </div>
              </div>
              
              <div className="bg-blue-50 p-4 rounded-lg">
                <p className="text-sm text-gray-600">إجمالي تكلفة الشحن</p>
                <p className="text-3xl font-bold text-blue-900">${result.cost.toLocaleString()}</p>
                <p className="text-sm text-gray-600 mt-2">بسعر $280 لكل CBM</p>
              </div>
            </div>
          </div>
        )}
        
        <div className="bg-blue-50 rounded-lg p-6 mb-8">
          <div className="flex items-center mb-4">
            <Truck className="text-blue-800 ml-3" size={24} />
            <h2 className="text-xl font-semibold text-blue-800">معلومات الشحن البحري</h2>
          </div>
          
          <ul className="space-y-2 text-gray-700">
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-blue-800 rounded-full mt-2 ml-2"></span>
              <span>سعر الشحن من الصين إلى المملكة العربية السعودية هو $280 لكل متر مكعب (CBM)</span>
            </li>
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-blue-800 rounded-full mt-2 ml-2"></span>
              <span>يتم احتساب الأحجام الجزئية مثل 1/4 أو 1/2 CBM كوحدة CBM كاملة بقيمة $280</span>
            </li>
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-blue-800 rounded-full mt-2 ml-2"></span>
              <span>يتم حساب CBM بضرب الطول × العرض × الارتفاع (بالمتر)</span>
            </li>
          </ul>
        </div>
      </>
    );
  };
  
  // Air Shipping Calculator (DHL)
  const AirShippingCalculator = () => {
    // State for weight
    const [weight, setWeight] = useState('');
    const [result, setResult] = useState(null);
    
    // Handle input changes
    const handleChange = (e) => {
      setWeight(e.target.value);
    };
    
    // Calculate shipping cost
    const calculateShipping = () => {
      // Validate input
      if (!weight) {
        alert('الرجاء إدخال الوزن');
        return;
      }
      
      const weightValue = parseFloat(weight);
      
      // Apply minimum weight rule
      const billableWeight = Math.max(weightValue, 30);
      
      // Calculate cost (30 SAR per kg)
      const cost = billableWeight * 30;
      
      setResult({
        actualWeight: weightValue,
        billableWeight,
        cost
      });
    };
    
    // Reset form
    const resetForm = () => {
      setWeight('');
      setResult(null);
    };

    return (
      <>
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <div className="flex items-center mb-6 border-b pb-4 border-blue-100">
            <Package className="text-yellow-600 ml-3" size={24} />
            <h2 className="text-xl font-semibold text-yellow-600">أدخل وزن الشحنة</h2>
          </div>
          
          <div className="max-w-md mx-auto">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">الوزن</label>
              <div className="flex">
                <input
                  type="number"
                  name="weight"
                  value={weight}
                  onChange={handleChange}
                  className="w-full rounded-r-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring focus:ring-yellow-200 p-2 text-left"
                  placeholder="0"
                  min="0"
                  step="any"
                />
                <span className="bg-gray-100 px-3 py-2 text-gray-600 rounded-l-md border border-gray-300 border-r-0">
                  كجم
                </span>
              </div>
              <p className="text-xs text-gray-500 mt-1">* الحد الأدنى للوزن هو 30 كجم</p>
            </div>
            
            <div className="flex flex-wrap gap-3 mt-6">
              <button
                onClick={calculateShipping}
                className="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-2 rounded-md flex items-center transition-colors"
              >
                <Calculator size={18} className="ml-2" />
                حساب التكلفة
              </button>
              
              <button
                onClick={resetForm}
                className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-md flex items-center transition-colors"
              >
                إعادة تعيين
              </button>
            </div>
          </div>
        </div>
        
        {result && (
          <div className="bg-white rounded-lg shadow-lg p-6 mb-8 border-t-4 border-yellow-600">
            <div className="flex items-center mb-6 border-b pb-4 border-yellow-100">
              <DollarSign className="text-yellow-600 ml-3" size={24} />
              <h2 className="text-xl font-semibold text-yellow-600">نتائج الحساب</h2>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <div className="mb-4">
                  <p className="text-sm text-gray-600">الوزن الفعلي</p>
                  <p className="text-2xl font-bold text-gray-900">{result.actualWeight.toFixed(2)} كجم</p>
                </div>
                
                <div className="mb-4">
                  <p className="text-sm text-gray-600">الوزن المحسوب للفواتير</p>
                  <p className="text-2xl font-bold text-gray-900">{result.billableWeight.toFixed(2)} كجم</p>
                  {result.actualWeight < 30 && (
                    <p className="text-xs text-gray-500 mt-1">* تم تطبيق الحد الأدنى للوزن (30 كجم)</p>
                  )}
                </div>
              </div>
              
              <div className="bg-yellow-50 p-4 rounded-lg">
                <p className="text-sm text-gray-600">إجمالي تكلفة الشحن</p>
                <p className="text-3xl font-bold text-gray-900">{result.cost.toLocaleString()} ريال</p>
                <p className="text-sm text-gray-600 mt-2">بسعر 30 ريال لكل كجم</p>
              </div>
            </div>
          </div>
        )}
        
        <div className="bg-yellow-50 rounded-lg p-6 mb-8">
          <div className="flex items-center mb-4">
            <Plane className="text-yellow-600 ml-3" size={24} />
            <h2 className="text-xl font-semibold text-yellow-600">معلومات الشحن الجوي DHL</h2>
          </div>
          
          <ul className="space-y-2 text-gray-700">
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-yellow-600 rounded-full mt-2 ml-2"></span>
              <span>سعر الشحن الجوي عبر DHL هو 30 ريال لكل كيلوجرام</span>
            </li>
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-yellow-600 rounded-full mt-2 ml-2"></span>
              <span>الحد الأدنى للوزن المحسوب هو 30 كيلوجرام</span>
            </li>
            <li className="flex items-start">
              <span className="inline-block w-2 h-2 bg-yellow-600 rounded-full mt-2 ml-2"></span>
              <span>خدمة الشحن الجوي أسرع من الشحن البحري وتناسب الشحنات العاجلة</span>
            </li>
          </ul>
        </div>
      </>
    );
  };

  return (
    <div dir="rtl" className="min-h-screen bg-gradient-to-b from-blue-50 to-white font-['Cairo'] text-right">
      <div className="max-w-4xl mx-auto p-6">
        {/* Logo and Header */}
        <div className="flex flex-col items-center justify-center mb-6 pt-6">
          <div className="mb-4">
            <div className="bg-blue-900 text-white px-6 py-3 rounded-lg shadow-lg inline-block">
              <h1 className="text-3xl font-bold tracking-wider">AJADEAL</h1>
            </div>
          </div>
          <h1 className="text-3xl font-bold text-blue-900 mb-2">حاسبة الشحن</h1>
          <p className="text-blue-700">من الصين إلى المملكة العربية السعودية</p>
        </div>
        
        {/* Navigation Tabs */}
        <div className="flex mb-6 border-b border-gray-200">
          <button
            className={`flex items-center py-3 px-6 border-b-2 ${
              activeTab === 'sea' 
                ? 'border-blue-800 text-blue-800 font-medium' 
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
            onClick={() => setActiveTab('sea')}
          >
            <Truck size={20} className="ml-2" />
            الشحن البحري
          </button>
          <button
            className={`flex items-center py-3 px-6 border-b-2 ${
              activeTab === 'air' 
                ? 'border-yellow-600 text-yellow-600 font-medium' 
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            }`}
            onClick={() => setActiveTab('air')}
          >
            <Plane size={20} className="ml-2" />
            الشحن الجوي DHL
          </button>
        </div>
        
        {/* Active Calculator */}
        {activeTab === 'sea' ? <SeaShippingCalculator /> : <AirShippingCalculator />}
        
        <footer className="text-center text-gray-600 text-sm py-4">
          <p>© {new Date().getFullYear()} AJADEAL - حاسبة الشحن من الصين إلى المملكة العربية السعودية</p>
        </footer>
      </div>
    </div>
  );
}