import React, { useState, useEffect } from 'react';
import { 
  Box, Container, Typography, Button, TextField, 
  InputAdornment, IconButton, AppBar, Toolbar, Avatar, 
  Tooltip, Dialog, DialogTitle, DialogContent, 
  DialogActions, CircularProgress, Paper, Chip,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
  Switch, FormControlLabel, Divider, List, ListItem, ListItemText, ListItemSecondaryAction,
  Select, MenuItem, FormControl, InputLabel, Tabs, Tab
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import AddIcon from '@mui/icons-material/Add';
import SteamIcon from '@mui/icons-material/SportsEsports';
import DeleteIcon from '@mui/icons-material/Delete';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import SyncIcon from '@mui/icons-material/Sync';
import BoltIcon from '@mui/icons-material/Bolt';
import TimerIcon from '@mui/icons-material/Timer';
import LockResetIcon from '@mui/icons-material/LockReset';
import SettingsIcon from '@mui/icons-material/Settings';
import ShareIcon from '@mui/icons-material/Share';
import GroupAddIcon from '@mui/icons-material/GroupAdd';
import ShieldIcon from '@mui/icons-material/Shield';
import GppBadIcon from '@mui/icons-material/GppBad';
import PeopleIcon from '@mui/icons-material/People';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import StorageIcon from '@mui/icons-material/Storage';
import GroupIcon from '@mui/icons-material/Group';
import AccountTreeIcon from '@mui/icons-material/AccountTree';
import { useAccounts, type Account } from '../hooks/useAccounts';
import { useAppTheme } from '../theme/ThemeContext';
import type { ThemeType } from '../theme/SteamTheme';
import NebulaBanner from '../components/NebulaBanner';

const AdminPanel: React.FC<{ open: boolean, onClose: () => void }> = ({ open, onClose }) => {
  const { adminGetStats, adminGetUsers, adminDeleteUser, adminGetAccounts, adminRemoveAccount } = useAccounts();
  const [tab, setTab] = useState(0);
  const [stats, setStats] = useState<any>(null);
  const [users, setUsers] = useState<any[]>([]);
  const [accounts, setAccounts] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  const loadData = async () => {
    setLoading(true);
    try {
      if (tab === 0) setStats(await adminGetStats());
      if (tab === 1) setUsers(await adminGetUsers());
      if (tab === 2) setAccounts(await adminGetAccounts());
    } catch (e) {}
    setLoading(false);
  };

  useEffect(() => { if (open) loadData(); }, [open, tab]);

  const handleDeleteUser = async (id: string) => {
    if (window.confirm("Wipe this user and all their accounts?")) {
      await adminDeleteUser(id);
      loadData();
    }
  };

  const handleForceRemove = async (steamId: string) => {
    if (window.confirm("Force remove this account from server?")) {
      await adminRemoveAccount(steamId);
      loadData();
    }
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle sx={{ bgcolor: 'background.paper', color: 'text.primary', display: 'flex', alignItems: 'center', gap: 1 }}>
        <AdminPanelSettingsIcon color="primary" /> Server Administration
      </DialogTitle>
      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider' }}>
        <Tab icon={<StorageIcon />} label="Overview" />
        <Tab icon={<GroupIcon />} label="Users" />
        <Tab icon={<AccountTreeIcon />} label="Global Accounts" />
      </Tabs>
      <DialogContent sx={{ bgcolor: 'background.paper', minHeight: 400, pt: 2 }}>
        {loading ? <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}><CircularProgress /></Box> : (
          <>
            {tab === 0 && stats && (
              <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, mt: 2 }}>
                {[
                  { label: 'Total Users', value: stats.users },
                  { label: 'Total Accounts', value: stats.accounts },
                  { label: 'Active Cooldowns', value: stats.activeCooldowns }
                ].map((s) => (
                  <Paper key={s.label} sx={{ p: 3, textAlign: 'center', bgcolor: 'rgba(0,0,0,0.1)' }}>
                    <Typography variant="h4" color="primary" sx={{ fontWeight: 'bold' }}>{s.value}</Typography>
                    <Typography variant="caption" color="textSecondary">{s.label}</Typography>
                  </Paper>
                ))}
              </Box>
            )}
            {tab === 1 && (
              <List>
                {users.map(u => (
                  <ListItem key={u._id} divider sx={{ borderColor: 'divider' }}>
                    <Avatar src={u.avatar} sx={{ mr: 2 }} />
                    <ListItemText primary={u.personaName} secondary={u.steamId} primaryTypographyProps={{ color: 'text.primary' }} />
                    <ListItemSecondaryAction>
                      <IconButton color="error" onClick={() => handleDeleteUser(u._id)}><DeleteIcon /></IconButton>
                    </ListItemSecondaryAction>
                  </ListItem>
                ))}
              </List>
            )}
            {tab === 2 && (
              <List>
                {accounts.map(a => (
                  <ListItem key={a.steamId} divider sx={{ borderColor: 'divider' }}>
                    <Avatar src={a.avatar} variant="square" sx={{ mr: 2 }} />
                    <ListItemText 
                      primary={a.personaName} 
                      secondary={`Owned by: ${a.addedBy?.personaName || 'Unknown'} (${a.steamId})`} 
                      primaryTypographyProps={{ color: 'text.primary' }}
                    />
                    <ListItemSecondaryAction>
                      <IconButton color="error" onClick={() => handleForceRemove(a.steamId)}><DeleteIcon /></IconButton>
                    </ListItemSecondaryAction>
                  </ListItem>
                ))}
              </List>
            )}
          </>
        )}
      </DialogContent>
      <DialogActions sx={{ bgcolor: 'background.paper', p: 2 }}>
        <Button onClick={onClose} variant="contained" color="inherit">Close Panel</Button>
      </DialogActions>
    </Dialog>
  );
};

