import React, { useState, useEffect } from 'react';
import WebApp from '@twa-dev/sdk';

function App() {
  const [activeTab, setActiveTab] = useState('tour-creation');
  const [tgUser, setTgUser] = useState(null);

  // Tour Creation Form State
  const [tourForm, setTourForm] = useState({
    title: '',
    description: '',
    difficulty: '3',
    origin_address: '',
    region: '',
    start_date: '',
    start_time: '08:00',
    end_date: '',
    end_time: '18:00',
    transport_options: ['personal_car'],
    pricing: { personal_car: '0', van: '0', minibus: '0', bus: '0' },
    services: ['insurance'],
    meal_details: '',
    required_items: '',
    capacity: '20',
    notes: '',
    banner: ''
  });

  // Leader Dashboard State
  const [leaderGateways, setLeaderGateways] = useState({
    gateway_zarinpal: true,
    gateway_card: true,
    gateway_crypto: false,
    gateway_stars: true,
    gateway_wallet: true
  });
  const [leaderCard, setLeaderCard] = useState({
    card_number: '',
    sheba: '',
    card_owner_name: ''
  });
  const [withdrawAmount, setWithdrawAmount] = useState('');
  const [withdrawList, setWithdrawList] = useState([
    { id: 1, amount: 250000, date: '1405/04/10', status: 'approved' },
    { id: 2, amount: 1500000, date: '1405/04/18', status: 'pending' }
  ]);

  // Explorer State
  const [explorerProfile, setExplorerProfile] = useState({
    firstName: '',
    lastName: '',
    phone: ''
  });
  const [explorerTours, setExplorerTours] = useState([
    { id: 1, title: 'کویر مرنجاب پاییزه', date: '1405/05/12', paid: 650000, vehicle: 'ماشین شخصی', status: 'completed' },
    { id: 2, title: 'جنگل الیمستان', date: '1405/05/26', paid: 890000, vehicle: 'اتوبوس توریستی', status: 'pending' }
  ]);

  // Admin Stats State
  const [adminLeaders, setAdminLeaders] = useState([
    { id: 1, name: 'علی حسینی', phone: '09123456789', income: 45000000, groups: 3 },
    { id: 2, name: 'مریم رضایی', phone: '09187654321', income: 82000000, groups: 5 }
  ]);

  useEffect(() => {
    WebApp.ready();
    WebApp.expand();
    const user = WebApp.initDataUnsafe?.user;
    if (user) {
      setTgUser(user);
      setExplorerProfile({
        firstName: user.first_name || '',
        lastName: user.last_name || '',
        phone: ''
      });
      // Set form prefilled fields from Telegram profile
      setTourForm(prev => ({
        ...prev,
        notes: `برگزارکننده: ${user.first_name} ${user.last_name || ''}`
      }));
    }
  }, []);

  // Duplicate from history
  const handleLoadLastTour = () => {
    // Mock last tour data
    const lastTour = {
      title: 'کمپینگ در جنگل‌های سوادکوه',
      description: 'برنامه دو روزه شاد و پر انرژی کمپینگ در دل جنگل‌های سوادکوه همراه با پیاده‌روی و تماشای مه.',
      difficulty: '3',
      origin_address: 'تهران، میدان ونک',
      region: 'سوادکوه، مازندران',
      start_date: '1405-05-15',
      start_time: '05:00',
      end_date: '1405-05-16',
      end_time: '20:00',
      transport_options: ['personal_car', 'van'],
      pricing: { personal_car: '450000', van: '850000', minibus: '0', bus: '0' },
      services: ['insurance', 'accommodation', 'meals'],
      meal_details: 'یک وعده صبحانه و یک وعده شام گرم توریستی',
      required_items: 'چادر مسافرتی، کیسه خواب، کفش مناسب، لباس گرم، چراغ پیشانی',
      capacity: '25',
      notes: 'دوستان عزیز لطفا از آوردن وسایل غیرضروری خودداری فرمایید.',
      banner: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4'
    };
    setTourForm(lastTour);
    WebApp.showAlert('اطلاعات آخرین تور با موفقیت بارگذاری شد!');
  };

  const handleCreateTour = (e) => {
    e.preventDefault();
    // In actual app, we would post this to the backend API
    WebApp.showConfirm('آیا مایلید این تور در کانال و گروه متصل شما منتشر شود؟', (confirmed) => {
      if (confirmed) {
        WebApp.sendData(JSON.stringify({ action: 'create_tour', data: tourForm }));
        WebApp.close();
      }
    });
  };

  const handleSaveSettings = () => {
    WebApp.showAlert('تنظیمات درگاه‌ها و شماره کارت لیدر با موفقیت ذخیره شد.');
  };

  const handleWithdrawRequest = (e) => {
    e.preventDefault();
    if (!withdrawAmount || isNaN(withdrawAmount)) {
      WebApp.showAlert('لطفا مبلغ معتبری وارد کنید.');
      return;
    }
    const amount = parseFloat(withdrawAmount);
    setWithdrawList(prev => [
      { id: Date.now(), amount, date: '۱۴۰۵/۰۴/۲۱', status: 'pending' },
      ...prev
    ]);
    setWithdrawAmount('');
    WebApp.showAlert('درخواست تسویه‌حساب شما ثبت شد و پس از بررسی ادمین انجام می‌شود.');
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <h1 className="app-title">طبیعت‌گردی رام 🏕️</h1>
        {tgUser && (
          <div style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
            سلام، {tgUser.first_name}
          </div>
        )}
      </header>

      {/* Navigation Tabs */}
      <div className="tabs-container">
        <button 
          className={`tab-btn ${activeTab === 'tour-creation' ? 'active' : ''}`}
          onClick={() => setActiveTab('tour-creation')}
        >
          🏔️ ایجاد تور
        </button>
        <button 
          className={`tab-btn ${activeTab === 'leader-dashboard' ? 'active' : ''}`}
          onClick={() => setActiveTab('leader-dashboard')}
        >
          🧭 پنل لیدر
        </button>
        <button 
          className={`tab-btn ${activeTab === 'explorer-profile' ? 'active' : ''}`}
          onClick={() => setActiveTab('explorer-profile')}
        >
          👤 طبیعت‌گرد
        </button>
        <button 
          className={`tab-btn ${activeTab === 'admin-dashboard' ? 'active' : ''}`}
          onClick={() => setActiveTab('admin-dashboard')}
        >
          ⚙️ ادمین پلتفرم
        </button>
      </div>

      {/* TOUR CREATION TAB */}
      {activeTab === 'tour-creation' && (
        <div className="glass-card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <h2 style={{ fontSize: '18px' }}>ایجاد برنامه‌ی طبیعت‌گردی جدید</h2>
            <button className="btn btn-secondary" style={{ width: 'auto', padding: '6px 12px', fontSize: '13px' }} onClick={handleLoadLastTour}>
              🔄 کپی از تور قبلی
            </button>
          </div>

          <form onSubmit={handleCreateTour}>
            <div className="form-group">
              <label className="form-label">🏷️ عنوان تور</label>
              <input 
                type="text" 
                className="form-control" 
                value={tourForm.title} 
                onChange={e => setTourForm({...tourForm, title: e.target.value})}
                placeholder="مثال: تور یک روزه آبشار دارنو"
                required
              />
            </div>

            <div className="form-group">
              <label className="form-label">📝 شرح برنامه</label>
              <textarea 
                className="form-control" 
                rows="3"
                value={tourForm.description} 
                onChange={e => setTourForm({...tourForm, description: e.target.value})}
                placeholder="توضیحات مربوط به ساعت حرکت، جزییات مسیر و خدمات..."
                required
              />
            </div>

            <div className="form-row">
              <div className="form-group">
                <label className="form-label">🧗‍♂️ سطح سختی</label>
                <select 
                  className="form-control"
                  value={tourForm.difficulty}
                  onChange={e => setTourForm({...tourForm, difficulty: e.target.value})}
                >
                  <option value="1">آسان (۱/۵)</option>
                  <option value="2">معمولی (۲/۵)</option>
                  <option value="3">متوسط (۳/۵)</option>
                  <option value="4">چالش‌برانگیز (۴/۵)</option>
                  <option value="5">سخت (۵/۵)</option>
                </select>
              </div>

              <div className="form-group">
                <label className="form-label">👥 ظرفیت کل (نفر)</label>
                <input 
                  type="number" 
                  className="form-control" 
                  value={tourForm.capacity}
                  onChange={e => setTourForm({...tourForm, capacity: e.target.value})}
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label className="form-label">🚩 مبدا حرکت</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={tourForm.origin_address}
                  onChange={e => setTourForm({...tourForm, origin_address: e.target.value})}
                  placeholder="مثال: تهران، میدان آرژانتین"
                  required
                />
              </div>
              <div className="form-group">
                <label className="form-label">📍 منطقه هدف</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={tourForm.region}
                  onChange={e => setTourForm({...tourForm, region: e.target.value})}
                  placeholder="مثال: کلاردشت، مازندران"
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label className="form-label">🗓️ تاریخ رفت</label>
                <input 
                  type="date" 
                  className="form-control" 
                  value={tourForm.start_date}
                  onChange={e => setTourForm({...tourForm, start_date: e.target.value})}
                  required
                />
              </div>
              <div className="form-group">
                <label className="form-label">⏰ ساعت رفت</label>
                <input 
                  type="time" 
                  className="form-control" 
                  value={tourForm.start_time}
                  onChange={e => setTourForm({...tourForm, start_time: e.target.value})}
                  required
                />
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label className="form-label">🗓️ تاریخ برگشت</label>
                <input 
                  type="date" 
                  className="form-control" 
                  value={tourForm.end_date}
                  onChange={e => setTourForm({...tourForm, end_date: e.target.value})}
                  required
                />
              </div>
              <div className="form-group">
                <label className="form-label">⏰ ساعت برگشت</label>
                <input 
                  type="time" 
                  className="form-control" 
                  value={tourForm.end_time}
                  onChange={e => setTourForm({...tourForm, end_time: e.target.value})}
                  required
                />
              </div>
            </div>

            <div className="form-group">
              <label className="form-label">🚌 وسایل نقلیه و هزینه هرکدام (تومان)</label>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px', marginTop: '8px' }}>
                {['personal_car', 'van', 'minibus', 'bus'].map(veh => {
                  const labelMap = { personal_car: '🚗 شخصی', van: '🚐 ون', minibus: '🚌 مینی‌بوس', bus: '🚍 اتوبوس' };
                  return (
                    <div key={veh} style={{ background: 'rgba(255,255,255,0.03)', padding: '8px', borderRadius: '8px', border: '1px solid var(--glass-border)' }}>
                      <span style={{ fontSize: '13px', display: 'block', marginBottom: '4px' }}>{labelMap[veh]}</span>
                      <input 
                        type="number" 
                        className="form-control"
                        style={{ padding: '6px' }}
                        value={tourForm.pricing[veh] || '0'}
                        onChange={e => setTourForm({
                          ...tourForm,
                          pricing: { ...tourForm.pricing, [veh]: e.target.value }
                        })}
                        placeholder="هزینه"
                      />
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="form-group">
              <label className="form-label">🎒 لوازم مورد نیاز</label>
              <input 
                type="text" 
                className="form-control" 
                value={tourForm.required_items}
                onChange={e => setTourForm({...tourForm, required_items: e.target.value})}
                placeholder="پانچو، عینک آفتابی، کفش کوه، آب..."
              />
            </div>

            <div className="form-group">
              <label className="form-label">🖼️ آدرس تصویر بنر</label>
              <input 
                type="text" 
                className="form-control" 
                value={tourForm.banner}
                onChange={e => setTourForm({...tourForm, banner: e.target.value})}
                placeholder="https://example.com/banner.jpg"
              />
            </div>

            <button type="submit" className="btn btn-primary" style={{ marginTop: '16px' }}>
              📤 ثبت و انتشار تور در تلگرام
            </button>
          </form>
        </div>
      )}

      {/* LEADER DASHBOARD TAB */}
      {activeTab === 'leader-dashboard' && (
        <div>
          {/* Income & Wallet Stats */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>📊 خلاصه وضعیت مالی لیدر</h2>
            <div className="stat-grid">
              <div className="stat-item">
                <div className="stat-label">درآمد قابل برداشت</div>
                <div className="stat-val">۲۴,۵۰۰,۰۰۰ تومان</div>
              </div>
              <div className="stat-item">
                <div className="stat-label">تعداد کل مسافران ثبت‌نامی</div>
                <div className="stat-val">۱۲۴ نفر</div>
              </div>
            </div>

            {/* Withdraw funds */}
            <form onSubmit={handleWithdrawRequest} style={{ display: 'flex', gap: '8px', marginTop: '12px' }}>
              <input 
                type="number" 
                className="form-control"
                placeholder="مبلغ برداشت (تومان)"
                value={withdrawAmount}
                onChange={e => setWithdrawAmount(e.target.value)}
              />
              <button type="submit" className="btn btn-success" style={{ width: 'auto', whiteSpace: 'nowrap' }}>
                💸 درخواست تسویه
              </button>
            </form>
          </div>

          {/* Payment gateways toggles & settings */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>⚙️ تنظیمات درگاه‌های پرداخت تور</h2>
            <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginBottom: '16px' }}>
              به عنوان لیدر، درگاه‌هایی که مایلید طبیعت‌گردان در پیش‌فاکتور مشاهده کنند را فعال کنید:
            </p>

            <div className="switch-container">
              <span className="switch-label">💳 کارت به کارت (بدون کارمزد)</span>
              <label className="switch">
                <input 
                  type="checkbox" 
                  checked={leaderGateways.gateway_card} 
                  onChange={e => setLeaderGateways({...leaderGateways, gateway_card: e.target.checked})}
                />
                <span className="slider"></span>
              </label>
            </div>

            <div className="switch-container">
              <span className="switch-label">🌐 پرداخت آنلاین زرین‌پال (۵٪ کارمزد پلتفرم)</span>
              <label className="switch">
                <input 
                  type="checkbox" 
                  checked={leaderGateways.gateway_zarinpal} 
                  onChange={e => setLeaderGateways({...leaderGateways, gateway_zarinpal: e.target.checked})}
                />
                <span className="slider"></span>
              </label>
            </div>

            <div className="switch-container">
              <span className="switch-label">💎 پرداخت کریپتو تتر (۵٪ کارمزد پلتفرم)</span>
              <label className="switch">
                <input 
                  type="checkbox" 
                  checked={leaderGateways.gateway_crypto} 
                  onChange={e => setLeaderGateways({...leaderGateways, gateway_crypto: e.target.checked})}
                />
                <span className="slider"></span>
              </label>
            </div>

            <div className="switch-container">
              <span className="switch-label">⭐️ استارز رسمی تلگرام (۵٪ کارمزد پلتفرم)</span>
              <label className="switch">
                <input 
                  type="checkbox" 
                  checked={leaderGateways.gateway_stars} 
                  onChange={e => setLeaderGateways({...leaderGateways, gateway_stars: e.target.checked})}
                />
                <span className="slider"></span>
              </label>
            </div>

            <div className="switch-container">
              <span className="switch-label">👛 پرداخت مستقیم از کیف پول (۵٪ کارمزد پلتفرم)</span>
              <label className="switch">
                <input 
                  type="checkbox" 
                  checked={leaderGateways.gateway_wallet} 
                  onChange={e => setLeaderGateways({...leaderGateways, gateway_wallet: e.target.checked})}
                />
                <span className="slider"></span>
              </label>
            </div>

            {/* Bank Card number settings */}
            <div style={{ marginTop: '16px', borderTop: '1px solid var(--glass-border)', paddingTop: '16px' }}>
              <h3 style={{ fontSize: '14px', marginBottom: '12px' }}>🏦 اطلاعات حساب بانکی لیدر برای تسویه</h3>
              <div className="form-group">
                <label className="form-label">شماره کارت ۱۶ رقمی</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={leaderCard.card_number}
                  onChange={e => setLeaderCard({...leaderCard, card_number: e.target.value})}
                  placeholder="۶۰۳۷۹۹۱۸..."
                />
              </div>
              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">شماره شبا (IR)</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    value={leaderCard.sheba}
                    onChange={e => setLeaderCard({...leaderCard, sheba: e.target.value})}
                    placeholder="IR12012..."
                  />
                </div>
                <div className="form-group">
                  <label className="form-label">نام صاحب حساب</label>
                  <input 
                    type="text" 
                    className="form-control" 
                    value={leaderCard.card_owner_name}
                    onChange={e => setLeaderCard({...leaderCard, card_owner_name: e.target.value})}
                    placeholder="نام کامل"
                  />
                </div>
              </div>
              <button className="btn btn-primary" onClick={handleSaveSettings}>
                💾 ذخیره تنظیمات حساب و درگاه‌ها
              </button>
            </div>
          </div>

          {/* Withdrawals list */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>💸 تاریخچه درخواست‌های تسویه</h2>
            {withdrawList.map(w => (
              <div className="list-item" key={w.id}>
                <div>
                  <div className="list-item-title">{w.amount.toLocaleString()} تومان</div>
                  <div className="list-item-desc">تاریخ درخواست: {w.date}</div>
                </div>
                <span className={`badge ${w.status === 'approved' ? 'badge-success' : 'badge-warning'}`}>
                  {w.status === 'approved' ? 'تسویه شده' : 'در انتظار بررسی'}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* EXPLORER PROFILE TAB */}
      {activeTab === 'explorer-profile' && (
        <div>
          {/* User profile */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>👤 اطلاعات پروفایل طبیعت‌گرد</h2>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">نام</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={explorerProfile.firstName}
                  onChange={e => setExplorerProfile({...explorerProfile, firstName: e.target.value})}
                />
              </div>
              <div className="form-group">
                <label className="form-label">نام خانوادگی</label>
                <input 
                  type="text" 
                  className="form-control" 
                  value={explorerProfile.lastName}
                  onChange={e => setExplorerProfile({...explorerProfile, lastName: e.target.value})}
                />
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">📞 شماره موبایل جهت هماهنگی</label>
              <input 
                type="text" 
                className="form-control" 
                value={explorerProfile.phone}
                onChange={e => setExplorerProfile({...explorerProfile, phone: e.target.value})}
                placeholder="۰۹۱۲۳۴۵۶۷۸۹"
              />
            </div>
            <button className="btn btn-primary" onClick={() => WebApp.showAlert('اطلاعات کاربری ثبت‌نامی شما ذخیره شد.')}>
              💾 به‌روزرسانی پروفایل
            </button>
          </div>

          {/* Registered Tours */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>🎒 سفرهای ثبت‌نام شده من</h2>
            {explorerTours.map(tour => (
              <div className="list-item" key={tour.id}>
                <div>
                  <div className="list-item-title">{tour.title}</div>
                  <div className="list-item-desc">تاریخ رفت: {tour.date} | وسیله: {tour.vehicle}</div>
                  <div className="list-item-desc" style={{ color: 'var(--primary)', fontWeight: '700' }}>
                    هزینه پرداخت شده: {tour.paid.toLocaleString()} تومان
                  </div>
                </div>
                <span className={`badge ${tour.status === 'completed' ? 'badge-success' : 'badge-warning'}`}>
                  {tour.status === 'completed' ? 'پرداخت نهایی' : 'در انتظار تایید فیش'}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ADMIN DASHBOARD TAB */}
      {activeTab === 'admin-dashboard' && (
        <div>
          {/* Admin Stats */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>📊 آمار کل پلتفرم طبیعت‌گردی</h2>
            <div className="stat-grid">
              <div className="stat-item">
                <div className="stat-label">تعداد کل لیدرها</div>
                <div className="stat-val">۲ نفر</div>
              </div>
              <div className="stat-item">
                <div className="stat-label">سود پلتفرم (۵٪ کارمزد)</div>
                <div className="stat-val">۶,۳۵۰,۰۰۰ تومان</div>
              </div>
            </div>
          </div>

          {/* Leaders list & performance */}
          <div className="glass-card">
            <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>🧭 لیست تورلیدرهای ثبت‌شده</h2>
            {adminLeaders.map(leader => (
              <div className="list-item" key={leader.id} style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '8px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
                  <span className="list-item-title">{leader.name}</span>
                  <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>تلفن: {leader.phone}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontSize: '13px' }}>
                  <span>درآمد کل: <b style={{ color: 'var(--success)' }}>{leader.income.toLocaleString()} تومان</b></span>
                  <span>تعداد گروه‌ها: <b>{leader.groups} گروه</b></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;
