import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from "firebase/app";
import { 
  getAuth, 
  onAuthStateChanged, 
  createUserWithEmailAndPassword, 
  signInWithEmailAndPassword, 
  signOut 
} from "firebase/auth";
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  getDoc, 
  query, 
  where, 
  orderBy, 
  onSnapshot,
  deleteDoc
} from "firebase/firestore";

// --- Firebase Configuration ---
// ကျေးဇူးပြု၍ ဤနေရာတွင် သင်၏ Firebase config ကို ထည့်သွင်းပါ
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// --- Initialize Firebase ---
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// --- Main App Component ---
export default function App() {
  const [authState, setAuthState] = useState({ status: 'loading', user: null, isActive: false });
  const [currentView, setCurrentView] = useState('home'); // 'home', 'add_edit', 'print'
  const [selectedJob, setSelectedJob] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        // User is logged in, check if their account is active
        const userDocRef = doc(db, 'users', user.uid);
        const userDocSnap = await getDoc(userDocRef);
        if (userDocSnap.exists() && userDocSnap.data().isActive) {
          setAuthState({ status: 'authenticated', user: user, isActive: true });
        } else {
          setAuthState({ status: 'pending_activation', user: user, isActive: false });
        }
      } else {
        setAuthState({ status: 'unauthenticated', user: null, isActive: false });
      }
    });
    return () => unsubscribe();
  }, []);
  
  const navigateTo = (view, job = null) => {
    setSelectedJob(job);
    setCurrentView(view);
  };

  const renderContent = () => {
    const { status } = authState;
    
    if (status === 'loading') return <SplashScreen />;
    if (status === 'unauthenticated') return <LoginScreen />;
    if (status === 'pending_activation') return <PendingActivationScreen />;
    
    if (status === 'authenticated') {
      switch (currentView) {
        case 'add_edit':
          return <AddEditJobPage job={selectedJob} navigateTo={navigateTo} />;
        case 'print':
           return <PrintableView job={selectedJob} navigateTo={navigateTo} />;
        case 'home':
        default:
          return <HomePage navigateTo={navigateTo} />;
      }
    }
    
    return <LoginScreen />; // Fallback
  };

  return <div className="min-h-screen bg-gray-100 font-sans">{renderContent()}</div>;
}

// --- Screens/Components ---

const SplashScreen = () => (
  <div className="flex flex-col justify-center items-center min-h-screen bg-teal-600 text-white">
    <svg className="w-20 h-20 mb-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
    <h1 className="text-3xl font-bold">KZT Mobile Service</h1>
    <p className="mt-2">Loading...</p>
  </div>
);

