```react
import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, addDoc, serverTimestamp } from 'firebase/firestore';
import { Settings, BarChart3, Clock, Calendar, Download, LogOut, PlusCircle, Factory, User, CheckCircle2 } from 'lucide-react';

// --- Firebase Initialization ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'loom-system-app';

// --- Helper Functions for Time & Shifts ---
const getProductionInfo = (inputDate = new Date()) => {
  const d = new Date(inputDate);
  const hours = d.getHours();
  
  // If time is between midnight and 7 AM, it belongs to yesterday's production day
  if (hours < 7) {
    d.setDate(d.getDate() - 1);
  }
  
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  
  const shift = (hours >= 7 && hours < 19) ? 'Day' : 'Night';
  
  return { 
    dateString: `${year}-${month}-${day}`, 
    shift: shift 
  };
};

const DAY_SLOTS = ["07:00 - 09:00", "09:00 - 11:00", "11:00 - 13:00", "13:00 - 15:00", "15:00 - 17:00", "17:00 - 19:00"];
const NIGHT_SLOTS = ["19:00 - 21:00", "21:00 - 23:00", "23:00 - 01:00", "01:00 - 03:00", "03:00 - 05:00", "05:00 - 07:00"];

export default function App() {
  const [fbUser, setFbUser] = useState(null);
  const [userRole, setUserRole] = useState(null); // 'admin' or 'user'
  const [records, setRecords] = useState([]);
  const [loading, setLoading] = useState(true);

  // --- Firebase Auth & Data Fetching ---
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();

    const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
      setFbUser(user);
    });
    return () => unsubscribeAuth();
  }, []);

  useEffect(() => {
    if (!fbUser) return;

    const recordsRef = collection(db, 'artifacts', appId, 'public', 'data', 'production_logs');
    
    const unsubscribeData = onSnapshot(recordsRef, 
      (snapshot) => {
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        // Sort by timestamp descending on client side
        data.sort((a, b) => (b.timestamp?.toMillis() || 0) - (a.timestamp?.toMillis() || 0));
        setRecords(data);
        setLoading(false);
      },
      (error) => {
        console.error("Firestore error:", error);
        setLoading(false);
      }
    );

    return () => unsubscribeData();
  }, [fbUser]);

  // --- Login Screen ---
  if (!userRole) {
    return (
      <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
        <div className="bg-white p-8 rounded-2xl shadow-xl max-w-md w-full text-center">
          <Factory className="w-16 h-16 mx-auto text-indigo-600 mb-4" />
          <h1 className="text-2xl font-bold text-gray-800 mb-2">Production Management</h1>
          <p className="text-gray-500 mb-8">Select your portal to continue</p>
          
          <div className="space-y-4">
            <button 
              onClick={() => setUserRole('admin')}
              className="w-full flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-xl transition-all font-semibold"
            >
              <Settings className="w-5 h-5" />
              Admin Dashboard
            </button>
            
            <button 
              onClick={() => setUserRole('user')}
              className="w-full flex items-center justify-center gap-3 bg-emerald-600 hover:bg-emerald-700 text-white p-4 rounded-xl transition-all font-semibold"
            >
              <User className="w-5 h-5" />
              Data Entry Portal
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-100">
      {/* Navbar */}
      <nav className="bg-white shadow-sm border-b px-6 py-4 flex justify-between items-center sticky top-0 z-10">
        <div className="flex items-center gap-2">
          <Factory className="w-6 h-6 text-indigo-600" />
          <span className="font-bold text-lg text-slate-800">
            {userRole === 'admin' ? 'Admin Dashboard' : 'Data Entry Portal'}
          </span>
        </div>
        <button 
          onClick={() => setUserRole(null)}
          className="flex items-center gap-2 text-slate-500 hover:text-red-600 transition-colors font-medium"
        >
          <LogOut className="w-5 h-5" />
          <span>Logout</span>
        </button>
      </nav>

      {/* Main Content */}
      <main className="p-6 max-w-7xl mx-auto">
        {loading ? (
          <div className="flex justify-center items-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
          </div>
        ) : (
          userRole === 'admin' ? <AdminDashboard records={records} /> : <UserDashboard fbUser={fbUser} />
        )}
      </main>
    </div>
  );
}

// ==========================================
// USER DASHBOARD (DATA ENTRY)
// ==========================================
function UserDashboard({ fbUser }) {
  const currentInfo = getProductionInfo(new Date());
  
  const [formData, setFormData] = useState({
    loomId: '1',
    prodDate: currentInfo.dateString,
    shift: currentInfo.shift,
    timeSlot: currentInfo.shift === 'Day' ? DAY_SLOTS[0] : NIGHT_SLOTS[0],
    meters: ''
  });
  
  const [message, setMessage] = useState({ text: '', type: '' });

  const availableSlots = formData.shift === 'Day' ? DAY_SLOTS : NIGHT_SLOTS;

  useEffect(() => {
    setFormData(prev => ({
      ...prev,
      timeSlot: prev.shift === 'Day' ? DAY_SLOTS[0] : NIGHT_SLOTS[0]
    }));
  }, [formData.shift]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.meters || formData.meters <= 0) {
      setMessage({ text: 'Please enter a valid meter quantity.', type: 'error' });
      return;
    }

    try {
      const recordsRef = collection(db, 'artifacts', appId, 'public', 'data', 'production_logs');
      await addDoc(recordsRef, {
        ...formData,
        meters: Number(formData.meters),
        timestamp: serverTimestamp(),
        userId: fbUser.uid
      });
      
      setMessage({ text: 'Record saved successfully!', type: 'success' });
      setFormData(prev => ({ ...prev, meters: '' })); 
      setTimeout(() => setMessage({ text: '', type: '' }), 3000);
    } catch (error) {
      console.error("Error adding document: ", error);
      setMessage({ text: 'Error saving record. Please try again.', type: 'error' });
    }
  };

  return (
    <div className="max-w-2xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
      <div className="bg-indigo-600 p-6 text-white text-center">
        <h2 className="text-2xl font-bold mb-2">Record Loom Production</h2>
        <p className="text-indigo-100 flex items-center justify-center gap-2">
          <Calendar className="w-4 h-4" /> Production Day: {currentInfo.dateString}
        </p>
      </div>

      <form onSubmit={handleSubmit} className="p-6 space-y-6">
        {message.text && (
          <div className={`p-4 rounded-lg flex items-center gap-2 ${message.type === 'success' ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'}`}>
            <CheckCircle2 className="w-5 h-5" />
            {message.text}
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Loom Number</label>
            <select 
              value={formData.loomId}
              onChange={(e) => setFormData({...formData, loomId: e.target.value})}
              className="w-full p-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"
            >
              {Array.from({ length: 150 }, (_, i) => i + 1).map(num => (
                <option key={num} value={num}>Loom {num}</option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Production Date</label>
            <input 
              type="date" 
              value={formData.prodDate}
              onChange={(e) => setFormData({...formData, prodDate: e.target.value})}
              className="w-full p-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Shift</label>
            <select 
              value={formData.shift}
              onChange={(e) => setFormData({...formData, shift: e.target.value})}
              className="w-full p-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"
            >
              <option value="Day">Day Shift (7 AM - 7 PM)</option>
              <option value="Night">Night Shift (7 PM - 7 AM)</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">Time Slot</label>
            <select 
              value={formData.timeSlot}
              onChange={(e) => setFormData({...formData, timeSlot: e.target.value})}
              className="w-full p-3 border border-slate-300 rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none"
            >
              {availableSlots.map(slot => (
                <option key={slot} value={slot}>{slot}</option>
              ))}
            </select>
          </div>
        </div>

        <div className="pt-4 border-t border-slate-100">
          <label className="block text-lg font-medium text-slate-700 mb-2">Production (Meters)</label>
          <input 
            type="number" 
            placeholder="Enter meters here..."
            value={formData.meters}
            onChange={(e) => setFormData({...formData, meters: e.target.value})}
            className="w-full p-4 text-xl border-2 border-indigo-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
          />
        </div>

        <button 
          type="submit"
          className="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white p-4 rounded-xl text-lg font-bold transition-all shadow-md hover:shadow-lg"
        >
          <PlusCircle className="w-6 h-6" />
          Save Record
        </button>
      </form>
    </div>
  );
}

// ==========================================
// ADMIN DASHBOARD
// ==========================================
function AdminDashboard({ records }) {
  const currentInfo = getProductionInfo(new Date());
  
  const [filters, setFilters] = useState({
    startDate: currentInfo.dateString,
    endDate: currentInfo.dateString,
    loomId: 'all',
    shift: 'all'
  });

  const filteredRecords = useMemo(() => {
    return records.filter(record => {
      const matchStart = record.prodDate >= filters.startDate;
      const matchEnd = record.prodDate <= filters.endDate;
      const matchLoom = filters.loomId === 'all' || record.loomId === filters.loomId;
      const matchShift = filters.shift === 'all' || record.shift === filters.shift;
      return matchStart && matchEnd && matchLoom && matchShift;
    });
  }, [records, filters]);

  const totalMeters = filteredRecords.reduce((sum, r) => sum + (Number(r.meters) || 0), 0);
  const activeLooms = new Set(filteredRecords.map(r => r.loomId)).size;
  const totalEntries = filteredRecords.length;

  const exportToCSV = () => {
    if (filteredRecords.length === 0) return;
    
    const headers = ['Date', 'Shift', 'Time Slot', 'Loom Number', 'Meters Produced'];
    
    const csvContent = [
      headers.join(','),
      ...filteredRecords.map(r => `${r.prodDate},${r.shift},${r.timeSlot},Loom ${r.loomId},${r.meters}`)
    ].join('\n');

    const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.setAttribute("href", url);
    link.setAttribute("download", `data_${filters.startDate}_to_${filters.endDate}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <div className="space-y-6">
      
      {/* Filters Card */}
      <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
        <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
          <Settings className="w-5 h-5 text-indigo-600" /> Filters & Search
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">Start Date</label>
            <input 
              type="date" value={filters.startDate} 
              onChange={e => setFilters({...filters, startDate: e.target.value})}
              className="w-full p-2 border border-slate-300 rounded-lg outline-none focus:border-indigo-500"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">End Date</label>
            <input 
              type="date" value={filters.endDate} 
              onChange={e => setFilters({...filters, endDate: e.target.value})}
              className="w-full p-2 border border-slate-300 rounded-lg outline-none focus:border-indigo-500"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">Shift</label>
            <select 
              value={filters.shift}
              onChange={e => setFilters({...filters, shift: e.target.value})}
              className="w-full p-2 border border-slate-300 rounded-lg outline-none focus:border-indigo-500"
            >
              <option value="all">All Shifts</option>
              <option value="Day">Day Shift</option>
              <option value="Night">Night Shift</option>
            </select>
          </div>
          <div>
            <label className="block text-xs font-medium text-slate-500 mb-1">Loom</label>
            <select 
              value={filters.loomId}
              onChange={e => setFilters({...filters, loomId: e.target.value})}
              className="w-full p-2 border border-slate-300 rounded-lg outline-none focus:border-indigo-500"
            >
              <option value="all">All Looms</option>
              {Array.from({ length: 150 }, (_, i) => i + 1).map(num => (
                <option key={num} value={String(num)}>Loom {num}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
          <div className="p-4 bg-indigo-100 text-indigo-600 rounded-xl">
            <BarChart3 className="w-8 h-8" />
          </div>
          <div>
            <p className="text-sm font-medium text-slate-500">Total Meters Produced</p>
            <p className="text-2xl font-bold text-slate-800">{totalMeters.toLocaleString()} <span className="text-sm text-slate-500 font-normal">m</span></p>
          </div>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
          <div className="p-4 bg-emerald-100 text-emerald-600 rounded-xl">
            <Factory className="w-8 h-8" />
          </div>
          <div>
            <p className="text-sm font-medium text-slate-500">Active Looms</p>
            <p className="text-2xl font-bold text-slate-800">{activeLooms} <span className="text-sm text-slate-500 font-normal">/ 150</span></p>
          </div>
        </div>

        <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
          <div className="p-4 bg-blue-100 text-blue-600 rounded-xl">
            <Clock className="w-8 h-8" />
          </div>
          <div>
            <p className="text-sm font-medium text-slate-500">Total Records</p>
            <p className="text-2xl font-bold text-slate-800">{totalEntries} <span className="text-sm text-slate-500 font-normal">entries</span></p>
          </div>
        </div>
      </div>

      {/* Data Table */}
      <div className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-6 border-b border-slate-100 flex justify-between items-center bg-slate-50">
          <h3 className="text-lg font-bold text-slate-800">Production Data Log</h3>
          <button 
            onClick={exportToCSV}
            className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
          >
            <Download className="w-4 h-4" />
            Export Excel (data.csv)
          </button>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="bg-slate-100 text-slate-600 text-sm border-b">
                <th className="p-4 font-medium">Date</th>
                <th className="p-4 font-medium">Shift</th>
                <th className="p-4 font-medium">Time Slot</th>
                <th className="p-4 font-medium">Loom</th>
                <th className="p-4 font-medium">Meters</th>
              </tr>
            </thead>
            <tbody>
              {filteredRecords.length > 0 ? (
                filteredRecords.map((record) => (
                  <tr key={record.id} className="border-b border-slate-50 hover:bg-slate-50 transition-colors">
                    <td className="p-4 text-slate-800">{record.prodDate}</td>
                    <td className="p-4">
                      <span className={`px-2 py-1 rounded text-xs font-medium ${record.shift === 'Day' ? 'bg-orange-100 text-orange-700' : 'bg-slate-800 text-slate-200'}`}>
                        {record.shift}
                      </span>
                    </td>
                    <td className="p-4 text-slate-600">{record.timeSlot}</td>
                    <td className="p-4 font-medium text-indigo-600">Loom {record.loomId}</td>
                    <td className="p-4 font-bold text-emerald-600">{record.meters} m</td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan="5" className="p-8 text-center text-slate-500">
                    No production records found for the selected filters.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}


```