const Dashboard: React.FC = () => {
  const { currentTheme, setTheme } = useAppTheme();
  const { 
    accounts, isLoading, isSyncing, serverConfig, deleteAccount, 
    switchAccount, openSteamAppLogin, openSteamLogin, updateServerConfig, loginToServer, syncNow
  } = useAccounts();
  
  const [searchTerm, setSearchTerm] = useState('');
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [isAdminPanelOpen, setIsAdminPanelOpen] = useState(false);
  const [serverUrl, setServerUrl] = useState('');

  useEffect(() => {
    if (serverConfig?.url) setServerUrl(serverConfig.url);
  }, [serverConfig?.url]);

  const saveSettings = async () => {
    await updateServerConfig({ url: serverUrl });
    alert("Server URL updated!");
  };

  const safeAccounts = Array.isArray(accounts) ? accounts : [];
  const filteredAccounts = safeAccounts.filter((acc) => {
    if (!acc) return false;
    const name = acc.personaName || 'Unknown';
    const id = acc.steamId || '';
    return name.toLowerCase().includes(searchTerm.toLowerCase()) || id.includes(searchTerm);
  });

  return (
    <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: 'background.default' }}>
      <NebulaBanner />
      
      <AppBar position="sticky" sx={{ WebkitAppRegion: 'drag', background: 'background.default', boxShadow: 'none', borderBottom: '1px solid', borderColor: 'divider' } as any}>
        <Toolbar variant="dense">
          <SteamIcon sx={{ mr: 2, color: 'primary.main' }} />
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 'bold', fontSize: '1rem', letterSpacing: '1px' }}>
            ULTIMATE BAN TRACKER
          </Typography>

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, WebkitAppRegion: 'no-drag' } as any}>
            {/* Admin Button - Only visible if isAdmin is true */}
            {serverConfig?.isAdmin && (
              <Tooltip title="Open Admin Panel">
                <IconButton color="primary" onClick={() => setIsAdminPanelOpen(true)}>
                  <AdminPanelSettingsIcon />
                </IconButton>
              </Tooltip>
            )}

            <Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
              {isSyncing ? (
                <CircularProgress size={16} sx={{ color: 'primary.main', mr: 1 }} />
              ) : (
                <IconButton size="small" onClick={() => syncNow()} disabled={!serverConfig?.enabled} sx={{ color: 'primary.main' }}>
                  <SyncIcon sx={{ fontSize: 18 }} />
                </IconButton>
              )}
            </Box>

            <TextField
              size="small"
              placeholder="Search accounts..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              sx={{ 
                backgroundColor: 'rgba(255, 255, 255, 0.05)',
                borderRadius: 1,
                width: 200,
                '& .MuiOutlinedInput-root': { '& fieldset': { border: 'none' }, height: 32 }
              }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
                  </InputAdornment>
                ),
              }}
            />

            <Button
              variant="contained"
              color="primary"
              startIcon={<AddIcon />}
              onClick={() => openSteamAppLogin()}
              sx={{ height: 32 }}
            >
              Add
            </Button>

            <IconButton color="inherit" onClick={() => setIsSettingsOpen(true)}>
              <SettingsIcon />
            </IconButton>
          </Box>
        </Toolbar>
      </AppBar>

      <Container maxWidth="xl" sx={{ mt: 4, mb: 4, flexGrow: 1, overflowY: 'auto' }}>
        {isLoading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}><CircularProgress color="primary" /></Box>
        ) : (
          <TableContainer component={Paper} sx={{ background: 'background.paper', backdropFilter: 'blur(10px)', borderRadius: 0, border: '1px solid', borderColor: 'divider' }}>
            <Table size="small">
              <TableHead>
                <TableRow sx={{ background: 'rgba(0,0,0,0.1)' }}>
                  <TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', width: 60 }}>AVATAR</TableCell>
                  <TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>ACCOUNT</TableCell>
                  <TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>BAN STATUS</TableCell>
                  <TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>COOLDOWN</TableCell>
                  <TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', textAlign: 'right' }}>ACTIONS</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {filteredAccounts.map((account) => (
                  <AccountRow 
                    key={account._id} 
                    account={account} 
                    onDelete={deleteAccount} 
                    onSwitch={switchAccount}
                    onAuth={() => openSteamLogin(account.steamId)}
                  />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
        
        {!isLoading && filteredAccounts.length === 0 && (
          <Box sx={{ width: '100%', mt: 10, textAlign: 'center' }}>
            <Typography variant="h6" color="textSecondary">
              No accounts tracked. Click "Add" to get started!
            </Typography>
          </Box>
        )}
      </Container>

      {/* Settings Dialog */}
      <Dialog open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Settings & Customization</DialogTitle>
        <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main', mt: 1 }}>THEME SELECTION</Typography>
          <FormControl fullWidth size="small" sx={{ mb: 3 }}>
            <InputLabel sx={{ color: 'text.secondary' }}>Active Theme</InputLabel>
            <Select
              value={currentTheme || 'steam'}
              label="Active Theme"
              onChange={(e) => setTheme(e.target.value as ThemeType)}
              sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
            >
              <MenuItem value="steam">Steam Classic</MenuItem>
              <MenuItem value="mocha">Catppuccin Mocha</MenuItem>
              <MenuItem value="latte">Catppuccin Latte</MenuItem>
              <MenuItem value="nord">Nord Arctic</MenuItem>
              <MenuItem value="tokyo">Tokyo Night</MenuItem>
            </Select>
          </FormControl>

          <Divider sx={{ my: 2, borderColor: 'divider' }} />

          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>BACKEND CONFIGURATION</Typography>
          <TextField
            fullWidth
            label="Server URL"
            value={serverUrl}
            onChange={(e) => setServerUrl(e.target.value)}
            placeholder="https://ultimate-ban-tracker.narl.io"
            margin="dense"
            sx={{ mb: 2 }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <Button variant="contained" size="small" onClick={saveSettings} sx={{ height: 30 }}>Apply</Button>
                </InputAdornment>
              ),
            }}
          />
          
          <Divider sx={{ my: 2, borderColor: 'divider' }} />
          
          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>COMMUNITY AUTHENTICATION</Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 2, bgcolor: 'rgba(0,0,0,0.1)', borderRadius: 1 }}>
            <Box>
              <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
                {serverConfig?.token ? "Connected to Server" : "Not Authenticated"}
              </Typography>
              <Typography variant="caption" color="textSecondary">
                {serverConfig?.token ? "Your accounts can now be shared with others." : "Login to share and sync with your community."}
              </Typography>
            </Box>
            <Box sx={{ display: 'flex', gap: 1 }}>
              {serverConfig?.token && (
                <Button 
                  variant="outlined" 
                  color="error"
                  onClick={() => updateServerConfig({ token: undefined, enabled: false })}
                >
                  Logout
                </Button>
              )}
              <Button 
                variant="outlined" 
                color="primary"
                onClick={() => loginToServer()}
                disabled={!serverUrl}
              >
                {serverConfig?.token ? "Re-Login" : "Login with Steam"}
              </Button>
            </Box>
          </Box>

          <FormControlLabel
            control={
              <Switch 
                checked={serverConfig?.enabled || false} 
                onChange={(e) => updateServerConfig({ enabled: e.target.checked })}
                disabled={!serverConfig?.token}
              />
            }
            label="Enable Community Sync"
            sx={{ mt: 2 }}
          />
        </DialogContent>
        <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
          <Button onClick={() => setIsSettingsOpen(false)} color="inherit" variant="contained">Done</Button>
        </DialogActions>
      </Dialog>

      {/* Admin Panel */}
      <AdminPanel open={isAdminPanelOpen} onClose={() => setIsAdminPanelOpen(false)} />
    </Box>
  );
};

