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,
  Tabs, Tab, Select, MenuItem, FormControl, InputLabel
} 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 PublicIcon from '@mui/icons-material/Public';
import ShieldIcon from '@mui/icons-material/Shield';
import GppBadIcon from '@mui/icons-material/GppBad';
import PeopleIcon from '@mui/icons-material/People';
import { useAccounts, type Account } from '../hooks/useAccounts';
import { useAppTheme } from '../theme/ThemeContext';
import type { ThemeType } from '../theme/SteamTheme';
import NebulaBanner from '../components/NebulaBanner';

const Dashboard: React.FC = () => {
  const { currentTheme, setTheme } = useAppTheme();
  const { 
    accounts, isLoading, isSyncing, serverConfig, addAccount, deleteAccount, 
    switchAccount, openSteamLogin, updateServerConfig, loginToServer,
    getCommunityAccounts, syncNow
  } = useAccounts();
  
  const [searchTerm, setSearchTerm] = useState('');
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [identifier, setIdentifier] = useState('');
  
  const [addTab, setAddTab] = useState(0);
  const [communityAccounts, setCommunityAccounts] = useState<any[]>([]);
  const [isCommunityLoading, setIsCommunityLoading] = useState(false);
  const [serverUrl, setServerUrl] = useState('');

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

  const loadCommunity = async () => {
    setIsCommunityLoading(true);
    try {
      const data = await getCommunityAccounts();
      setCommunityAccounts(Array.isArray(data) ? data : []);
    } catch (e) { 
    } finally {
      setIsCommunityLoading(false);
    }
  };

  useEffect(() => {
    if (isAddDialogOpen && addTab === 1) {
      loadCommunity();
    }
  }, [isAddDialogOpen, addTab]);

  const handleAddAccount = async () => {
    if (!identifier) return;
    try {
      await addAccount({ identifier });
      setIsAddDialogOpen(false);
      setIdentifier('');
    } catch (e) {
      console.error("[Dashboard] Add failed:", e);
    }
  };

  const handleAddFromCommunity = async (commAcc: any) => {
    try {
      await addAccount({ identifier: commAcc.steamId });
      setIsAddDialogOpen(false);
    } catch (e) { }
  };

  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}>
            <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={() => setIsAddDialogOpen(true)}
              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 Account" 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>

      {/* Add Account Dialog */}
      <Dialog open={isAddDialogOpen} onClose={() => setIsAddDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary', p: 0 }}>
          <Tabs value={addTab} onChange={(_, v) => setAddTab(v)} variant="fullWidth" textColor="inherit" indicatorColor="primary">
            <Tab label="Manual Add" icon={<AddIcon />} iconPosition="start" />
            <Tab label="From Community" icon={<PublicIcon />} iconPosition="start" disabled={!serverConfig?.token} />
          </Tabs>
        </DialogTitle>
        <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2, minHeight: 300 }}>
          {addTab === 0 ? (
            <>
              <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
                Enter a SteamID64 or Profile URL. You will need to authenticate to enable full tracking and instant login features.
              </Typography>
              <TextField
                fullWidth
                autoFocus
                placeholder="SteamID64 or Profile URL"
                value={identifier}
                onChange={(e) => setIdentifier(e.target.value)}
                sx={{ '& .MuiOutlinedInput-root': { backgroundColor: 'rgba(0, 0, 0, 0.1)' } }}
              />
            </>
          ) : (
            <Box>
              {isCommunityLoading ? (
                <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={32} /></Box>
              ) : (
                <List>
                  {communityAccounts
                    .filter(ca => !safeAccounts.find(a => a.steamId === ca.steamId))
                    .map((ca) => (
                      <ListItem key={ca.steamId} divider sx={{ borderColor: 'divider' }}>
                        <Avatar src={ca.avatar} variant="square" sx={{ width: 32, height: 32, mr: 2 }} />
                        <ListItemText 
                          primary={ca.personaName} 
                          secondary={ca.steamId} 
                          primaryTypographyProps={{ sx: { color: 'text.primary', fontWeight: 'bold' } }}
                        />
                        <ListItemSecondaryAction>
                          <Button size="small" variant="contained" onClick={() => handleAddFromCommunity(ca)}>Add</Button>
                        </ListItemSecondaryAction>
                      </ListItem>
                    ))}
                  {communityAccounts.length === 0 && <Typography align="center" color="textSecondary" sx={{ p: 4 }}>No shared accounts found on server.</Typography>}
                </List>
              )}
            </Box>
          )}
        </DialogContent>
        <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
          <Button onClick={() => setIsAddDialogOpen(false)} color="inherit">Cancel</Button>
          {addTab === 0 && <Button onClick={handleAddAccount} variant="contained" color="success" disabled={!identifier}>Add</Button>}
        </DialogActions>
      </Dialog>
    </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, getServerUsers, serverConfig } = useAccounts();
  const [timeLeft, setTimeLeft] = useState<string | null>(null);
  const [isShareOpen, setIsShareOpen] = useState(false);
  const [targetUserId, setTargetUserId] = useState('');
  const [isSharing, setIsSharing] = 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 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);
      alert(`Account shared successfully!`);
      setIsShareOpen(false);
      setTargetUserId('');
    } catch (e: any) {
      alert(e.message || "Failed to share account");
    } finally {
      setIsSharing(false);
    }
  };

  const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
  const isShared = account?._id.startsWith('shared_');

  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' }} />
          {isShared && (
            <Tooltip title="Community Shared Account">
              <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', letterSpacing: '0.5px' }}>ACCOUNT 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', borderRadius: 0.5 }} />
              )}
              {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', borderRadius: 0.5 }} />
              ) : 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', letterSpacing: '0.5px' }}>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 }}>
          {account?.steamLoginSecure ? (
            <Button 
              variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
              sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 } }}
            >
              LOGIN
            </Button>
          ) : (
            <Button variant="outlined" size="small" onClick={onAuth} sx={{ height: 28, fontSize: '0.7rem' }}>AUTH</Button>
          )}
          <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>

        {/* Share Dialog */}
        <Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
          <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Share Account</DialogTitle>
          <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
            <Typography variant="body2" sx={{ mb: 2 }}>
              Select a community member to share this account with.
            </Typography>
            <FormControl fullWidth size="small" sx={{ mt: 1 }}>
              <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.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 users found on server</MenuItem>}
              </Select>
            </FormControl>
          </DialogContent>
          <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
            <Button onClick={() => setIsShareOpen(false)} color="inherit" disabled={isSharing}>Cancel</Button>
            <Button 
              onClick={handleShare}
              variant="contained" 
              startIcon={isSharing ? <CircularProgress size={16} color="inherit" /> : <GroupAddIcon />}
              disabled={!targetUserId || isSharing}
            >
              {isSharing ? "Sharing..." : "Grant Access"}
            </Button>
          </DialogActions>
        </Dialog>
      </TableCell>
    </TableRow>
  );
};

export default Dashboard;