import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/useAuthStore';
import { useSEO } from '../utils/useSEO';
import {
  getAdminSetupStatus,
  createFirstAdmin,
  adminListUsers,
  adminUpdateUser,
  adminDeleteUser,
  adminListProjects,
  adminDeleteProject,
  type AdminUserResponse,
  type AdminProjectResponse,
  type AdminUserUpdateRequest,
} from '../services/adminService';

type Tab = 'users' | 'projects';

// ── Edit User Modal ───────────────────────────────────────────────────────────

function EditUserModal({
  user,
  onClose,
  onSave,
}: {
  user: AdminUserResponse;
  onClose: () => void;
  onSave: (id: string, body: AdminUserUpdateRequest) => Promise<void>;
}) {
  const [username, setUsername] = useState(user.username);
  const [email, setEmail] = useState(user.email);
  const [password, setPassword] = useState('');
  const [isAdmin, setIsAdmin] = useState(user.is_admin);
  const [isActive, setIsActive] = useState(user.is_active);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');

  const handleSave = async () => {
    setSaving(true);
    setError('');
    const body: AdminUserUpdateRequest = {};
    if (username !== user.username) body.username = username;
    if (email !== user.email) body.email = email;
    if (password) body.password = password;
    if (isAdmin !== user.is_admin) body.is_admin = isAdmin;
    if (isActive !== user.is_active) body.is_active = isActive;
    try {
      await onSave(user.id, body);
      onClose();
    } catch (err: any) {
      setError(err?.response?.data?.detail || 'Failed to save.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div style={modalStyles.overlay} onClick={onClose}>
      <div style={modalStyles.box} onClick={(e) => e.stopPropagation()}>
        <h2 style={modalStyles.title}>Edit user</h2>
        {error && <div style={modalStyles.error}>{error}</div>}

        <label style={modalStyles.label}>Username</label>
        <input style={modalStyles.input} value={username} onChange={(e) => setUsername(e.target.value)} />

        <label style={modalStyles.label}>Email</label>
        <input style={modalStyles.input} value={email} onChange={(e) => setEmail(e.target.value)} />

        <label style={modalStyles.label}>New password (leave blank to keep)</label>
        <input
          style={modalStyles.input}
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Min. 8 characters"
        />

        <div style={modalStyles.checkRow}>
          <input
            id="is_admin"
            type="checkbox"
            checked={isAdmin}
            onChange={(e) => setIsAdmin(e.target.checked)}
          />
          <label htmlFor="is_admin" style={modalStyles.checkLabel}>Admin</label>
        </div>

        <div style={modalStyles.checkRow}>
          <input
            id="is_active"
            type="checkbox"
            checked={isActive}
            onChange={(e) => setIsActive(e.target.checked)}
          />
          <label htmlFor="is_active" style={modalStyles.checkLabel}>Active</label>
        </div>

        <div style={modalStyles.actions}>
          <button style={modalStyles.cancelBtn} onClick={onClose} disabled={saving}>Cancel</button>
          <button style={modalStyles.saveBtn} onClick={handleSave} disabled={saving}>
            {saving ? 'Saving…' : 'Save'}
          </button>
        </div>
      </div>
    </div>
  );
}

const modalStyles: Record<string, React.CSSProperties> = {
  overlay: {
    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)',
    display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100,
  },
  box: {
    background: '#252526', border: '1px solid #3c3c3c', borderRadius: 8,
    padding: '1.5rem', width: 400, display: 'flex', flexDirection: 'column', gap: 10,
  },
  title: { color: '#ccc', margin: 0, fontSize: 18, fontWeight: 600 },
  label: { color: '#9d9d9d', fontSize: 13 },
  input: {
    background: '#3c3c3c', border: '1px solid #555', borderRadius: 4,
    padding: '7px 10px', color: '#ccc', fontSize: 14, outline: 'none',
  },
  checkRow: { display: 'flex', alignItems: 'center', gap: 8 },
  checkLabel: { color: '#ccc', fontSize: 14 },
  actions: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 4 },
  cancelBtn: {
    background: '#3c3c3c', border: 'none', borderRadius: 4,
    color: '#ccc', padding: '7px 16px', fontSize: 14, cursor: 'pointer',
  },
  saveBtn: {
    background: '#0e639c', border: 'none', borderRadius: 4,
    color: '#fff', padding: '7px 16px', fontSize: 14, cursor: 'pointer',
  },
  error: {
    background: '#5a1d1d', border: '1px solid #f44747', borderRadius: 4,
    color: '#f44747', padding: '7px 12px', fontSize: 13,
  },
};