// --- Sub-Component: AccountRow ---

const AccountRow: React.FC<{ 
  account: Account, 
  onDelete: (id: string) => void, 
  onSwitch: (login: string) => void,
  onAuth: () => void 
}> = ({ account, onDelete, onSwitch, onAuth }) => {
  const { shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, getServerUsers, serverConfig, scrapeAccount } = useAccounts();
  const [timeLeft, setTimeLeft] = useState<string | null>(null);
  const [isShareOpen, setIsShareOpen] = useState(false);
  const [targetUserId, setTargetUserId] = useState('');
  const [isSharing, setIsSharing] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [serverUsers, setServerUsers] = useState<any[]>([]);

  const cooldownDate = account?.cooldownExpiresAt ? new Date(account.cooldownExpiresAt) : null;
  const isCooldownActive = cooldownDate && !isNaN(cooldownDate.getTime()) && cooldownDate.getTime() > Date.now();

  useEffect(() => {
    if (!isCooldownActive || !cooldownDate) { setTimeLeft(null); return; }
    const targetTime = cooldownDate.getTime();
    const timer = setInterval(() => {
      const diff = targetTime - Date.now();
      if (diff <= 0) { setTimeLeft(null); clearInterval(timer); return; }
      const hours = Math.floor(diff / 3600000);
      const mins = Math.floor((diff % 3600000) / 60000);
      const secs = Math.floor((diff % 60000) / 1000);
      setTimeLeft(`${hours}h ${mins}m ${secs}s`);
    }, 1000);
    return () => clearInterval(timer);
  }, [account?.cooldownExpiresAt, isCooldownActive]);

  const avatarSrc = account?.localAvatar ? `steam-resource://${account.localAvatar}` : (account?.avatar || '');
  const [imgSrc, setImgSrc] = useState(avatarSrc);
  useEffect(() => { setImgSrc(avatarSrc); }, [avatarSrc]);

  const handleRefresh = async () => {
    setIsRefreshing(true);
    await scrapeAccount(account.steamId);
    setIsRefreshing(false);
  };

  const handleOpenShare = async () => {
    setIsShareOpen(true);
    try {
      const [users, selfInfo] = await Promise.all([
        getServerUsers(),
        (window as any).electronAPI.getServerUserInfo()
      ]);
      const filtered = (Array.isArray(users) ? users : []).filter(u => 
        u.steamId !== selfInfo.steamId && u.steamId !== account.steamId
      );
      setServerUsers(filtered);
    } catch (e) {}
  };

  const handleShare = async () => {
    if (!targetUserId) return;
    setIsSharing(true);
    try {
      await shareAccountWithUser(account.steamId, targetUserId);
      setTargetUserId('');
    } catch (e: any) { alert(e.message || "Failed to share account");
    } finally { setIsSharing(false); }
  };

  const handleRevoke = async (targetSteamId: string) => {
    if (!window.confirm("Revoke access for this user?")) return;
    try { await revokeAccountAccess(account.steamId, targetSteamId);
    } catch (e: any) { alert(e.message); }
  };

  const handleRevokeAll = async () => {
    if (!window.confirm("Completely stop sharing this account?")) return;
    try { await revokeAllAccountAccess(account.steamId); setIsShareOpen(false);
    } catch (e: any) { alert(e.message); }
  };

  const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
  
  // Primary account check
  const isPrimaryAccount = serverConfig?.serverSteamId === account.steamId;

  // Refined Shared Logic
  const isSharedWithYou = account?._id.startsWith('shared_');
  const hasSharedMembers = (account as any).sharedWith && (account as any).sharedWith.length > 0;
  const showCommunityIcon = isSharedWithYou || hasSharedMembers;

  return (
    <TableRow sx={{ '&:hover': { background: 'action.hover' }, borderBottom: '1px solid', borderColor: 'divider' }}>
      <TableCell>
        <Box sx={{ position: 'relative' }}>
          <Avatar src={imgSrc} variant="square" sx={{ width: 32, height: 32, border: '1px solid', borderColor: 'divider' }} />
          {isPrimaryAccount && (
            <Tooltip title="Primary Community Account">
              <WorkspacePremiumIcon sx={{ position: 'absolute', top: -8, left: -8, fontSize: 18, color: '#FFD700', filter: 'drop-shadow(0 0 2px rgba(0,0,0,0.5))' }} />
            </Tooltip>
          )}
          {showCommunityIcon && (
            <Tooltip title={isSharedWithYou ? "Remote Shared Account" : "Actively Shared with Community"}>
              <PeopleIcon sx={{ position: 'absolute', bottom: -4, right: -4, fontSize: 14, color: 'primary.main', bgcolor: 'background.default', borderRadius: '50%', border: '1px solid', borderColor: 'divider', p: 0.2 }} />
            </Tooltip>
          )}
        </Box>
      </TableCell>
      <TableCell>
        <Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>{account?.personaName || 'Unknown'}</Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{account?.steamId}</Typography>
      </TableCell>
      <TableCell>
        {isBanned ? (
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'error.main' }}>
              <GppBadIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>BANNED</Typography>
            </Box>
            <Box sx={{ display: 'flex', gap: 0.5 }}>
              {account?.vacBanned && <Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} />}
              {account?.gameBans ? account.gameBans > 0 && <Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} /> : null}
            </Box>
          </Box>
        ) : (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
            <ShieldIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>SECURE</Typography>
          </Box>
        )}
      </TableCell>
      <TableCell>
        {account?.authError ? (
          <Box sx={{ display: 'flex', alignItems: 'center', color: 'warning.main', gap: 0.5 }}>
            <LockResetIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
          </Box>
        ) : isCooldownActive ? (
          <Box sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', gap: 0.5 }}>
            <TimerIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
          </Box>
        ) : (
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>Available</Typography>
        )}
      </TableCell>
      <TableCell align="right">
        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.5, alignItems: 'center' }}>
          {account.loginName && (
            <Button 
              variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
              sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 }, minWidth: 60 }}
            >LOGIN</Button>
          )}
          <Tooltip title={account.steamLoginSecure && !account.authError ? "Tracking active" : "Authenticate for cooldowns"}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
              <IconButton 
                size="small" onClick={onAuth} disabled={!!(account.steamLoginSecure && !account.authError)}
                sx={{ 
                  color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
                  border: '1px solid', borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
                  borderRadius: 1, background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
                }}
              >
                {account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
              </IconButton>
              {account.steamLoginSecure && !account.authError && (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                  <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem' }}>TRACKING</Typography>
                  <IconButton size="small" onClick={handleRefresh} disabled={isRefreshing} sx={{ p: 0.2, color: 'text.secondary', '&:hover': { color: 'primary.main' } }}>
                    {isRefreshing ? <CircularProgress size={10} color="inherit" /> : <SyncIcon sx={{ fontSize: 12 }} />}
                  </IconButton>
                </Box>
              )}
            </Box>
          </Tooltip>
          <Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />
          <IconButton size="small" onClick={handleOpenShare} disabled={!serverConfig?.token}><ShareIcon fontSize="inherit" sx={{ color: 'primary.main' }}/></IconButton>
          <IconButton size="small" sx={{ color: 'text.secondary' }} onClick={() => (window as any).electronAPI.openExternal(account?.profileUrl || '')}><OpenInNewIcon fontSize="inherit"/></IconButton>
          <IconButton size="small" sx={{ color: 'error.main' }} onClick={() => onDelete(account?._id || '')}><DeleteIcon fontSize="inherit"/></IconButton>
        </Box>

        <Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
          <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Permissions</DialogTitle>
          <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>GRANT ACCESS</Typography>
            <Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
              <FormControl fullWidth size="small">
                <InputLabel sx={{ color: 'text.secondary' }}>Select User</InputLabel>
                <Select
                  value={targetUserId} label="Select User" onChange={(e) => setTargetUserId(e.target.value as string)}
                  sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
                >
                  {serverUsers
                    .filter(u => !(account as any).sharedWith?.find((sw: any) => sw.steamId === u.steamId))
                    .map(user => (
                      <MenuItem key={user.steamId} value={user.steamId}>
                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />{user.personaName}</Box>
                      </MenuItem>
                    ))}
                  {serverUsers.length === 0 && <MenuItem disabled>No eligible users found</MenuItem>}
                </Select>
              </FormControl>
              <Button onClick={handleShare} variant="contained" disabled={!targetUserId || isSharing} sx={{ minWidth: 80 }}>{isSharing ? <CircularProgress size={16} color="inherit" /> : "Add"}</Button>
            </Box>
            <Divider sx={{ my: 2, borderColor: 'divider' }} />
            <Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>CURRENT ACCESS</Typography>
            <List size="small" sx={{ bgcolor: 'rgba(0,0,0,0.05)', borderRadius: 1, mb: 2 }}>
              {(account as any).sharedWith?.map((sw: any) => (
                <ListItem key={sw.steamId} dense divider sx={{ borderColor: 'divider' }}>
                  <Avatar src={sw.avatar} sx={{ width: 24, height: 24, mr: 1 }} />
                  <ListItemText primary={sw.personaName} primaryTypographyProps={{ variant: 'body2', sx: { fontWeight: 'bold' } }} />
                  <ListItemSecondaryAction>
                    <IconButton size="small" color="error" onClick={() => handleRevoke(sw.steamId)}><DeleteIcon fontSize="inherit" /></IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
              ))}
              {(!(account as any).sharedWith || (account as any).sharedWith.length === 0) && (
                <Typography variant="caption" align="center" sx={{ display: 'block', p: 2, opacity: 0.6 }}>Not shared with anyone yet.</Typography>
              )}
            </List>
            {(account as any).sharedWith?.length > 0 && (
              <Button fullWidth variant="outlined" color="error" size="small" onClick={handleRevokeAll} startIcon={<GppBadIcon />}>Revoke All Shared Access</Button>
            )}
          </DialogContent>
          <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}><Button onClick={() => setIsShareOpen(false)} color="inherit" variant="contained">Done</Button></DialogActions>
        </Dialog>
      </TableCell>
    </TableRow>
  );
};

export default Dashboard;