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 } = 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);
      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 with the community?")) return;
    try {
      await revokeAllAccountAccess(account.steamId);
      setIsShareOpen(false);
    } catch (e: any) { alert(e.message); }
  };

  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, 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 ? "Session valid - Tracking active" : (account.steamLoginSecure ? "Refresh scraper session" : "Authenticate for cooldown tracking")}>
            <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 && (
                <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem', letterSpacing: '0.5px' }}>
                  TRACKING
                </Typography>
              )}
            </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' }}>Account 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>
  );
};