// ── Setup screen ──────────────────────────────────────────────────────────────

function SetupScreen({ onDone }: { onDone: () => void }) {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (password !== confirm) {
      setError('Passwords do not match.');
      return;
    }
    setLoading(true);
    try {
      await createFirstAdmin(username, email, password);
      onDone();
      navigate('/login?redirect=/admin');
    } catch (err: any) {
      setError(err?.response?.data?.detail || 'Failed to create admin.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={s.page}>
      <div style={s.card}>
        <h1 style={s.cardTitle}>Admin setup</h1>
        <p style={s.muted}>No admin account exists yet. Create the first admin user to proceed.</p>
        {error && <div style={s.error}>{error}</div>}
        <form onSubmit={handleCreate} style={s.form}>
          <label style={s.label}>Username</label>
          <input
            style={s.input}
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            required
            autoFocus
            placeholder="admin"
          />
          <label style={s.label}>Email</label>
          <input
            style={s.input}
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            placeholder="admin@example.com"
          />
          <label style={s.label}>Password</label>
          <input
            style={s.input}
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            placeholder="Min. 8 characters"
          />
          <label style={s.label}>Confirm password</label>
          <input
            style={s.input}
            type="password"
            value={confirm}
            onChange={(e) => setConfirm(e.target.value)}
            required
          />
          <button type="submit" disabled={loading} style={s.primaryBtn}>
            {loading ? 'Creating…' : 'Create admin'}
          </button>
        </form>
      </div>
    </div>
  );
}

// ── Not-admin screen ──────────────────────────────────────────────────────────

function NotAdminScreen() {
  return (
    <div style={s.page}>
      <div style={s.card}>
        <h1 style={s.cardTitle}>Admin access required</h1>
        <p style={s.muted}>You must be logged in as an admin to access this panel.</p>
        <Link to="/login?redirect=/admin" style={s.primaryBtn}>
          Go to login
        </Link>
      </div>
    </div>
  );
}

// ── Users tab ─────────────────────────────────────────────────────────────────

function UsersTab({ currentUserId }: { currentUserId: string }) {
  const [users, setUsers] = useState<AdminUserResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [editUser, setEditUser] = useState<AdminUserResponse | null>(null);
  const [error, setError] = useState('');

  const load = () => {
    setLoading(true);
    adminListUsers()
      .then(setUsers)
      .catch(() => setError('Failed to load users.'))
      .finally(() => setLoading(false));
  };

  useEffect(load, []);

  const handleSave = async (id: string, body: AdminUserUpdateRequest) => {
    const updated = await adminUpdateUser(id, body);
    setUsers((prev) => prev.map((u) => (u.id === id ? updated : u)));
  };

  const handleDelete = async (user: AdminUserResponse) => {
    if (!confirm(`Delete user "${user.username}" and all their projects? This cannot be undone.`)) return;
    try {
      await adminDeleteUser(user.id);
      setUsers((prev) => prev.filter((u) => u.id !== user.id));
    } catch (err: any) {
      alert(err?.response?.data?.detail || 'Failed to delete user.');
    }
  };

  const filtered = users.filter(
    (u) =>
      u.username.toLowerCase().includes(search.toLowerCase()) ||
      u.email.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <div style={s.tabContent}>
      {error && <div style={s.error}>{error}</div>}
      <div style={s.searchRow}>
        <input
          style={s.searchInput}
          placeholder="Search by username or email…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <span style={s.muted}>{filtered.length} user{filtered.length !== 1 ? 's' : ''}</span>
      </div>

      {loading ? (
        <p style={s.muted}>Loading…</p>
      ) : (
        <div style={s.tableWrap}>
          <table style={s.table}>
            <thead>
              <tr>
                <th style={s.th}>Username</th>
                <th style={s.th}>Email</th>
                <th style={s.th}>Role</th>
                <th style={s.th}>Status</th>
                <th style={s.th}>Projects</th>
                <th style={s.th}>Joined</th>
                <th style={s.th}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((u) => (
                <tr key={u.id} style={s.tr}>
                  <td style={s.td}>
                    <span style={s.username}>{u.username}</span>
                    {u.id === currentUserId && (
                      <span style={s.youBadge}>you</span>
                    )}
                  </td>
                  <td style={s.td}>{u.email}</td>
                  <td style={s.td}>
                    <span style={u.is_admin ? s.adminBadge : s.userBadge}>
                      {u.is_admin ? 'admin' : 'user'}
                    </span>
                  </td>
                  <td style={s.td}>
                    <span style={u.is_active ? s.activeBadge : s.inactiveBadge}>
                      {u.is_active ? 'active' : 'disabled'}
                    </span>
                  </td>
                  <td style={s.td}>{u.project_count}</td>
                  <td style={s.td}>{new Date(u.created_at).toLocaleDateString()}</td>
                  <td style={s.td}>
                    <button style={s.editBtn} onClick={() => setEditUser(u)}>Edit</button>
                    {u.id !== currentUserId && (
                      <button style={s.deleteBtn} onClick={() => handleDelete(u)}>Delete</button>
                    )}
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={7} style={{ ...s.td, textAlign: 'center', color: '#666' }}>
                    No users found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}

      {editUser && (
        <EditUserModal
          user={editUser}
          onClose={() => setEditUser(null)}
          onSave={handleSave}
        />
      )}
    </div>
  );
}

// ── Projects tab ──────────────────────────────────────────────────────────────

function ProjectsTab() {
  const [projects, setProjects] = useState<AdminProjectResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    adminListProjects()
      .then(setProjects)
      .catch(() => setError('Failed to load projects.'))
      .finally(() => setLoading(false));
  }, []);

  const handleDelete = async (project: AdminProjectResponse) => {
    if (!confirm(`Delete project "${project.name}"? This cannot be undone.`)) return;
    try {
      await adminDeleteProject(project.id);
      setProjects((prev) => prev.filter((p) => p.id !== project.id));
    } catch (err: any) {
      alert(err?.response?.data?.detail || 'Failed to delete project.');
    }
  };

  const filtered = projects.filter(
    (p) =>
      p.name.toLowerCase().includes(search.toLowerCase()) ||
      p.owner_username.toLowerCase().includes(search.toLowerCase()),
  );

  return (
    <div style={s.tabContent}>
      {error && <div style={s.error}>{error}</div>}
      <div style={s.searchRow}>
        <input
          style={s.searchInput}
          placeholder="Search by name or owner…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <span style={s.muted}>{filtered.length} project{filtered.length !== 1 ? 's' : ''}</span>
      </div>

      {loading ? (
        <p style={s.muted}>Loading…</p>
      ) : (
        <div style={s.tableWrap}>
          <table style={s.table}>
            <thead>
              <tr>
                <th style={s.th}>Name</th>
                <th style={s.th}>Owner</th>
                <th style={s.th}>Board</th>
                <th style={s.th}>Visibility</th>
                <th style={s.th}>Updated</th>
                <th style={s.th}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p) => (
                <tr key={p.id} style={s.tr}>
                  <td style={s.td}>
                    <Link
                      to={`/project/${p.id}`}
                      style={{ color: '#4fc3f7', textDecoration: 'none' }}
                      target="_blank"
                    >
                      {p.name}
                    </Link>
                  </td>
                  <td style={s.td}>
                    <Link
                      to={`/${p.owner_username}`}
                      style={{ color: '#9d9d9d', textDecoration: 'none' }}
                      target="_blank"
                    >
                      {p.owner_username}
                    </Link>
                  </td>
                  <td style={s.td}>{p.board_type}</td>
                  <td style={s.td}>
                    <span style={p.is_public ? s.activeBadge : s.inactiveBadge}>
                      {p.is_public ? 'public' : 'private'}
                    </span>
                  </td>
                  <td style={s.td}>{new Date(p.updated_at).toLocaleDateString()}</td>
                  <td style={s.td}>
                    <button style={s.deleteBtn} onClick={() => handleDelete(p)}>Delete</button>
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={6} style={{ ...s.td, textAlign: 'center', color: '#666' }}>
                    No projects found.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ── Admin dashboard ───────────────────────────────────────────────────────────

function AdminDashboard() {
  const [tab, setTab] = useState<Tab>('users');
  const user = useAuthStore((s) => s.user);
  const logout = useAuthStore((s) => s.logout);
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    navigate('/');
  };

  return (
    <div style={s.dashboard}>
      <div style={s.header}>
        <div style={s.headerLeft}>
          <Link to="/" style={s.backLink}>Velxio</Link>
          <span style={s.headerSep}>/</span>
          <span style={s.headerTitle}>Admin panel</span>
        </div>
        <div style={s.headerRight}>
          <span style={s.adminLabel}>{user?.username}</span>
          <button style={s.logoutBtn} onClick={handleLogout}>Logout</button>
        </div>
      </div>

      <div style={s.tabs}>
        <button
          style={tab === 'users' ? s.tabActive : s.tabBtn}
          onClick={() => setTab('users')}
        >
          Users
        </button>
        <button
          style={tab === 'projects' ? s.tabActive : s.tabBtn}
          onClick={() => setTab('projects')}
        >
          Projects
        </button>
      </div>

      {tab === 'users' && <UsersTab currentUserId={user?.id || ''} />}
      {tab === 'projects' && <ProjectsTab />}
    </div>
  );
}

// ── Main AdminPage ────────────────────────────────────────────────────────────

type AdminPageState = 'loading' | 'setup' | 'not-admin' | 'dashboard';

export const AdminPage: React.FC = () => {
  useSEO({
    title: 'Admin — Velxio',
    description: 'Velxio administration panel.',
    url: 'https://velxio.dev/admin',
    noindex: true,
  });

  const user = useAuthStore((s) => s.user);
  const [pageState, setPageState] = useState<AdminPageState>('loading');

  useEffect(() => {
    getAdminSetupStatus()
      .then(({ has_admin }) => {
        if (!has_admin) {
          setPageState('setup');
          return;
        }
        if (!user || !user.is_admin) {
          setPageState('not-admin');
          return;
        }
        setPageState('dashboard');
      })
      .catch(() => setPageState('not-admin'));
  }, [user]);

  if (pageState === 'loading') {
    return (
      <div style={{ ...s.page, alignItems: 'center', justifyContent: 'center' }}>
        <p style={s.muted}>Loading…</p>
      </div>
    );
  }

  if (pageState === 'setup') {
    return <SetupScreen onDone={() => setPageState('not-admin')} />;
  }

  if (pageState === 'not-admin') {
    return <NotAdminScreen />;
  }

  return <AdminDashboard />;
};

// ── Styles ────────────────────────────────────────────────────────────────────

const s: Record<string, React.CSSProperties> = {
  page: { minHeight: '100vh', background: '#1e1e1e', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem' },
  card: { background: '#252526', border: '1px solid #3c3c3c', borderRadius: 8, padding: '2rem', width: 380, display: 'flex', flexDirection: 'column', gap: 12 },
  cardTitle: { color: '#ccc', margin: 0, fontSize: 22, fontWeight: 600 },
  muted: { color: '#777', fontSize: 13, margin: 0 },
  form: { display: 'flex', flexDirection: 'column', gap: 8 },
  label: { color: '#9d9d9d', fontSize: 13 },
  input: { background: '#3c3c3c', border: '1px solid #555', borderRadius: 4, padding: '8px 10px', color: '#ccc', fontSize: 14, outline: 'none' },
  primaryBtn: {
    display: 'block', textAlign: 'center', textDecoration: 'none',
    marginTop: 8, background: '#0e639c', border: 'none', borderRadius: 4,
    color: '#fff', padding: '9px', fontSize: 14, cursor: 'pointer', fontWeight: 500,
  },
  error: { background: '#5a1d1d', border: '1px solid #f44747', borderRadius: 4, color: '#f44747', padding: '8px 12px', fontSize: 13 },
  // Dashboard
  dashboard: { minHeight: '100vh', background: '#1e1e1e', display: 'flex', flexDirection: 'column' },
  header: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: '#252526', borderBottom: '1px solid #3c3c3c', padding: '0 1.5rem', height: 48,
  },
  headerLeft: { display: 'flex', alignItems: 'center', gap: 8 },
  backLink: { color: '#4fc3f7', textDecoration: 'none', fontSize: 14, fontWeight: 600 },
  headerSep: { color: '#555', fontSize: 14 },
  headerTitle: { color: '#ccc', fontSize: 14 },
  headerRight: { display: 'flex', alignItems: 'center', gap: 12 },
  adminLabel: { color: '#9d9d9d', fontSize: 13 },
  logoutBtn: { background: 'transparent', border: '1px solid #555', borderRadius: 4, color: '#ccc', padding: '4px 12px', fontSize: 13, cursor: 'pointer' },
  tabs: { display: 'flex', gap: 0, borderBottom: '1px solid #3c3c3c', padding: '0 1.5rem' },
  tabBtn: { background: 'transparent', border: 'none', borderBottom: '2px solid transparent', color: '#9d9d9d', padding: '10px 16px', fontSize: 14, cursor: 'pointer' },
  tabActive: { background: 'transparent', border: 'none', borderBottom: '2px solid #0e639c', color: '#fff', padding: '10px 16px', fontSize: 14, cursor: 'pointer' },
  tabContent: { padding: '1.5rem', flex: 1 },
  searchRow: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 },
  searchInput: { background: '#3c3c3c', border: '1px solid #555', borderRadius: 4, padding: '7px 10px', color: '#ccc', fontSize: 14, outline: 'none', width: 300 },
  tableWrap: { overflowX: 'auto' },
  table: { width: '100%', borderCollapse: 'collapse', fontSize: 13 },
  th: { textAlign: 'left', color: '#9d9d9d', padding: '8px 12px', borderBottom: '1px solid #3c3c3c', fontWeight: 500, whiteSpace: 'nowrap' },
  tr: { borderBottom: '1px solid #2d2d2d' },
  td: { color: '#ccc', padding: '10px 12px', verticalAlign: 'middle' },
  username: { fontWeight: 500 },
  youBadge: { marginLeft: 6, background: '#2d4a2d', color: '#73c991', border: '1px solid #4a7a4a', borderRadius: 4, padding: '1px 6px', fontSize: 11 },
  adminBadge: { background: '#2d3a5a', color: '#9cdcfe', border: '1px solid #4a6a9a', borderRadius: 4, padding: '2px 8px', fontSize: 11 },
  userBadge: { background: '#3a3a3a', color: '#9d9d9d', border: '1px solid #555', borderRadius: 4, padding: '2px 8px', fontSize: 11 },
  activeBadge: { background: '#2d4a2d', color: '#73c991', border: '1px solid #4a7a4a', borderRadius: 4, padding: '2px 8px', fontSize: 11 },
  inactiveBadge: { background: '#4a2d2d', color: '#f14c4c', border: '1px solid #7a4a4a', borderRadius: 4, padding: '2px 8px', fontSize: 11 },
  editBtn: { background: '#3c3c3c', border: 'none', borderRadius: 4, color: '#ccc', padding: '4px 10px', fontSize: 12, cursor: 'pointer', marginRight: 4 },
  deleteBtn: { background: '#5a1d1d', border: 'none', borderRadius: 4, color: '#f44747', padding: '4px 10px', fontSize: 12, cursor: 'pointer' },
};
