import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signOut, 
  updateProfile,
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  query, 
  where, 
  onSnapshot, 
  doc, 
  updateDoc, 
  deleteDoc,
  orderBy,
  serverTimestamp,
  getDocs
} from 'firebase/firestore';
import { 
  LayoutDashboard, 
  Calculator, 
  ClipboardList, 
  Users, 
  Settings, 
  LogOut, 
  Building2, 
  Menu, 
  X, 
  FileText, 
  CheckCircle, 
  AlertCircle,
  Truck,
  Hammer,
  Save,
  Download,
  Share2
} from 'lucide-react';

// --- FIREBASE KURULUMU (Global Değişkenler) ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// --- YARDIMCI FONKSİYONLAR ---
const turkceKarakterCevir = (text) => {
  if (!text) return "";
  const mapping = {
    'ç': 'c', 'Ç': 'C', 'ğ': 'g', 'Ğ': 'G', 'ı': 'i', 'I': 'I',
    'İ': 'I', 'ö': 'o', 'Ö': 'O', 'ş': 's', 'Ş': 'S', 'ü': 'u', 'Ü': 'U'
  };
  return text.split('').map(char => mapping[char] || char).join('');
};

// --- BİLEŞENLER ---

// 1. GİRİŞ VE KAYIT EKRANI (SAAS KURULUMU)
const AuthScreen = ({ onLogin }) => {
  const [isRegistering, setIsRegistering] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [companyName, setCompanyName] = useState(''); // SaaS Şirket Adı
  const [licenseKey, setLicenseKey] = useState('');   // SaaS Lisans Anahtarı
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleAuth = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      if (isRegistering) {
        // Yeni Şirket Kaydı (SaaS Mantığı)
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;

        // Şirket Bilgilerini Kaydet
        await addDoc(collection(db, 'companies'), {
            name: companyName,
            licenseKey: licenseKey,
            ownerId: user.uid,
            createdAt: serverTimestamp()
        });

        // Kullanıcı Profilini Oluştur
        await addDoc(collection(db, 'users'), {
            uid: user.uid,
            email: user.email,
            companyName: companyName,
            role: 'admin', // İlk kullanıcı her zaman admindir
            department: 'Yönetim',
            createdAt: serverTimestamp()
        });

        await updateProfile(user, { displayName: companyName });
      } else {
        // Giriş Yap
        await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4 font-sans">
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-4xl flex overflow-hidden">
        {/* Sol Taraf - Görsel/Marka */}
        <div className="hidden md:flex flex-col justify-center items-center w-1/2 bg-slate-900 text-white p-12 relative">
          <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1572025442646-866d16c84a54?auto=format&fit=crop&q=80')] bg-cover bg-center opacity-20"></div>
          <div className="relative z-10 text-center">
            <Building2 size={64} className="mx-auto mb-6 text-yellow-500" />
            <h1 className="text-4xl font-bold mb-2">ASANSÖR SMHM</h1>
            <p className="text-slate-300 tracking-widest text-sm uppercase">Süspansiyon Üretim & Yönetim Sistemi</p>
            <div className="mt-10 space-y-4 text-left text-sm opacity-80">
              <div className="flex items-center gap-2"><CheckCircle size={16} className="text-green-400"/> Gelişmiş Ölçü Hesaplama</div>
              <div className="flex items-center gap-2"><CheckCircle size={16} className="text-green-400"/> Üretim Takip Modülü</div>
              <div className="flex items-center gap-2"><CheckCircle size={16} className="text-green-400"/> Bulut Tabanlı Arşiv</div>
            </div>
          </div>
        </div>

        {/* Sağ Taraf - Form */}
        <div className="w-full md:w-1/2 p-12 flex flex-col justify-center">
            <h2 className="text-2xl font-bold text-slate-800 mb-2">
                {isRegistering ? 'Sistemi Kur & Şirketini Kaydet' : 'Yönetim Paneli Giriş'}
            </h2>
            <p className="text-slate-500 mb-8 text-sm">
                {isRegistering ? 'Firmanız için yeni bir veritabanı oluşturun.' : 'Hesabınıza erişmek için bilgilerinizi girin.'}
            </p>

            {error && <div className="bg-red-50 text-red-600 p-3 rounded-lg mb-4 text-sm flex items-center gap-2"><AlertCircle size={16}/> {error}</div>}

            <form onSubmit={handleAuth} className="space-y-4">
                {isRegistering && (
                    <>
                        <div>
                            <label className="block text-xs font-bold text-slate-600 uppercase mb-1">Firma Adı</label>
                            <input required type="text" className="w-full p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-800 focus:outline-none transition" placeholder="Örn: Visutopya Asansör" value={companyName} onChange={(e) => setCompanyName(e.target.value)} />
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-slate-600 uppercase mb-1">Lisans Anahtarı (Opsiyonel)</label>
                            <input type="text" className="w-full p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-800 focus:outline-none transition" placeholder="XXXX-YYYY-ZZZZ" value={licenseKey} onChange={(e) => setLicenseKey(e.target.value)} />
                        </div>
                    </>
                )}
                
                <div>
                    <label className="block text-xs font-bold text-slate-600 uppercase mb-1">E-Posta Adresi</label>
                    <input required type="email" className="w-full p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-800 focus:outline-none transition" placeholder="admin@firma.com" value={email} onChange={(e) => setEmail(e.target.value)} />
                </div>
                <div>
                    <label className="block text-xs font-bold text-slate-600 uppercase mb-1">Şifre</label>
                    <input required type="password" className="w-full p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-slate-800 focus:outline-none transition" placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)} />
                </div>

                <button disabled={loading} type="submit" className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-3 rounded-lg transition duration-200 flex justify-center items-center">
                    {loading ? <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> : (isRegistering ? 'Sistemi Kur' : 'Giriş Yap')}
                </button>
            </form>

            <div className="mt-6 text-center text-sm">
                <button onClick={() => setIsRegistering(!isRegistering)} className="text-slate-600 hover:text-slate-900 font-medium underline">
                    {isRegistering ? 'Zaten hesabınız var mı? Giriş Yapın' : 'Yeni bir firma mı? Sistemi Kurun'}
                </button>
            </div>
        </div>
      </div>
    </div>
  );
};

