"use client";

import { useEffect, useState, useCallback } from "react";
import { Permission } from "../../auth-context";
import { api } from "../../api";
import { sharedStyles } from "../../styles/shared";
import { Header } from "../../components/Header";
import { useRequireAuth } from "../../hooks/useRequireAuth";

interface InviteRecord {
  id: number;
  identifier: string;
  godfather_id: number;
  godfather_email: string;
  status: string;
  used_by_id: number | null;
  used_by_email: string | null;
  created_at: string;
  spent_at: string | null;
  revoked_at: string | null;
}

interface PaginatedResponse<T> {
  records: T[];
  total: number;
  page: number;
  per_page: number;
  total_pages: number;
}

interface UserOption {
  id: number;
  email: string;
}

export default function AdminInvitesPage() {
  const [data, setData] = useState<PaginatedResponse<InviteRecord> | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState<string>("");
  const [isCreating, setIsCreating] = useState(false);
  const [newGodfatherId, setNewGodfatherId] = useState("");
  const [createError, setCreateError] = useState<string | null>(null);
  const [users, setUsers] = useState<UserOption[]>([]);
  const { user, isLoading, isAuthorized } = useRequireAuth({
    requiredPermission: Permission.MANAGE_INVITES,
    fallbackRedirect: "/",
  });

  const fetchUsers = useCallback(async () => {
    try {
      const data = await api.get<UserOption[]>("/api/admin/users");
      setUsers(data);
    } catch (err) {
      console.error("Failed to fetch users:", err);
    }
  }, []);

  const fetchInvites = useCallback(async (page: number, status: string) => {
    setError(null);
    try {
      let url = `/api/admin/invites?page=${page}&per_page=10`;
      if (status) {
        url += `&status=${status}`;
      }
      const data = await api.get<PaginatedResponse<InviteRecord>>(url);
      setData(data);
    } catch (err) {
      setData(null);
      setError(err instanceof Error ? err.message : "Failed to load invites");
    }
  }, []);

  useEffect(() => {
    if (user && isAuthorized) {
      fetchUsers();
      fetchInvites(page, statusFilter);
    }
  }, [user, page, statusFilter, isAuthorized, fetchUsers, fetchInvites]);

  const handleCreateInvite = async () => {
    if (!newGodfatherId) {
      setCreateError("Please select a godfather");
      return;
    }
    
    setIsCreating(true);
    setCreateError(null);
    
    try {
      await api.post("/api/admin/invites", {
        godfather_id: parseInt(newGodfatherId),
      });
      setNewGodfatherId("");
      fetchInvites(1, statusFilter);
      setPage(1);
    } catch (err) {
      setCreateError(err instanceof Error ? err.message : "Failed to create invite");
    } finally {
      setIsCreating(false);
    }
  };

  const handleRevoke = async (inviteId: number) => {
    try {
      await api.post(`/api/admin/invites/${inviteId}/revoke`);
      setError(null);
      fetchInvites(page, statusFilter);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to revoke invite");
    }
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleString();
  };

  const getStatusBadgeStyle = (status: string) => {
    switch (status) {
      case "ready":
        return styles.statusReady;
      case "spent":
        return styles.statusSpent;
      case "revoked":
        return styles.statusRevoked;
      default:
        return {};
    }
  };

  if (isLoading) {
    return (
      <main style={styles.main}>
        <div style={styles.loader}>Loading...</div>
      </main>
    );
  }

  if (!user || !isAuthorized) {
    return null;
  }

  return (
    <main style={styles.main}>
      <Header currentPage="admin-invites" />

      <div style={styles.content}>
        <div style={styles.pageContainer}>
          {/* Create Invite Section */}
          <div style={styles.createCard}>
            <h2 style={styles.createTitle}>Create Invite</h2>
            <div style={styles.createForm}>
              <div style={styles.inputGroup}>
                <label style={styles.inputLabel}>Godfather (user who can share this invite)</label>
                <select
                  value={newGodfatherId}
                  onChange={(e) => setNewGodfatherId(e.target.value)}
                  style={styles.select}
                >
                  <option value="">Select a user...</option>
                  {users.map((u) => (
                    <option key={u.id} value={u.id}>
                      {u.email}
                    </option>
                  ))}
                </select>
                {users.length === 0 && (
                  <span style={styles.inputHint}>
                    No users loaded yet. Create at least one invite to populate the list.
                  </span>
                )}
              </div>
              {createError && <div style={styles.createError}>{createError}</div>}
              <button
                onClick={handleCreateInvite}
                disabled={isCreating || !newGodfatherId}
                style={{
                  ...styles.createButton,
                  ...(!newGodfatherId ? styles.createButtonDisabled : {}),
                }}
              >
                {isCreating ? "Creating..." : "Create Invite"}
              </button>
            </div>
          </div>

          {/* Invites Table */}
          <div style={styles.tableCard}>
            <div style={styles.tableHeader}>
              <h2 style={styles.tableTitle}>All Invites</h2>
              <div style={styles.filterGroup}>
                <select
                  value={statusFilter}
                  onChange={(e) => {
                    setStatusFilter(e.target.value);
                    setPage(1);
                  }}
                  style={styles.filterSelect}
                >
                  <option value="">All statuses</option>
                  <option value="ready">Ready</option>
                  <option value="spent">Spent</option>
                  <option value="revoked">Revoked</option>
                </select>
                <span style={styles.totalCount}>
                  {data?.total ?? 0} invites
                </span>
              </div>
            </div>
            
            <div style={styles.tableWrapper}>
              <table style={styles.table}>
                <thead>
                  <tr>
                    <th style={styles.th}>Code</th>
                    <th style={styles.th}>Godfather</th>
                    <th style={styles.th}>Status</th>
                    <th style={styles.th}>Used By</th>
                    <th style={styles.th}>Created</th>
                    <th style={styles.th}>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {error && (
                    <tr>
                      <td colSpan={6} style={styles.errorRow}>{error}</td>
                    </tr>
                  )}
                  {!error && data?.records.map((record) => (
                    <tr key={record.id} style={styles.tr}>
                      <td style={styles.tdCode}>{record.identifier}</td>
                      <td style={styles.td}>{record.godfather_email}</td>
                      <td style={styles.td}>
                        <span style={{ ...styles.statusBadge, ...getStatusBadgeStyle(record.status) }}>
                          {record.status}
                        </span>
                      </td>
                      <td style={styles.td}>
                        {record.used_by_email || "-"}
                      </td>
                      <td style={styles.tdDate}>{formatDate(record.created_at)}</td>
                      <td style={styles.td}>
                        {record.status === "ready" && (
                          <button
                            onClick={() => handleRevoke(record.id)}
                            style={styles.revokeButton}
                          >
                            Revoke
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                  {!error && (!data || data.records.length === 0) && (
                    <tr>
                      <td colSpan={6} style={styles.emptyRow}>No invites yet</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            
            {data && data.total_pages > 1 && (
              <div style={styles.pagination}>
                <button
                  onClick={() => setPage((p) => Math.max(1, p - 1))}
                  disabled={page === 1}
                  style={styles.pageBtn}
                >
                  ←
                </button>
                <span style={styles.pageInfo}>
                  {page} / {data.total_pages}
                </span>
                <button
                  onClick={() => setPage((p) => Math.min(data.total_pages, p + 1))}
                  disabled={page === data.total_pages}
                  style={styles.pageBtn}
                >
                  →
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

const pageStyles: Record<string, React.CSSProperties> = {
  content: {
    flex: 1,
    padding: "2rem",
    overflowY: "auto",
  },
  pageContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "2rem",
    maxWidth: "1000px",
    margin: "0 auto",
  },
  createCard: {
    background: "rgba(99, 102, 241, 0.08)",
    border: "1px solid rgba(99, 102, 241, 0.2)",
    borderRadius: "16px",
    padding: "1.5rem",
  },
  createTitle: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "1rem",
    fontWeight: 600,
    color: "rgba(255, 255, 255, 0.9)",
    margin: "0 0 1rem 0",
  },
  createForm: {
    display: "flex",
    flexDirection: "column",
    gap: "1rem",
  },
  inputGroup: {
    display: "flex",
    flexDirection: "column",
    gap: "0.5rem",
  },
  inputLabel: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.8rem",
    color: "rgba(255, 255, 255, 0.5)",
  },
  select: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.9rem",
    padding: "0.75rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "#fff",
    maxWidth: "400px",
    cursor: "pointer",
  },
  createError: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.85rem",
    color: "#f87171",
  },
  createButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.9rem",
    fontWeight: 500,
    padding: "0.75rem 1.5rem",
    background: "rgba(99, 102, 241, 0.3)",
    color: "#fff",
    border: "1px solid rgba(99, 102, 241, 0.5)",
    borderRadius: "8px",
    cursor: "pointer",
    alignSelf: "flex-start",
  },
  createButtonDisabled: {
    opacity: 0.5,
    cursor: "not-allowed",
  },
  inputHint: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    color: "rgba(255, 255, 255, 0.4)",
    fontStyle: "italic",
  },
  tableCard: {
    background: "rgba(255, 255, 255, 0.03)",
    backdropFilter: "blur(10px)",
    border: "1px solid rgba(255, 255, 255, 0.08)",
    borderRadius: "20px",
    padding: "1.5rem",
    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
  },
  tableHeader: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: "1rem",
    flexWrap: "wrap",
    gap: "1rem",
  },
  tableTitle: {
    fontFamily: "'Instrument Serif', Georgia, serif",
    fontSize: "1.5rem",
    fontWeight: 400,
    color: "#fff",
    margin: 0,
  },
  filterGroup: {
    display: "flex",
    alignItems: "center",
    gap: "1rem",
  },
  filterSelect: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.85rem",
    padding: "0.5rem 1rem",
    background: "rgba(255, 255, 255, 0.05)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    color: "#fff",
    cursor: "pointer",
  },
  totalCount: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "rgba(255, 255, 255, 0.4)",
  },
  tableWrapper: {
    overflowX: "auto",
  },
  table: {
    width: "100%",
    borderCollapse: "collapse",
    fontFamily: "'DM Sans', system-ui, sans-serif",
  },
  th: {
    textAlign: "left",
    padding: "0.75rem 1rem",
    fontSize: "0.75rem",
    fontWeight: 600,
    color: "rgba(255, 255, 255, 0.4)",
    textTransform: "uppercase",
    letterSpacing: "0.05em",
    borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
  },
  tr: {
    borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
  },
  td: {
    padding: "0.875rem 1rem",
    fontSize: "0.875rem",
    color: "rgba(255, 255, 255, 0.7)",
  },
  tdCode: {
    padding: "0.875rem 1rem",
    fontSize: "0.875rem",
    color: "#fff",
    fontFamily: "'DM Mono', monospace",
  },
  tdDate: {
    padding: "0.875rem 1rem",
    fontSize: "0.75rem",
    color: "rgba(255, 255, 255, 0.4)",
  },
  statusBadge: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.7rem",
    fontWeight: 500,
    padding: "0.25rem 0.5rem",
    borderRadius: "4px",
    textTransform: "uppercase",
  },
  statusReady: {
    background: "rgba(99, 102, 241, 0.2)",
    color: "rgba(129, 140, 248, 0.9)",
  },
  statusSpent: {
    background: "rgba(34, 197, 94, 0.2)",
    color: "rgba(34, 197, 94, 0.9)",
  },
  statusRevoked: {
    background: "rgba(239, 68, 68, 0.2)",
    color: "rgba(239, 68, 68, 0.9)",
  },
  revokeButton: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.75rem",
    padding: "0.4rem 0.75rem",
    background: "rgba(239, 68, 68, 0.15)",
    color: "rgba(239, 68, 68, 0.9)",
    border: "1px solid rgba(239, 68, 68, 0.3)",
    borderRadius: "6px",
    cursor: "pointer",
  },
  emptyRow: {
    padding: "2rem 1rem",
    textAlign: "center",
    color: "rgba(255, 255, 255, 0.3)",
    fontSize: "0.875rem",
  },
  errorRow: {
    padding: "2rem 1rem",
    textAlign: "center",
    color: "#f87171",
    fontSize: "0.875rem",
  },
  pagination: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    gap: "1rem",
    marginTop: "1rem",
    paddingTop: "1rem",
    borderTop: "1px solid rgba(255, 255, 255, 0.06)",
  },
  pageBtn: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    padding: "0.5rem 1rem",
    fontSize: "1rem",
    background: "rgba(255, 255, 255, 0.05)",
    color: "rgba(255, 255, 255, 0.7)",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    borderRadius: "8px",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  pageInfo: {
    fontFamily: "'DM Sans', system-ui, sans-serif",
    fontSize: "0.875rem",
    color: "rgba(255, 255, 255, 0.5)",
  },
};

const styles = { ...sharedStyles, ...pageStyles };