'use client';

/**
 * Impersonation Banner Component
 *
 * Displays a fixed banner at the top of the screen when an admin is
 * impersonating a dealer. The admin's session now represents the dealer,
 * but includes impersonation metadata allowing them to exit.
 *
 * Features:
 * - Shows the dealer being impersonated (session.user)
 * - Shows the original admin identity (session.impersonation)
 * - Displays time remaining before auto-expiry
 * - Exit button to restore admin's original session
 * - Fixed position at top of viewport
 * - Distinct warning styling (orange/red)
 */

import React, { useState, useEffect, useCallback } from 'react';
import { useSession } from 'next-auth/react';
import { SupportNotesModal } from './admin/SupportNotesModal';
import styles from './ImpersonationBanner.module.css';

export function ImpersonationBanner() {
  const { data: session } = useSession();
  const [isEnding, setIsEnding] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [timeRemaining, setTimeRemaining] = useState<string>('');
  const [isNotesModalOpen, setIsNotesModalOpen] = useState(false);

  // Memoize modal callbacks to prevent re-renders from timer affecting modal focus
  const handleOpenNotesModal = useCallback(() => setIsNotesModalOpen(true), []);
  const handleCloseNotesModal = useCallback(() => setIsNotesModalOpen(false), []);

  // Calculate time remaining
  useEffect(() => {
    if (!session?.impersonation?.expiresAt) {
      return;
    }

    const updateTimeRemaining = () => {
      const expiry = new Date(session.impersonation!.expiresAt);
      const now = new Date();
      const diffMs = expiry.getTime() - now.getTime();

      if (diffMs <= 0) {
        setTimeRemaining('Expired');
        return;
      }

      const minutes = Math.floor(diffMs / 60000);
      const seconds = Math.floor((diffMs % 60000) / 1000);

      if (minutes > 0) {
        setTimeRemaining(`${minutes}m ${seconds}s remaining`);
      } else {
        setTimeRemaining(`${seconds}s remaining`);
      }
    };

    // Update immediately
    updateTimeRemaining();

    // Update every second
    const interval = setInterval(updateTimeRemaining, 1000);

    return () => clearInterval(interval);
  }, [session?.impersonation]);

  // Handle exit impersonation - restores admin's original session
  const handleExitImpersonation = async () => {
    setIsEnding(true);
    setError(null);

    try {
      const response = await fetch('/api/admin/impersonate/end', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({}), // No body needed - admin info is in JWT
      });

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.error || 'Failed to end impersonation');
      }

      // Redirect to admin dashboard (session cookie already updated by API)
      window.location.href = '/admin';
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to end impersonation');
      setIsEnding(false);
    }
  };

  // Don't render if not impersonating
  if (!session?.impersonation?.isActive) {
    return null;
  }

  return (
    <div className={styles.banner}>
      <div className={styles.content}>
        <div className={styles.warning}>
          <svg
            className={styles.warningIcon}
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fillRule="evenodd"
              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
              clipRule="evenodd"
            />
          </svg>
          <span className={styles.warningText}>Support Mode</span>
        </div>

        <div className={styles.info}>
          <span>
            Viewing as <strong>{session.user?.email}</strong>
          </span>
          <span className={styles.adminInfo}>
            (logged in as {session.impersonation.originalAdminEmail})
          </span>
          <span className={styles.timer}>{timeRemaining}</span>
        </div>

        <div className={styles.actions}>
          {error && <span className={styles.error}>{error}</span>}
          <button onClick={handleOpenNotesModal} className={styles.notesButton}>
            Add Note
          </button>
          <button
            onClick={handleExitImpersonation}
            disabled={isEnding}
            className={styles.exitButton}
          >
            {isEnding ? 'Exiting...' : 'Exit Support Mode'}
          </button>
        </div>
      </div>

      {session?.user?.id && (
        <SupportNotesModal
          isOpen={isNotesModalOpen}
          onClose={handleCloseNotesModal}
          userId={session.user.id}
        />
      )}
    </div>
  );
}

/**
 * Wrapper component that conditionally renders the banner
 * based on session impersonation state
 */
export function ImpersonationBannerWrapper() {
  const { data: session } = useSession();

  if (!session?.impersonation?.isActive) {
    return null;
  }

  return <ImpersonationBanner />;
}