// 2. HESAPLAMA MODÜLÜ (SMHM CORE)
const CalculationModule = ({ user, userData }) => {
    const [refName, setRefName] = useState('');
    const [elevatorCount, setElevatorCount] = useState(1);
    const [dbg, setDbg] = useState('');
    const [parca, setParca] = useState('');
    const [profil, setProfil] = useState('');
    const [lastResult, setLastResult] = useState(null);
    const [saving, setSaving] = useState(false);

    // Senkronizasyon Mantığı
    const handleSync = (source, value) => {
        const val = parseFloat(value);
        if (isNaN(val)) return;

        if (source === 'dbg') {
            setDbg(value);
            setParca((val - 8).toFixed(2));
            setProfil((val - 13).toFixed(2));
        } else if (source === 'parca') {
            setParca(value);
            setDbg((val + 8).toFixed(2));
            setProfil((val - 5).toFixed(2));
        } else if (source === 'profil') {
            setProfil(value);
            setDbg((val + 13).toFixed(2));
            setParca((val + 5).toFixed(2));
        }
    };

    const calculateAndSave = async () => {
        if(!refName || !dbg) {
            alert("Lütfen Proje Adı ve DBG değerini giriniz.");
            return;
        }

        const resultData = {
            projectRef: refName,
            count: parseInt(elevatorCount),
            dbg: dbg,
            parca: parca,
            profil: profil,
            date: new Date().toLocaleDateString('tr-TR'),
            createdBy: user.uid,
            companyName: userData?.companyName,
            status: 'Beklemede' // Hesaplandı, Üretimde, Tamamlandı
        };

        setLastResult(resultData);
        setSaving(true);
        
        try {
             // Projeler tablosuna kaydet
            await addDoc(collection(db, 'projects'), {
                ...resultData,
                timestamp: serverTimestamp()
            });

            // Otomatik olarak bir üretim görevi oluştur
            await addDoc(collection(db, 'tasks'), {
                title: `${refName} - Süspansiyon Kesimi`,
                description: `${elevatorCount} Adet. DBG: ${dbg}, Parça: ${parca}, Profil: ${profil}`,
                department: 'Kesimhane',
                status: 'Yapılacak',
                assignedTo: 'Havuz',
                projectId: refName,
                companyName: userData?.companyName,
                timestamp: serverTimestamp()
            });

            alert("Hesaplama kaydedildi ve Kesimhane'ye iş emri gönderildi.");
        } catch (error) {
            console.error("Hata:", error);
            alert("Kaydedilirken hata oluştu.");
        } finally {
            setSaving(false);
        }
    };

    const downloadPDF = () => {
        if (!lastResult) return;
        
        // window.jspdf kontrolü
        if (typeof window.jspdf === 'undefined') {
            alert("PDF kütüphanesi henüz yüklenmedi. Lütfen sayfayı yenileyip tekrar deneyin.");
            return;
        }

        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        
        const trRef = turkceKarakterCevir(lastResult.projectRef).toUpperCase();
        
        doc.setFont("times", "bold");
        doc.setFontSize(18);
        doc.text("URETIM RAPORU", 105, 20, { align: "center" });
        
        doc.setFontSize(12);
        doc.setFont("times", "normal");
        doc.text(`PROJE: ${trRef}`, 14, 40);
        doc.text(`ADET: ${lastResult.count}`, 14, 48);
        doc.text(`TARIH: ${lastResult.date}`, 14, 56);
        
        const tableData = [
            ["Ray Arasi (DBG)", `${lastResult.dbg} cm`, "-"],
            ["Parca Uzunlugu", `${lastResult.parca} cm`, `${(lastResult.parca * lastResult.count).toFixed(2)} cm`],
            ["Profil Uzunlugu", `${lastResult.profil} cm`, `${(lastResult.profil * lastResult.count).toFixed(2)} cm`]
        ];

        doc.autoTable({
            head: [["MALZEME", "BIRIM OLCU", `TOPLAM (x${lastResult.count})`]],
            body: tableData,
            startY: 65,
        });

        doc.save(`${trRef}_RAPOR.pdf`);
    };

    return (
        <div className="max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-2">
                <Calculator className="text-blue-600"/> Yeni Hesaplama & İş Emri
            </h2>
            
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 md:p-8">
                {/* Üst Bilgiler */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Proje Referansı</label>
                        <input 
                            type="text" 
                            className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" 
                            placeholder="Örn: Vadi İstanbul A Blok"
                            value={refName}
                            onChange={(e) => setRefName(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Asansör Adedi</label>
                        <input 
                            type="number" 
                            min="1"
                            className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" 
                            value={elevatorCount}
                            onChange={(e) => setElevatorCount(e.target.value)}
                        />
                    </div>
                </div>

                {/* Hesaplama Alanı */}
                <div className="bg-blue-50 rounded-xl p-6 border border-blue-100 mb-8">
                    <h3 className="text-sm font-bold text-blue-800 uppercase mb-4 text-center border-b border-blue-200 pb-2">Ölçü Girişi (Otomatik Senkronize)</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div className="space-y-2">
                            <label className="text-xs font-bold text-blue-700">RAY ARASI (DBG)</label>
                            <input type="number" step="0.1" className="w-full p-3 rounded border border-blue-200 text-center font-bold text-lg" placeholder="cm" value={dbg} onChange={(e) => handleSync('dbg', e.target.value)} />
                        </div>
                        <div className="space-y-2">
                            <label className="text-xs font-bold text-blue-700">PARÇA (DBG-8)</label>
                            <input type="number" step="0.1" className="w-full p-3 rounded border border-blue-200 text-center font-bold text-lg" placeholder="cm" value={parca} onChange={(e) => handleSync('parca', e.target.value)} />
                        </div>
                        <div className="space-y-2">
                            <label className="text-xs font-bold text-blue-700">PROFİL (DBG-13)</label>
                            <input type="number" step="0.1" className="w-full p-3 rounded border border-blue-200 text-center font-bold text-lg" placeholder="cm" value={profil} onChange={(e) => handleSync('profil', e.target.value)} />
                        </div>
                    </div>
                </div>

                {/* Aksiyonlar */}
                <div className="flex flex-col md:flex-row gap-4">
                    <button 
                        onClick={calculateAndSave} 
                        disabled={saving}
                        className="flex-1 bg-slate-900 text-white p-4 rounded-lg font-bold hover:bg-slate-800 transition flex items-center justify-center gap-2"
                    >
                        {saving ? 'Kaydediliyor...' : <><Save size={20}/> Kaydet & İş Emri Oluştur</>}
                    </button>
                    {lastResult && (
                        <button 
                            onClick={downloadPDF}
                            className="flex-1 bg-red-600 text-white p-4 rounded-lg font-bold hover:bg-red-700 transition flex items-center justify-center gap-2"
                        >
                            <Download size={20}/> PDF Rapor İndir
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
};

// 3. İŞ/GÖREV YÖNETİMİ (KANBAN STYLE)
const TaskManager = ({ userData }) => {
    const [tasks, setTasks] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (!userData?.companyName) return;
        
        const q = query(
            collection(db, 'tasks'), 
            where('companyName', '==', userData.companyName),
            orderBy('timestamp', 'desc')
        );

        const unsubscribe = onSnapshot(q, (snapshot) => {
            const taskList = snapshot.docs.map(doc => ({id: doc.id, ...doc.data()}));
            setTasks(taskList);
            setLoading(false);
        });

        return () => unsubscribe();
    }, [userData]);

    const updateStatus = async (taskId, newStatus) => {
        const taskRef = doc(db, 'tasks', taskId);
        await updateDoc(taskRef, { status: newStatus });
    };

    const StatusColumn = ({ title, status, icon: Icon, color }) => (
        <div className="flex-1 min-w-[300px] bg-slate-100 rounded-xl p-4">
            <h3 className={`font-bold mb-4 flex items-center gap-2 ${color}`}>
                <Icon size={18}/> {title} 
                <span className="ml-auto bg-white px-2 py-0.5 rounded-full text-xs text-slate-600 shadow-sm">
                    {tasks.filter(t => t.status === status).length}
                </span>
            </h3>
            <div className="space-y-3">
                {tasks.filter(t => t.status === status).map(task => (
                    <div key={task.id} className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-slate-300 hover:shadow-md transition">
                        <div className="flex justify-between items-start mb-2">
                            <span className="text-xs font-bold text-slate-500 bg-slate-100 px-2 py-1 rounded">{task.department}</span>
                            <span className="text-[10px] text-slate-400">{new Date(task.timestamp?.seconds * 1000).toLocaleDateString('tr-TR')}</span>
                        </div>
                        <h4 className="font-bold text-slate-800 text-sm mb-1">{task.title}</h4>
                        <p className="text-xs text-slate-500 mb-3">{task.description}</p>
                        
                        <div className="flex gap-2 mt-2 pt-2 border-t border-slate-50">
                            {status !== 'Yapılacak' && (
                                <button onClick={() => updateStatus(task.id, 'Yapılacak')} className="text-xs bg-slate-100 hover:bg-slate-200 px-2 py-1 rounded">Geri Al</button>
                            )}
                            {status !== 'İşlemde' && (
                                <button onClick={() => updateStatus(task.id, 'İşlemde')} className="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-2 py-1 rounded font-medium flex-1">Başla</button>
                            )}
                            {status !== 'Tamamlandı' && (
                                <button onClick={() => updateStatus(task.id, 'Tamamlandı')} className="text-xs bg-green-50 text-green-600 hover:bg-green-100 px-2 py-1 rounded font-medium flex-1">Bitir</button>
                            )}
                        </div>
                    </div>
                ))}
                {tasks.filter(t => t.status === status).length === 0 && (
                    <div className="text-center py-8 text-slate-400 text-sm italic">Görev bulunmuyor</div>
                )}
            </div>
        </div>
    );

    return (
        <div className="h-full flex flex-col">
            <div className="flex justify-between items-center mb-6">
                <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                    <ClipboardList className="text-blue-600"/> Üretim Bant Takibi
                </h2>
                <div className="flex gap-2">
                    <span className="px-3 py-1 bg-white border rounded-full text-xs font-bold text-slate-600 flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-orange-500"></span> Kesimhane</span>
                    <span className="px-3 py-1 bg-white border rounded-full text-xs font-bold text-slate-600 flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-blue-500"></span> Montaj</span>
                    <span className="px-3 py-1 bg-white border rounded-full text-xs font-bold text-slate-600 flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-green-500"></span> Sevkiyat</span>
                </div>
            </div>
            
            <div className="flex overflow-x-auto gap-6 pb-4 h-full">
                <StatusColumn title="BEKLEYEN İŞLER" status="Yapılacak" icon={AlertCircle} color="text-orange-600" />
                <StatusColumn title="ÜRETİM AŞAMASI" status="İşlemde" icon={Hammer} color="text-blue-600" />
                <StatusColumn title="SEVKİYAT / BİTEN" status="Tamamlandı" icon={CheckCircle} color="text-green-600" />
            </div>
        </div>
    );
};

// 4. DASHBOARD (ANA EKRAN)
const Dashboard = ({ userData }) => {
    const [stats, setStats] = useState({ total: 0, pending: 0, completed: 0 });

    useEffect(() => {
        if(!userData?.companyName) return;
        const q = query(collection(db, 'tasks'), where('companyName', '==', userData.companyName));
        const unsubscribe = onSnapshot(q, (snapshot) => {
            const all = snapshot.docs.map(d => d.data());
            setStats({
                total: all.length,
                pending: all.filter(t => t.status === 'Yapılacak').length,
                completed: all.filter(t => t.status === 'Tamamlandı').length
            });
        });
        return () => unsubscribe();
    }, [userData]);

    return (
        <div className="max-w-6xl mx-auto">
            <h2 className="text-2xl font-bold text-slate-800 mb-6">Genel Bakış</h2>
            
            {/* Kartlar */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <div className="flex justify-between items-start">
                        <div>
                            <p className="text-xs font-bold text-slate-500 uppercase">Toplam Proje</p>
                            <h3 className="text-3xl font-bold text-slate-800 mt-2">{stats.total}</h3>
                        </div>
                        <div className="p-3 bg-blue-50 rounded-lg text-blue-600"><FileText size={24}/></div>
                    </div>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <div className="flex justify-between items-start">
                        <div>
                            <p className="text-xs font-bold text-slate-500 uppercase">Bekleyen İş</p>
                            <h3 className="text-3xl font-bold text-orange-600 mt-2">{stats.pending}</h3>
                        </div>
                        <div className="p-3 bg-orange-50 rounded-lg text-orange-600"><AlertCircle size={24}/></div>
                    </div>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
                    <div className="flex justify-between items-start">
                        <div>
                            <p className="text-xs font-bold text-slate-500 uppercase">Tamamlanan</p>
                            <h3 className="text-3xl font-bold text-green-600 mt-2">{stats.completed}</h3>
                        </div>
                        <div className="p-3 bg-green-50 rounded-lg text-green-600"><CheckCircle size={24}/></div>
                    </div>
                </div>
                <div className="bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-700 text-white">
                    <div className="flex justify-between items-start">
                        <div>
                            <p className="text-xs font-bold text-slate-400 uppercase">Firma</p>
                            <h3 className="text-lg font-bold mt-2 truncate">{userData?.companyName || 'Yükleniyor'}</h3>
                            <p className="text-xs text-slate-400 mt-1">{userData?.role}</p>
                        </div>
                        <div className="p-3 bg-slate-700 rounded-lg"><Building2 size={24}/></div>
                    </div>
                </div>
            </div>

            {/* Hızlı İşlem Menüsü */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl p-8 text-white relative overflow-hidden group cursor-pointer transition hover:shadow-lg">
                    <div className="relative z-10">
                        <h3 className="text-xl font-bold mb-2">Yeni Hesaplama Başlat</h3>
                        <p className="text-blue-100 text-sm mb-4">Süspansiyon ölçülerini girin ve iş emri oluşturun.</p>
                        <button className="bg-white text-blue-900 px-4 py-2 rounded-lg font-bold text-sm">Modüle Git →</button>
                    </div>
                    <Calculator className="absolute right-4 bottom-4 text-blue-500 opacity-20 group-hover:scale-110 transition duration-300" size={100} />
                </div>
                 <div className="bg-white border border-slate-200 rounded-xl p-8 relative overflow-hidden group cursor-pointer transition hover:shadow-lg">
                    <div className="relative z-10">
                        <h3 className="text-xl font-bold text-slate-800 mb-2">Sevkiyat Listeleri</h3>
                        <p className="text-slate-500 text-sm mb-4">Hazır paketler için malzeme listesi oluşturun.</p>
                         <button className="bg-slate-100 text-slate-800 px-4 py-2 rounded-lg font-bold text-sm">Listele →</button>
                    </div>
                    <Truck className="absolute right-4 bottom-4 text-slate-200 group-hover:scale-110 transition duration-300" size={100} />
                </div>
            </div>
        </div>
    );
};

// --- ANA UYGULAMA (APP) ---
export default function App() {
  const [user, setUser] = useState(null);
  const [userData, setUserData] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');
  const [loading, setLoading] = useState(true);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Load PDF libraries via CDN
  useEffect(() => {
    const loadScript = (src) => {
      return new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) {
          resolve();
          return;
        }
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    };

    Promise.all([
      loadScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"),
      loadScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js")
    ]).then(() => {
      console.log("PDF Libraries loaded");
    }).catch(err => console.error("Failed to load PDF libs", err));
  }, []);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      setUser(currentUser);
      if (currentUser) {
        // Kullanıcı verisini çek (Role, Company Name vb.)
        const q = query(collection(db, 'users'), where('uid', '==', currentUser.uid));
        const querySnapshot = await getDocs(q);
        if(!querySnapshot.empty){
            setUserData(querySnapshot.docs[0].data());
        }
      } else {
        setUserData(null);
      }
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  const handleSignOut = async () => {
    await signOut(auth);
  };

  if (loading) return <div className="h-screen flex items-center justify-center bg-slate-100"><div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900"></div></div>;

  if (!user) {
    return <AuthScreen />;
  }

  // --- LAYOUT ---
  return (
    <div className="flex h-screen bg-slate-100 overflow-hidden font-sans text-slate-900">
      
      {/* Sidebar - Desktop */}
      <aside className="hidden md:flex w-64 bg-slate-900 text-slate-300 flex-col shadow-2xl z-20">
        <div className="p-6 border-b border-slate-800 flex items-center gap-3">
           <div className="bg-yellow-500 p-2 rounded-lg text-slate-900"><Building2 size={24}/></div>
           <div>
               <h1 className="font-bold text-white tracking-tight">ELEVATOR OS</h1>
               <p className="text-[10px] uppercase tracking-wider text-slate-500">SaaS v2.0</p>
           </div>
        </div>

        <nav className="flex-1 p-4 space-y-2">
            <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'dashboard' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'hover:bg-slate-800'}`}>
                <LayoutDashboard size={20}/> <span className="font-medium">Panel</span>
            </button>
            <button onClick={() => setActiveTab('calculate')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'calculate' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'hover:bg-slate-800'}`}>
                <Calculator size={20}/> <span className="font-medium">Hesaplama</span>
            </button>
            <button onClick={() => setActiveTab('tasks')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'tasks' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'hover:bg-slate-800'}`}>
                <ClipboardList size={20}/> <span className="font-medium">Üretim & İşler</span>
            </button>
             <button onClick={() => setActiveTab('team')} className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'team' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'hover:bg-slate-800'}`}>
                <Users size={20}/> <span className="font-medium">Personel</span>
            </button>
        </nav>

        <div className="p-4 border-t border-slate-800">
             <div className="flex items-center gap-3 mb-4 px-2">
                <div className="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center font-bold text-white">
                    {userData?.companyName?.charAt(0) || 'U'}
                </div>
                <div className="flex-1 min-w-0">
                    <p className="text-sm font-bold text-white truncate">{user.email}</p>
                    <p className="text-xs text-slate-500 truncate">{userData?.companyName}</p>
                </div>
             </div>
             <button onClick={handleSignOut} className="w-full flex items-center gap-2 justify-center p-2 text-sm text-red-400 hover:text-red-300 hover:bg-red-400/10 rounded-lg transition">
                 <LogOut size={16}/> Çıkış Yap
             </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col h-screen overflow-hidden relative">
        {/* Mobile Header */}
        <header className="md:hidden bg-white p-4 shadow-sm flex justify-between items-center z-20 relative">
             <div className="flex items-center gap-2 font-bold text-slate-800">
                 <Building2 className="text-yellow-600"/> ELEVATOR OS
             </div>
             <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
                 {isMobileMenuOpen ? <X/> : <Menu/>}
             </button>
        </header>

        {/* Mobile Menu Overlay */}
        {isMobileMenuOpen && (
             <div className="absolute top-16 left-0 w-full bg-slate-900 text-white z-50 p-4 shadow-xl md:hidden">
                <nav className="space-y-2">
                    <button onClick={() => {setActiveTab('dashboard'); setIsMobileMenuOpen(false)}} className="block w-full text-left p-3 rounded hover:bg-slate-800">Panel</button>
                    <button onClick={() => {setActiveTab('calculate'); setIsMobileMenuOpen(false)}} className="block w-full text-left p-3 rounded hover:bg-slate-800">Hesaplama</button>
                    <button onClick={() => {setActiveTab('tasks'); setIsMobileMenuOpen(false)}} className="block w-full text-left p-3 rounded hover:bg-slate-800">Üretim</button>
                    <button onClick={handleSignOut} className="block w-full text-left p-3 text-red-400">Çıkış Yap</button>
                </nav>
             </div>
        )}

        {/* Dynamic View Area */}
        <div className="flex-1 overflow-y-auto p-4 md:p-8 bg-slate-100">
            {activeTab === 'dashboard' && <Dashboard userData={userData} />}
            {activeTab === 'calculate' && <CalculationModule user={user} userData={userData} />}
            {activeTab === 'tasks' && <TaskManager userData={userData} />}
            {activeTab === 'team' && (
                <div className="text-center py-20 bg-white rounded-xl shadow-sm border border-slate-200">
                    <Users size={64} className="mx-auto text-slate-300 mb-4"/>
                    <h2 className="text-xl font-bold text-slate-700">Personel Yönetimi</h2>
                    <p className="text-slate-500 mb-6">Bu modül Demo sürümünde aktif değildir.</p>
                    <button className="bg-slate-200 text-slate-600 px-6 py-2 rounded-full font-bold text-sm cursor-not-allowed">Pro Sürümde Kullanılabilir</button>
                </div>
            )}
        </div>
      </main>
    </div>
  );
}