const LoginScreen = ({ message }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(message || '');
  const [isLoading, setIsLoading] = useState(false);
  const [isRegister, setIsRegister] = useState(false);

  const handleAuth = async (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError('Email နှင့် Password ထည့်သွင်းရန် လိုအပ်ပါသည်');
      return;
    }
    setIsLoading(true);
    setError('');
    
    try {
      if (isRegister) {
        // Registration Logic
        if (password !== e.target.confirmPassword.value) {
            setError('စကားဝှက်များ တူညီမှုမရှိပါ');
            setIsLoading(false);
            return;
        }
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        await setDoc(doc(db, "users", userCredential.user.uid), {
          uid: userCredential.user.uid,
          email: email,
          isActive: false,
          createdAt: new Date(),
        });
        await signOut(auth);
        alert('Register အောင်မြင်ပါသည်။ Admin activate လုပ်သည်အထိ စောင့်ဆိုင်းပါ။');
        setIsRegister(false);
      } else {
        // Login Logic
        await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-50">
      <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md">
        <div className="text-center">
            <svg className="w-16 h-16 mx-auto text-teal-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
            <h2 className="mt-6 text-3xl font-extrabold text-gray-900">{isRegister ? 'Register ပြုလုပ်ရန်' : 'Login ဝင်ရောက်ရန်'}</h2>
        </div>
        <form className="space-y-6" onSubmit={handleAuth}>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email Address" required className="w-full px-4 py-2 text-gray-700 bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" />
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" required className="w-full px-4 py-2 text-gray-700 bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" />
          {isRegister && <input type="password" name="confirmPassword" placeholder="Confirm Password" required className="w-full px-4 py-2 text-gray-700 bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" />}
          {error && <p className="text-sm text-red-600">{error}</p>}
          <button type="submit" disabled={isLoading} className="w-full px-4 py-2 font-bold text-white bg-teal-500 rounded-md hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-500 disabled:bg-teal-300">
            {isLoading ? 'Loading...' : (isRegister ? 'Register' : 'Login')}
          </button>
        </form>
        <div className="text-sm text-center">
          <button onClick={() => setIsRegister(!isRegister)} className="font-medium text-teal-600 hover:text-teal-500">
            {isRegister ? 'အကောင့်ရှိပြီးသားလား? Login ဝင်ရန်' : 'အကောင့်မရှိသေးဘူးလား? Register လုပ်ရန်'}
          </button>
        </div>
      </div>
    </div>
  );
};


const PendingActivationScreen = () => (
  <div className="flex flex-col items-center justify-center min-h-screen p-6 text-center bg-gray-100">
     <svg className="w-20 h-20 text-orange-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <h2 className="mt-6 text-2xl font-bold text-gray-800">Account Activation Pending</h2>
    <p className="mt-2 text-gray-600">သင်၏ အကောင့်ကို Register ပြုလုပ်ပြီးပါပြီ။ Admin မှ Activate လုပ်ပေးသည်အထိ စောင့်ဆိုင်းပေးပါ။</p>
    <button onClick={() => signOut(auth)} className="px-4 py-2 mt-6 font-semibold text-teal-600 bg-white border border-teal-500 rounded-md hover:bg-teal-50">Logout</button>
  </div>
);

const HomePage = ({ navigateTo }) => {
  const [jobs, setJobs] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const userId = auth.currentUser.uid;

  useEffect(() => {
    const q = query(
      collection(db, "service_jobs"), 
      where("userId", "==", userId),
      orderBy("dateAdded", "desc")
    );
    
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const jobsData = [];
      querySnapshot.forEach((doc) => {
        jobsData.push(ServiceJob.fromMap(doc.data()));
      });
      setJobs(jobsData);
      setIsLoading(false);
    }, (error) => {
      console.error("Error fetching jobs: ", error);
      setIsLoading(false);
    });

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

  const filteredJobs = jobs.filter(job => 
    job.customerName.toLowerCase().includes(searchQuery.toLowerCase()) ||
    job.phoneModel.toLowerCase().includes(searchQuery.toLowerCase()) ||
    job.voucherNumber.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const getStatusColor = (status) => {
    switch (status) {
      case 'ပြင်ပြီး': return 'bg-green-500';
      case 'ပြင်ဆင်နေဆဲ': return 'bg-orange-500';
      case 'ပြင်မရ': return 'bg-red-500';
      case 'ပြန်ပေးပြီး': return 'bg-gray-500';
      default: return 'bg-gray-500';
    }
  };

  const deleteJob = (id) => {
    if (window.confirm('ဤစာရင်းကို ဖျက်ရန်သေချာလား?')) {
       deleteDoc(doc(db, "service_jobs", id));
    }
  }

  return (
    <div className="container p-4 mx-auto">
      <header className="flex items-center justify-between pb-4 mb-4 border-b">
         <h1 className="text-3xl font-bold text-gray-800">Service စာရင်းများ</h1>
         <button onClick={() => signOut(auth)} className="px-4 py-2 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600">Logout</button>
      </header>

      <div className="mb-4">
        <input 
          type="text" 
          placeholder="အမည်၊ မော်ဒယ်၊ ဘောင်ချာနံပါတ်ဖြင့် ရှာရန်..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full p-2 border rounded-md"
        />
      </div>

      {isLoading ? (
        <div className="text-center">Loading...</div>
      ) : (
        <div className="space-y-4">
          {filteredJobs.length > 0 ? filteredJobs.map(job => (
            <div key={job.id} className="p-4 bg-white rounded-lg shadow-sm">
              <div className="flex items-start justify-between">
                <div>
                   <p className="font-bold text-gray-800">{job.customerName}</p>
                   <p className="text-sm text-gray-600">{job.phoneModel}</p>
                   <p className="mt-2 text-sm text-gray-500">{job.problemDescription}</p>
                </div>
                <div className="text-right">
                  <span className={`px-2 py-1 text-xs font-semibold text-white rounded-full ${getStatusColor(job.status)}`}>{job.status}</span>
                  <p className="mt-1 font-semibold text-teal-600">{job.estimatedCost} Ks</p>
                </div>
              </div>
               <div className="flex items-center justify-between mt-4 text-xs text-gray-500">
                <p>Voucher: {job.voucherNumber}</p>
                <div className="flex items-center space-x-2">
                   <button onClick={() => navigateTo('print', job)} className="text-blue-500 hover:underline">Print</button>
                   <button onClick={() => navigateTo('add_edit', job)} className="text-yellow-500 hover:underline">Edit</button>
                   <button onClick={() => deleteJob(job.id)} className="text-red-500 hover:underline">Delete</button>
                </div>
               </div>
            </div>
          )) : (
             <div className="py-12 text-center text-gray-500">စာရင်းများ မရှိသေးပါ။</div>
          )}
        </div>
      )}
      <button onClick={() => navigateTo('add_edit')} className="fixed px-6 py-3 font-bold text-white bg-teal-500 rounded-full shadow-lg bottom-8 right-8 hover:bg-teal-600">+</button>
    </div>
  );
};

const AddEditJobPage = ({ job, navigateTo }) => {
  const [formData, setFormData] = useState({
    voucherNumber: job?.voucherNumber || `S-${new Date().getTime().toString().slice(-6)}`,
    customerName: job?.customerName || '',
    phoneNumber: job?.phoneNumber || '',
    phoneModel: job?.phoneModel || '',
    problemDescription: job?.problemDescription || '',
    estimatedCost: job?.estimatedCost || 0,
    status: job?.status || 'ပြင်ဆင်နေဆဲ',
  });
  const [isLoading, setIsLoading] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: name === 'estimatedCost' ? parseFloat(value) || 0 : value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    
    const userId = auth.currentUser.uid;
    const id = job?.id || new Uuid().v4();
    const jobData = { ...formData, userId, id, dateAdded: job?.dateAdded || new Date() };
    
    try {
      await setDoc(doc(db, "service_jobs", id), ServiceJob.fromMap(jobData).toMap());
      navigateTo('home');
    } catch (error) {
      console.error("Error saving job: ", error);
      alert("Error saving job.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
     <div className="max-w-2xl p-8 mx-auto my-10 bg-white rounded-lg shadow-md">
        <h2 className="mb-6 text-2xl font-bold text-gray-800">{job ? 'Service ပြင်ဆင်ရန်' : 'Service အသစ်ထည့်ရန်'}</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
           {Object.keys(formData).map(key => {
             if (key === 'status') return null; // Handle dropdown separately
             const isNumber = key === 'estimatedCost';
             const isTextarea = key === 'problemDescription';
             return (
               <div key={key}>
                 <label className="block mb-1 text-sm font-medium text-gray-700 capitalize">{key.replace(/([A-Z])/g, ' $1')}</label>
                 {isTextarea ? (
                    <textarea name={key} value={formData[key]} onChange={handleChange} rows="3" className="w-full p-2 border rounded-md"></textarea>
                 ) : (
                    <input type={isNumber ? 'number' : 'text'} name={key} value={formData[key]} onChange={handleChange} className="w-full p-2 border rounded-md" />
                 )}
               </div>
             );
           })}
           <div>
              <label className="block mb-1 text-sm font-medium text-gray-700">Status</label>
              <select name="status" value={formData.status} onChange={handleChange} className="w-full p-2 border rounded-md">
                 <option>ပြင်ဆင်နေဆဲ</option>
                 <option>ပြင်ပြီး</option>
                 <option>ပြင်မရ</option>
                 <option>ပြန်ပေးပြီး</option>
              </select>
           </div>
           <div className="flex space-x-4">
              <button type="submit" disabled={isLoading} className="px-4 py-2 font-bold text-white bg-teal-500 rounded-md hover:bg-teal-600 disabled:bg-teal-300">
                {isLoading ? 'Saving...' : 'Save Job'}
              </button>
              <button type="button" onClick={() => navigateTo('home')} className="px-4 py-2 font-bold text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300">Cancel</button>
           </div>
        </form>
     </div>
  );
};

const PrintableView = ({ job, navigateTo }) => {
   const printRef = useRef();

   useEffect(() => {
     // A little hack to trigger print dialog once component is ready
     const timer = setTimeout(() => {
        window.print();
     }, 500);
     return () => clearTimeout(timer);
   }, []);

   return (
      <div className="print-container">
         <div ref={printRef} className="p-8 mx-auto my-10 bg-white shadow-lg a5-paper">
             <h1 className="text-3xl font-bold">KZT Mobile Service</h1>
             <p className="text-sm text-gray-500">Service ဘောင်ချာ</p>
             <div className="my-4 border-t"></div>
             <div className="grid grid-cols-2 gap-4">
               <div><strong className="block">ဘောင်ချာနံပါတ်:</strong> {job.voucherNumber}</div>
               <div><strong className="block">ရက်စွဲ:</strong> {new Intl.DateTimeFormat('en-CA').format(job.dateAdded)}</div>
               <div><strong className="block">နာမည်:</strong> {job.customerName}</div>
               <div><strong className="block">ဖုန်းနံပါတ်:</strong> {job.phoneNumber}</div>
               <div className="col-span-2"><strong className="block">ဖုန်းမော်ဒယ်:</strong> {job.phoneModel}</div>
             </div>
             <div className="my-4 border-t"></div>
             <div>
                <strong className="block">ဖြစ်သော ပြဿနာ:</strong>
                <p className="mt-1">{job.problemDescription}</p>
             </div>
             <div className="my-4 border-t"></div>
              <div className="flex justify-between">
                <div><strong className="block">အခြေအနေ:</strong> {job.status}</div>
                <div className="text-right"><strong className="block">ကုန်ကျစရိတ်:</strong> <span className="text-xl font-bold">{job.estimatedCost} Ks</span></div>
              </div>
               <div className="mt-16 text-center text-gray-600">
                 <p>Contact: 09784568007</p>
                 <p>ကျေးဇူးတင်ပါသည်။</p>
                 <p className="mt-4 text-xs">Developed by N.M.H</p>
               </div>
         </div>
          <div className="flex justify-center mt-4 no-print">
            <button onClick={() => navigateTo('home')} className="px-4 py-2 mr-4 font-bold text-gray-700 bg-gray-300 rounded-md">Back</button>
            <button onClick={() => window.print()} className="px-4 py-2 font-bold text-white bg-teal-500 rounded-md">Print</button>
          </div>
          <style jsx global>{`
             @media print {
               .no-print { display: none; }
               body { -webkit-print-color-adjust: exact; }
             }
             .a5-paper {
                width: 148mm;
                min-height: 210mm;
                margin: auto;
             }
          `}</style>
      </div>
   )
}