import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Upload, Download, FileSpreadsheet, Lock, User, 
  Search, CheckCircle2, XCircle, AlertCircle, Save,
  FileJson, Shield, ShieldAlert
} from 'lucide-react';

// --- Utility Functions ---

// Custom CSV Parser to handle quotes and commas properly
function parseCSV(text) {
  // Strip BOM if present
  if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1);
  
  let p = '', row = [''], ret = [row], i = 0, r = 0, s = !0, l;
  for (l of text) {
    if ('"' === l) {
      if (s && l === p) row[i] += l;
      s = !s;
    } else if (',' === l && s) l = row[++i] = '';
    else if ('\n' === l && s) {
      if ('\r' === p) row[i] = row[i].slice(0, -1);
      row = ret[++r] = [l = '']; i = 0;
    } else row[i] += l;
    p = l;
  }
  
  // Clean up empty last rows
  return ret.filter(r => r.length > 1 || r[0].trim() !== '');
}

export default function App() {
  // --- State ---
  const [authRole, setAuthRole] = useState('none'); // 'none', 'viewer', 'admin'
  const [passwordInput, setPasswordInput] = useState('');
  const [authError, setAuthError] = useState('');
  
  const [masterData, setMasterData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState('All');
  
  const fileInputRef = useRef(null);
  const importInputRef = useRef(null);

  // --- Authentication ---
  const handleLogin = (e) => {
    e.preventDefault();
    if (passwordInput === 'WC2026!') {
      setAuthRole('admin');
      setAuthError('');
    } else if (passwordInput === 'Viewer2026!') {
      setAuthRole('viewer');
      setAuthError('');
    } else {
      setAuthError('Invalid password. Please try again.');
    }
  };

  const handleLogout = () => {
    setAuthRole('none');
    setPasswordInput('');
    setMasterData([]);
  };

  // --- Data Handling ---
  const handleCSVUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      const csvText = event.target.result;
      const rows = parseCSV(csvText);
      
      if (rows.length < 2) {
        alert('Invalid or empty CSV file.');
        return;
      }

      const headers = rows[0].map(h => h.trim());
      const deviceNameIdx = headers.indexOf('DeviceName');
      
      if (deviceNameIdx === -1) {
        alert('Could not find "DeviceName" column in CSV.');
        return;
      }

      const newData = [];
      for (let i = 1; i < rows.length; i++) {
        const rowData = rows[i];
        const record = {};
        headers.forEach((h, index) => {
          record[h] = rowData[index] ? rowData[index].trim() : '';
        });
        
        // Add manual tracking fields if they don't exist
        record.ManualNotes = '';
        record.AdminAction = '';
        newData.push(record);
      }

      mergeData(newData);
    };
    reader.readAsText(file);
    e.target.value = null; // Reset input
  };

  const mergeData = (newData) => {
    setMasterData(prevData => {
      const dataMap = new Map();
      
      // Load existing into map to preserve manual fields
      prevData.forEach(item => {
        dataMap.set(item.DeviceName, item);
      });

      // Merge new data
      newData.forEach(item => {
        if (dataMap.has(item.DeviceName)) {
          const existing = dataMap.get(item.DeviceName);
          dataMap.set(item.DeviceName, {
            ...existing,
            ...item,
            // Explicitly preserve manual fields over CSV blanks
            ManualNotes: existing.ManualNotes || '',
            AdminAction: existing.AdminAction || ''
          });
        } else {
          dataMap.set(item.DeviceName, item);
        }
      });

      return Array.from(dataMap.values());
    });
  };

  const handleExportDB = () => {
    const dataStr = JSON.stringify(masterData, null, 2);
    const blob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `Intune_MasterDB_${new Date().toISOString().split('T')[0]}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleImportDB = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const data = JSON.parse(event.target.result);
        if (Array.isArray(data)) {
          setMasterData(data);
        } else {
          alert('Invalid JSON format.');
        }
      } catch (err) {
        alert('Error parsing JSON database file.');
      }
    };
    reader.readAsText(file);
    e.target.value = null; // Reset input
  };

  const updateRecord = (deviceName, field, value) => {
    setMasterData(prevData => 
      prevData.map(item => 
        item.DeviceName === deviceName ? { ...item, [field]: value } : item
      )
    );
  };

  // --- Computations & Filtering ---
  const filteredData = useMemo(() => {
    return masterData.filter(item => {
      const matchesSearch = 
        (item.DeviceName || '').toLowerCase().includes(searchTerm.toLowerCase()) ||
        (item.UserPrincipalName || '').toLowerCase().includes(searchTerm.toLowerCase());
      
      const status = item.AppInstallState_loc || 'Unknown';
      const matchesFilter = filterStatus === 'All' || status === filterStatus;
      
      return matchesSearch && matchesFilter;
    });
  }, [masterData, searchTerm, filterStatus]);

  const stats = useMemo(() => {
    const s = { total: masterData.length, installed: 0, failed: 0, pending: 0 };
    masterData.forEach(item => {
      const state = item.AppInstallState_loc;
      if (state === 'Installed') s.installed++;
      else if (state === 'Failed') s.failed++;
      else if (state === 'Install Pending') s.pending++;
    });
    return s;
  }, [masterData]);

  // --- Views ---
  if (authRole === 'none') {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
        <div className="bg-white p-8 rounded-xl shadow-lg max-w-md w-full">
          <div className="flex flex-col items-center mb-6">
            <div className="h-16 w-16 bg-blue-600 rounded-full flex items-center justify-center mb-4">
              <Lock className="text-white h-8 w-8" />
            </div>
            <h1 className="text-2xl font-bold text-slate-800">Deployment Tracker</h1>
            <p className="text-slate-500 text-sm mt-2 text-center">
              Please enter your access password.
            </p>
          </div>
          
          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <input
                type="password"
                placeholder="Password"
                className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all"
                value={passwordInput}
                onChange={(e) => setPasswordInput(e.target.value)}
              />
            </div>
            {authError && <p className="text-red-500 text-sm">{authError}</p>}
            <button 
              type="submit"
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-colors"
            >
              Access Dashboard
            </button>
          </form>
          
          <div className="mt-6 border-t pt-4">
            <p className="text-xs text-slate-400 text-center">
              GlobalProtect Intune Management Console
            </p>
          </div>
        </div>
      </div>
    );
  }

  const isAdmin = authRole === 'admin';

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col font-sans">
      {/* Header */}
      <header className="bg-white shadow-sm border-b px-6 py-4 flex items-center justify-between sticky top-0 z-10">
        <div className="flex items-center gap-3">
          <FileSpreadsheet className="text-blue-600 h-6 w-6" />
          <h1 className="text-xl font-bold text-slate-800">GlobalProtect Tracker</h1>
          <span className={`text-xs px-2 py-1 rounded-full font-medium ${isAdmin ? 'bg-purple-100 text-purple-700' : 'bg-slate-100 text-slate-600'}`}>
            {isAdmin ? 'Admin Mode (R/W)' : 'Viewer Mode (R/O)'}
          </span>
        </div>
        <button 
          onClick={handleLogout}
          className="text-slate-500 hover:text-slate-800 text-sm font-medium transition-colors"
        >
          Logout
        </button>
      </header>

      <main className="flex-1 p-6 max-w-[1600px] mx-auto w-full flex flex-col gap-6">
        
        {/* Actions & Stats Row */}
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
          {/* Action Card */}
          <div className="bg-white p-4 rounded-xl shadow-sm border border-slate-200 flex flex-col gap-3">
            <h3 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Data Management</h3>
            {isAdmin && (
              <>
                <button 
                  onClick={() => fileInputRef.current?.click()}
                  className="flex items-center justify-center gap-2 bg-blue-50 text-blue-700 hover:bg-blue-100 py-2 rounded-lg text-sm font-medium transition-colors border border-blue-200"
                >
                  <Upload className="h-4 w-4" /> Import Intune CSV
                </button>
                <input type="file" accept=".csv" className="hidden" ref={fileInputRef} onChange={handleCSVUpload} />
              </>
            )}
            
            <div className="grid grid-cols-2 gap-2 mt-auto">
              <button 
                onClick={() => importInputRef.current?.click()}
                className="flex items-center justify-center gap-1 bg-slate-50 text-slate-600 hover:bg-slate-100 py-2 rounded-lg text-xs font-medium transition-colors border border-slate-200"
              >
                <FileJson className="h-3 w-3" /> Load DB
              </button>
              <input type="file" accept=".json" className="hidden" ref={importInputRef} onChange={handleImportDB} />
              
              <button 
                onClick={handleExportDB}
                className="flex items-center justify-center gap-1 bg-slate-50 text-slate-600 hover:bg-slate-100 py-2 rounded-lg text-xs font-medium transition-colors border border-slate-200"
              >
                <Download className="h-3 w-3" /> Save DB
              </button>
            </div>
          </div>

          {/* Stats Cards */}
          <div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200 flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-slate-500">Total Devices</p>
              <p className="text-3xl font-bold text-slate-800">{stats.total}</p>
            </div>
            <div className="h-12 w-12 bg-slate-100 rounded-full flex items-center justify-center">
              <Search className="h-6 w-6 text-slate-600" />
            </div>
          </div>

          <div className="bg-white p-5 rounded-xl shadow-sm border border-green-200 flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-green-600">Installed Successfully</p>
              <p className="text-3xl font-bold text-green-700">{stats.installed}</p>
            </div>
            <div className="h-12 w-12 bg-green-50 rounded-full flex items-center justify-center">
              <CheckCircle2 className="h-6 w-6 text-green-600" />
            </div>
          </div>

          <div className="bg-white p-5 rounded-xl shadow-sm border border-red-200 flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-red-600">Installation Failed</p>
              <p className="text-3xl font-bold text-red-700">{stats.failed}</p>
            </div>
            <div className="h-12 w-12 bg-red-50 rounded-full flex items-center justify-center">
              <XCircle className="h-6 w-6 text-red-600" />
            </div>
          </div>
        </div>

        {/* Toolbar */}
        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-white p-4 rounded-xl shadow-sm border border-slate-200">
          <div className="relative w-full sm:w-96">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
            <input 
              type="text" 
              placeholder="Search by Hostname or Email..." 
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div className="flex items-center gap-2 w-full sm:w-auto">
            <span className="text-sm text-slate-500 font-medium">Filter Status:</span>
            <select 
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="All">All Statuses</option>
              <option value="Installed">Installed</option>
              <option value="Failed">Failed</option>
              <option value="Install Pending">Pending</option>
            </select>
          </div>
        </div>

        {/* Excel-like Table */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse text-sm whitespace-nowrap">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-200 text-slate-600 font-semibold">
                  <th className="px-4 py-3">Hostname</th>
                  <th className="px-4 py-3">Email Address</th>
                  <th className="px-4 py-3">OS Platform</th>
                  <th className="px-4 py-3">GP Version</th>
                  <th className="px-4 py-3">Last Seen</th>
                  <th className="px-4 py-3">Install Status</th>
                  <th className="px-4 py-3">Error Code</th>
                  <th className="px-4 py-3 bg-blue-50 border-l border-blue-100">Notes (Manual)</th>
                  <th className="px-4 py-3 bg-blue-50">Action (Manual)</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredData.length === 0 ? (
                  <tr>
                    <td colSpan="9" className="px-4 py-8 text-center text-slate-400">
                      {masterData.length === 0 
                        ? "No data loaded. Import an Intune CSV or load your Master DB." 
                        : "No matching records found."}
                    </td>
                  </tr>
                ) : (
                  filteredData.map((row, idx) => {
                    const status = row.AppInstallState_loc;
                    let statusColor = "bg-slate-100 text-slate-700";
                    if (status === 'Installed') statusColor = "bg-green-100 text-green-800 border-green-200";
                    else if (status === 'Failed') statusColor = "bg-red-100 text-red-800 border-red-200";
                    else if (status === 'Install Pending') statusColor = "bg-yellow-100 text-yellow-800 border-yellow-200";

                    return (
                      <tr key={row.DeviceName || idx} className="hover:bg-slate-50 transition-colors group">
                        <td className="px-4 py-3 font-medium text-slate-800">{row.DeviceName}</td>
                        <td className="px-4 py-3 text-slate-600">{row.UserPrincipalName}</td>
                        <td className="px-4 py-3 text-slate-500 text-xs">{row.Platform}</td>
                        <td className="px-4 py-3 text-slate-600">{row.AppVersion}</td>
                        <td className="px-4 py-3 text-slate-500">{row.LastModifiedDateTime}</td>
                        <td className="px-4 py-3">
                          <span className={`px-2.5 py-1 rounded-md text-xs font-semibold border ${statusColor}`}>
                            {status || 'Unknown'}
                          </span>
                        </td>
                        <td className="px-4 py-3 font-mono text-xs text-slate-500" title={row.AppInstallStateDetails_loc}>
                          {row.HexErrorCode || '-'}
                        </td>
                        <td className="px-4 py-2 border-l border-slate-100 bg-blue-50/30">
                          {isAdmin ? (
                            <input 
                              type="text" 
                              value={row.ManualNotes || ''}
                              onChange={(e) => updateRecord(row.DeviceName, 'ManualNotes', e.target.value)}
                              placeholder="Add note..."
                              className="w-full bg-white border border-slate-200 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400 transition-all placeholder:text-slate-300"
                            />
                          ) : (
                            <span className="text-slate-600">{row.ManualNotes || '-'}</span>
                          )}
                        </td>
                        <td className="px-4 py-2 bg-blue-50/30">
                          {isAdmin ? (
                            <select
                              value={row.AdminAction || ''}
                              onChange={(e) => updateRecord(row.DeviceName, 'AdminAction', e.target.value)}
                              className={`w-full bg-white border border-slate-200 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer ${
                                row.AdminAction === 'Fixed' ? 'text-green-600 font-medium' :
                                row.AdminAction === 'Removed' ? 'text-slate-400 line-through' :
                                row.AdminAction === 'In Progress' ? 'text-orange-500 font-medium' :
                                'text-slate-600'
                              }`}
                            >
                              <option value="">None</option>
                              <option value="In Progress">In Progress</option>
                              <option value="Fixed">Fixed</option>
                              <option value="Removed">Removed</option>
                            </select>
                          ) : (
                            <span className={`font-medium ${
                                row.AdminAction === 'Fixed' ? 'text-green-600' :
                                row.AdminAction === 'Removed' ? 'text-slate-400 line-through' :
                                row.AdminAction === 'In Progress' ? 'text-orange-500' :
                                'text-slate-500'
                            }`}>
                              {row.AdminAction || '-'}
                            </span>
                          )}
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          </div>
        </div>
      </main>
    </div>
  );
}