import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';

interface User {
  id: number;
  username: string | null;
  email: string | null;
  name: string | null;
  image: string | null;
  status: 'active' | 'disabled' | 'suspended';
  is_admin: number;
  query_count: number;
  last_active: string | null;
  created_at: string;
  conversation_count: number;
  message_count: number;
}

interface DailyData {
  date: string;
  count: number;
}

interface Stats {
  totalUsers: number;
  activeUsers: number;
  disabledUsers: number;
  suspendedUsers: number;
  totalQueries: number;
  totalConversations: number;
  totalMessages: number;
  activeToday: number;
  newThisWeek: number;
  dailyRegistrations: DailyData[];
  dailyMessages: DailyData[];
  dailyConversations: DailyData[];
}

export default function AdminDashboard() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [users, setUsers] = useState<User[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [darkMode, setDarkMode] = useState(false);

  // Load theme preference from localStorage (synced with main chat)
  useEffect(() => {
    try {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark') setDarkMode(true);
    } catch {}
  }, []);

  // Toggle theme
  function toggleTheme() {
    const newMode = !darkMode;
    setDarkMode(newMode);
    try { localStorage.setItem('theme', newMode ? 'dark' : 'light'); } catch {}
  }

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/auth/signin');
    }
  }, [status, router]);

  useEffect(() => {
    if (status === 'authenticated') {
      loadData();
    }
  }, [status]);

  async function loadData() {
    setLoading(true);
    setError(null);
    try {
      const [usersRes, statsRes] = await Promise.all([
        fetch('/api/admin/users'),
        fetch('/api/admin/stats')
      ]);

      if (usersRes.status === 403 || statsRes.status === 403) {
        setError('Admin access required');
        setLoading(false);
        return;
      }

      if (!usersRes.ok || !statsRes.ok) {
        throw new Error('Failed to load data');
      }

      const usersData = await usersRes.json();
      const statsData = await statsRes.json();

      setUsers(usersData.users || []);
      setStats(statsData.stats || null);
    } catch (err) {
      setError('Failed to load admin data');
      console.error(err);
    } finally {
      setLoading(false);
    }
  }

  async function updateUserStatus(userId: number, newStatus: string) {
    try {
      const res = await fetch('/api/admin/users', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, status: newStatus })
      });

      if (res.ok) {
        setUsers(users.map(u => 
          u.id === userId ? { ...u, status: newStatus as User['status'] } : u
        ));
      }
    } catch (err) {
      console.error('Failed to update user:', err);
    }
  }

  async function toggleAdmin(userId: number, currentIsAdmin: number) {
    try {
      const res = await fetch('/api/admin/users', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, isAdmin: !currentIsAdmin })
      });

      if (res.ok) {
        setUsers(users.map(u => 
          u.id === userId ? { ...u, is_admin: currentIsAdmin ? 0 : 1 } : u
        ));
      }
    } catch (err) {
      console.error('Failed to toggle admin:', err);
    }
  }

  async function deleteUser(userId: number) {
    if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) {
      return;
    }

    try {
      const res = await fetch('/api/admin/users', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId })
      });

      if (res.ok) {
        setUsers(users.filter(u => u.id !== userId));
        loadData(); // Refresh stats
      }
    } catch (err) {
      console.error('Failed to delete user:', err);
    }
  }

  const filteredUsers = users.filter(user => {
    const matchesSearch = 
      (user.username?.toLowerCase().includes(searchTerm.toLowerCase()) || false) ||
      (user.email?.toLowerCase().includes(searchTerm.toLowerCase()) || false) ||
      (user.name?.toLowerCase().includes(searchTerm.toLowerCase()) || false);
    
    const matchesStatus = statusFilter === 'all' || user.status === statusFilter;
    
    return matchesSearch && matchesStatus;
  });

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return 'Never';
    return new Date(dateStr).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

  // Theme-aware styles
  const theme = darkMode ? {
    bg: '#1a1a2e',
    cardBg: '#252542',
    border: '#3d3d5c',
    text: '#e5e5e5',
    textSecondary: '#9ca3af',
    textMuted: '#6b7280',
    tableBg: '#1a1a2e',
    shadow: '0 4px 12px rgba(0,0,0,0.3)'
  } : {
    bg: 'linear-gradient(180deg, #f8fafc, #f1f5f9)',
    cardBg: '#fff',
    border: '#e5e7eb',
    text: '#0f172a',
    textSecondary: '#374151',
    textMuted: '#6b7280',
    tableBg: '#f9fafb',
    shadow: '0 4px 12px rgba(0,0,0,0.05)'
  };

  const S: Record<string, React.CSSProperties> = {
    page: {
      minHeight: '100vh',
      background: theme.bg,
      fontFamily: 'Inter, Helvetica, Arial, sans-serif',
      color: theme.text,
      padding: '24px'
    },
    header: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: '32px',
      flexWrap: 'wrap' as const,
      gap: '12px'
    },
    title: {
      fontSize: '28px',
      fontWeight: 700,
      color: theme.text,
      margin: 0
    },
    headerButtons: {
      display: 'flex',
      gap: '12px',
      alignItems: 'center'
    },
    backBtn: {
      padding: '10px 20px',
      borderRadius: '10px',
      border: `1px solid ${theme.border}`,
      background: theme.cardBg,
      color: theme.textSecondary,
      cursor: 'pointer',
      fontSize: '14px',
      boxShadow: theme.shadow
    },
    themeBtn: {
      padding: '10px 16px',
      borderRadius: '10px',
      border: `1px solid ${theme.border}`,
      background: theme.cardBg,
      color: theme.text,
      cursor: 'pointer',
      fontSize: '14px',
      display: 'flex',
      alignItems: 'center',
      gap: '6px'
    },
    statsGrid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
      gap: '16px',
      marginBottom: '32px'
    },
    statCard: {
      background: theme.cardBg,
      border: `1px solid ${theme.border}`,
      borderRadius: '16px',
      padding: '20px',
      textAlign: 'center' as const,
      boxShadow: theme.shadow
    },
    statValue: {
      fontSize: '32px',
      fontWeight: 700,
      color: '#2563eb',
      marginBottom: '4px'
    },
    statLabel: {
      fontSize: '14px',
      color: theme.textMuted
    },
    chartSection: {
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
      gap: '24px',
      marginBottom: '32px'
    },
    chartCard: {
      background: theme.cardBg,
      border: `1px solid ${theme.border}`,
      borderRadius: '16px',
      padding: '24px',
      boxShadow: theme.shadow
    },
    chartTitle: {
      fontSize: '16px',
      fontWeight: 600,
      color: theme.textSecondary,
      marginBottom: '16px'
    },
    controls: {
      display: 'flex',
      gap: '16px',
      marginBottom: '24px',
      flexWrap: 'wrap' as const
    },
    searchInput: {
      flex: 1,
      minWidth: '200px',
      padding: '12px 16px',
      borderRadius: '10px',
      border: `1px solid ${theme.border}`,
      background: theme.cardBg,
      color: theme.text,
      fontSize: '14px',
      outline: 'none'
    },
    select: {
      padding: '12px 16px',
      borderRadius: '10px',
      border: `1px solid ${theme.border}`,
      background: theme.cardBg,
      color: theme.textSecondary,
      fontSize: '14px',
      cursor: 'pointer',
      outline: 'none'
    },
    tableContainer: {
      background: theme.cardBg,
      borderRadius: '16px',
      border: `1px solid ${theme.border}`,
      overflow: 'hidden',
      boxShadow: theme.shadow
    },
    table: {
      width: '100%',
      borderCollapse: 'collapse' as const
    },
    th: {
      padding: '16px',
      textAlign: 'left' as const,
      background: theme.tableBg,
      color: theme.textMuted,
      fontSize: '12px',
      fontWeight: 600,
      textTransform: 'uppercase' as const,
      letterSpacing: '0.5px',
      borderBottom: `1px solid ${theme.border}`
    },
    td: {
      padding: '16px',
      borderBottom: `1px solid ${darkMode ? '#2d2d44' : '#f3f4f6'}`,
      fontSize: '14px',
      color: theme.textSecondary
    },
    userInfo: {
      display: 'flex',
      alignItems: 'center',
      gap: '12px'
    },
    avatar: {
      width: '36px',
      height: '36px',
      borderRadius: '50%',
      background: 'linear-gradient(135deg, #2563eb, #7c3aed)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#fff',
      fontWeight: 600,
      fontSize: '14px'
    },
    statusBadge: {
      padding: '4px 12px',
      borderRadius: '20px',
      fontSize: '12px',
      fontWeight: 500
    },
    actionBtn: {
      padding: '6px 12px',
      borderRadius: '6px',
      border: 'none',
      cursor: 'pointer',
      fontSize: '12px',
      marginRight: '8px'
    },
    loading: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '400px',
      fontSize: '18px',
      color: theme.textMuted
    },
    error: {
      background: darkMode ? '#3d1f1f' : '#fef2f2',
      border: `1px solid ${darkMode ? '#ef4444' : '#fecaca'}`,
      borderRadius: '12px',
      padding: '20px',
      textAlign: 'center' as const,
      color: '#dc2626'
    }
  };

  const getStatusStyle = (status: string): React.CSSProperties => {
    switch (status) {
      case 'active':
        return { ...S.statusBadge, background: darkMode ? '#1f3d2a' : '#dcfce7', color: '#16a34a' };
      case 'disabled':
        return { ...S.statusBadge, background: darkMode ? '#3d3d1f' : '#fef9c3', color: '#ca8a04' };
      case 'suspended':
        return { ...S.statusBadge, background: darkMode ? '#3d1f1f' : '#fee2e2', color: '#dc2626' };
      default:
        return S.statusBadge;
    }
  };

  // Simple bar chart component
  const BarChart = ({ data, color, label }: { data: DailyData[], color: string, label: string }) => {
    const maxCount = Math.max(...data.map(d => d.count), 1);
    const last7Days = [];
    for (let i = 6; i >= 0; i--) {
      const date = new Date();
      date.setDate(date.getDate() - i);
      const dateStr = date.toISOString().split('T')[0];
      const found = data.find(d => d.date?.split('T')[0] === dateStr);
      last7Days.push({
        date: dateStr,
        count: found?.count || 0,
        dayName: date.toLocaleDateString('en-US', { weekday: 'short' })
      });
    }

    return (
      <div style={S.chartCard}>
        <div style={S.chartTitle}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: '8px', height: '120px' }}>
          {last7Days.map((d, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
              <div style={{ fontSize: '11px', color: '#6b7280', fontWeight: 500 }}>{d.count}</div>
              <div
                style={{
                  width: '100%',
                  height: `${Math.max((d.count / maxCount) * 80, 4)}px`,
                  background: `linear-gradient(180deg, ${color}, ${color}99)`,
                  borderRadius: '4px 4px 0 0',
                  transition: 'height 0.3s ease'
                }}
              />
              <div style={{ fontSize: '10px', color: '#9ca3af' }}>{d.dayName}</div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  if (status === 'loading' || loading) {
    return (
      <>
        <Head><title>Admin Dashboard - Gregory AI</title></Head>
        <style>{`
          body { margin: 0; padding: 0; background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
          html { background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
        `}</style>
        <div style={S.page}>
          <div style={S.loading}>Loading...</div>
        </div>
      </>
    );
  }

  if (error) {
    return (
      <>
        <Head><title>Admin Dashboard - Gregory AI</title></Head>
        <style>{`
          body { margin: 0; padding: 0; background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
          html { background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
        `}</style>
        <div style={S.page}>
          <div style={S.header}>
            <h1 style={S.title}>Admin Dashboard</h1>
            <div style={S.headerButtons}>
              <button style={S.themeBtn} onClick={toggleTheme}>
                {darkMode ? '☀️ Light' : '🌙 Dark'}
              </button>
              <button style={S.backBtn} onClick={() => router.push('/')}>← Back to Chat</button>
            </div>
          </div>
          <div style={S.error}>
            <p style={{ fontSize: '18px', marginBottom: '8px' }}>{error}</p>
            <p style={{ fontSize: '14px', color: '#6b7280' }}>
              You need admin privileges to access this page.
            </p>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>Admin Dashboard - Gregory AI</title>
        <meta name="robots" content="noindex, nofollow" />
      </Head>
      <style>{`
        body { margin: 0; padding: 0; background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
        html { background: ${darkMode ? '#1a1a2e' : 'linear-gradient(180deg, #f8fafc, #f1f5f9)'}; }
        ::placeholder { color: ${darkMode ? '#6b7280' : '#9ca3af'}; }
      `}</style>
      <div style={S.page}>
        <div style={S.header}>
          <h1 style={S.title}>Admin Dashboard</h1>
          <div style={S.headerButtons}>
            <button style={S.themeBtn} onClick={toggleTheme}>
              {darkMode ? '☀️ Light' : '🌙 Dark'}
            </button>
            <button style={S.backBtn} onClick={() => router.push('/')}>← Back to Chat</button>
          </div>
        </div>

        {/* Stats Grid */}
        {stats && (
          <div style={S.statsGrid}>
            <div style={S.statCard}>
              <div style={S.statValue}>{stats.totalUsers}</div>
              <div style={S.statLabel}>Total Users</div>
            </div>
            <div style={S.statCard}>
              <div style={{ ...S.statValue, color: '#16a34a' }}>{stats.activeUsers}</div>
              <div style={S.statLabel}>Active Users</div>
            </div>
            <div style={S.statCard}>
              <div style={{ ...S.statValue, color: '#ca8a04' }}>{stats.disabledUsers}</div>
              <div style={S.statLabel}>Disabled</div>
            </div>
                        <div style={S.statCard}>
              <div style={S.statValue}>{stats.totalConversations}</div>
              <div style={S.statLabel}>Conversations</div>
            </div>
            <div style={S.statCard}>
              <div style={S.statValue}>{stats.totalMessages}</div>
              <div style={S.statLabel}>Messages</div>
            </div>
            <div style={S.statCard}>
              <div style={{ ...S.statValue, color: '#16a34a' }}>{stats.newThisWeek}</div>
              <div style={S.statLabel}>New This Week</div>
            </div>
          </div>
        )}

        {/* Charts Section */}
        {stats && (
          <div style={S.chartSection}>
            <BarChart 
              data={stats.dailyRegistrations || []} 
              color="#2563eb" 
              label="📊 New Users (Last 7 Days)" 
            />
            <BarChart 
              data={stats.dailyMessages || []} 
              color="#16a34a" 
              label="💬 Messages (Last 7 Days)" 
            />
            <BarChart 
              data={stats.dailyConversations || []} 
              color="#7c3aed" 
              label="🗨️ Conversations (Last 7 Days)" 
            />
          </div>
        )}

        {/* Controls */}
        <div style={S.controls}>
          <input
            type="text"
            placeholder="Search users..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            style={S.searchInput}
          />
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            style={S.select}
          >
            <option value="all">All Status</option>
            <option value="active">Active</option>
            <option value="disabled">Disabled</option>
            <option value="suspended">Suspended</option>
          </select>
          <button
            onClick={loadData}
            style={{ ...S.backBtn, background: 'linear-gradient(90deg, #2563eb, #7c3aed)', border: 'none', color: '#fff' }}
          >
            Refresh
          </button>
        </div>

        {/* Users Table */}
        <div style={{ ...S.tableContainer, overflowX: 'auto' }}>
          <table style={S.table}>
            <thead>
              <tr>
                <th style={S.th}>User</th>
                <th style={S.th}>Status</th>
                <th style={S.th}>Role</th>
                <th style={S.th}>Conversations</th>
                <th style={S.th}>Joined</th>
                <th style={S.th}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredUsers.map((user) => (
                <tr key={user.id}>
                  <td style={S.td}>
                    <div style={S.userInfo}>
                      {user.image ? (
                        <img src={user.image} alt="" style={{ ...S.avatar, background: 'none' }} />
                      ) : (
                        <div style={S.avatar}>
                          {(user.name || user.email || user.username || 'U')[0].toUpperCase()}
                        </div>
                      )}
                      <div>
                        <div style={{ fontWeight: 600 }}>{user.name || user.username || 'Unknown'}</div>
                        <div style={{ fontSize: '12px', color: '#9ca3af' }}>{user.email || user.username}</div>
                      </div>
                    </div>
                  </td>
                  <td style={S.td}>
                    <span style={getStatusStyle(user.status)}>{user.status}</span>
                  </td>
                  <td style={S.td}>
                    <span style={{
                      ...S.statusBadge,
                      background: user.is_admin ? (darkMode ? '#1f2d3d' : '#dbeafe') : (darkMode ? '#2d2d44' : '#f3f4f6'),
                      color: user.is_admin ? '#2563eb' : theme.textMuted
                    }}>
                      {user.is_admin ? 'Admin' : 'User'}
                    </span>
                  </td>
                  <td style={S.td}>{user.conversation_count}</td>
                  <td style={S.td}>{formatDate(user.created_at)}</td>
                  <td style={S.td}>
                    <select
                      value={user.status}
                      onChange={(e) => updateUserStatus(user.id, e.target.value)}
                      style={{ ...S.select, padding: '6px 10px', fontSize: '12px' }}
                    >
                      <option value="active">Active</option>
                      <option value="disabled">Disabled</option>
                      <option value="suspended">Suspended</option>
                    </select>
                    <button
                      onClick={() => toggleAdmin(user.id, user.is_admin)}
                      style={{
                        ...S.actionBtn,
                        background: user.is_admin ? (darkMode ? '#3d3d5c' : '#f3f4f6') : (darkMode ? '#1f2d3d' : '#dbeafe'),
                        color: user.is_admin ? theme.textSecondary : '#2563eb'
                      }}
                    >
                      {user.is_admin ? 'Remove Admin' : 'Make Admin'}
                    </button>
                    <button
                      onClick={() => deleteUser(user.id)}
                      style={{ ...S.actionBtn, background: darkMode ? '#3d1f1f' : '#fee2e2', color: '#dc2626' }}
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {filteredUsers.length === 0 && (
          <div style={{ textAlign: 'center', padding: '40px', color: '#6b7280' }}>
            No users found matching your criteria.
          </div>
        )}
      </div>
    </>
  );
}