'use client';

/**
 * Support Notes Modal
 *
 * Allows admins to add notes during a support session (impersonation).
 * Fetches the dealer info for the impersonated user and displays recent activity.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { Modal } from '@/components/ui/Modal';
import {
  FileText,
  Phone,
  Mail,
  Lock,
  Unlock,
  Globe,
  BarChart3,
  CreditCard,
  Trash2,
  Settings,
  FileEdit,
  FileX,
  Building2,
  Link,
  Upload,
  Menu,
  GlobeLock,
  ShieldCheck,
  Power,
  GlobeIcon,
} from 'lucide-react';
import styles from './SupportNotesModal.module.css';

interface DealerInfo {
  id: string;
  businessName: string | null;
  subdomain: string | null;
}

interface ActivityItem {
  id: string;
  type: 'note' | 'action';
  timestamp: string;
  adminName: string | null;
  adminEmail: string;
  noteType?: string;
  content?: string;
  action?: string;
}

interface SupportNotesModalProps {
  isOpen: boolean;
  onClose: () => void;
  userId: string;
}

const NOTE_TYPE_LABELS: Record<string, string> = {
  manual: 'Note',
  support_call: 'Support Call',
  email_sent: 'Email Sent',
  internal: 'Internal',
};

const ACTION_LABELS: Record<string, string> = {
  start_impersonation: 'Started support session',
  end_impersonation: 'Ended support session',
  status_change: 'Status change',
  note_added: 'Note added',
  subdomain_change: 'Subdomain changed',
  // Support session actions (prefixed with support_)
  support_updated_settings: 'Updated lead form settings',
  support_edited_page: 'Edited page',
  support_deleted_page: 'Deleted page',
  support_updated_business_info: 'Updated business info',
  support_updated_quick_links: 'Updated quick links',
  support_updated_links: 'Updated quick links',
  support_updated_slider: 'Updated slider',
  support_published_changes: 'Published changes',
  support_edited_navigation: 'Edited navigation',
  support_deleted_navigation: 'Deleted navigation item',
  // Custom domain actions
  support_configured_custom_domain: 'Configured custom domain',
  support_verified_custom_domain: 'Verified custom domain',
  support_activated_custom_domain: 'Activated custom domain',
  support_removed_custom_domain: 'Removed custom domain',
};

const ActivityIcon = ({
  item,
}: {
  item: { type: 'note' | 'action'; noteType?: string; action?: string };
}) => {
  const iconProps = { size: 14, className: styles.noteIcon };

  if (item.type === 'action') {
    switch (item.action) {
      // Admin actions
      case 'start_impersonation':
        return <Lock {...iconProps} />;
      case 'end_impersonation':
        return <Unlock {...iconProps} />;
      case 'update_subdomain':
        return <Globe {...iconProps} />;
      case 'status_change':
      case 'change_status':
        return <BarChart3 {...iconProps} />;
      case 'tier_change':
        return <CreditCard {...iconProps} />;
      case 'note_deleted':
        return <Trash2 {...iconProps} />;
      // Support session actions
      case 'support_updated_settings':
        return <Settings {...iconProps} />;
      case 'support_edited_page':
        return <FileEdit {...iconProps} />;
      case 'support_deleted_page':
        return <FileX {...iconProps} />;
      case 'support_updated_business_info':
        return <Building2 {...iconProps} />;
      case 'support_updated_links':
        return <Link {...iconProps} />;
      case 'support_published_changes':
        return <Upload {...iconProps} />;
      case 'support_edited_navigation':
      case 'support_deleted_navigation':
        return <Menu {...iconProps} />;
      case 'support_configured_custom_domain':
        return <GlobeLock {...iconProps} />;
      case 'support_verified_custom_domain':
        return <ShieldCheck {...iconProps} />;
      case 'support_activated_custom_domain':
        return <Power {...iconProps} />;
      case 'support_removed_custom_domain':
        return <GlobeIcon {...iconProps} />;
      default:
        return <FileText {...iconProps} />;
    }
  }

  switch (item.noteType) {
    case 'support_call':
      return <Phone {...iconProps} />;
    case 'email_sent':
      return <Mail {...iconProps} />;
    default:
      return <FileText {...iconProps} />;
  }
};

export function SupportNotesModal({ isOpen, onClose, userId }: SupportNotesModalProps) {
  const [dealer, setDealer] = useState<DealerInfo | null>(null);
  const [activity, setActivity] = useState<ActivityItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [newNote, setNewNote] = useState('');
  const [noteType, setNoteType] = useState<string>('support_call');
  const [isAddingNote, setIsAddingNote] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchDealerAndActivity = useCallback(async () => {
    if (!userId) return;
    setIsLoading(true);
    setError(null);
    try {
      // First get the dealer for this user
      const dealerRes = await fetch(`/api/admin/dealers/by-user/${userId}`);
      if (!dealerRes.ok) {
        throw new Error('Failed to fetch dealer info');
      }
      const dealerData = await dealerRes.json();
      setDealer(dealerData.dealer);

      // Fetch recent activity for this dealer (notes + auto-logged actions)
      if (dealerData.dealer?.id) {
        const activityRes = await fetch(
          `/api/admin/dealers/${dealerData.dealer.id}/activity?limit=10`
        );
        if (activityRes.ok) {
          const activityData = await activityRes.json();
          setActivity(activityData.activity);
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load dealer info');
    } finally {
      setIsLoading(false);
    }
  }, [userId]);

  useEffect(() => {
    if (isOpen && userId) {
      fetchDealerAndActivity();
    }
  }, [isOpen, userId, fetchDealerAndActivity]);

  // Reset state when modal closes
  useEffect(() => {
    if (!isOpen) {
      setDealer(null);
      setActivity([]);
      setNewNote('');
      setNoteType('support_call');
      setError(null);
    }
  }, [isOpen]);

  const handleAddNote = async () => {
    if (!dealer?.id || !newNote.trim()) return;
    setIsAddingNote(true);
    try {
      const res = await fetch(`/api/admin/dealers/${dealer.id}/notes`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: newNote, noteType }),
      });
      if (res.ok) {
        setNewNote('');
        fetchDealerAndActivity(); // Refresh notes
      } else {
        const data = await res.json();
        setError(data.error || 'Failed to add note');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to add note');
    } finally {
      setIsAddingNote(false);
    }
  };

  const formatDateTime = (dateStr: string) => {
    return new Date(dateStr).toLocaleString('en-US', {
      month: 'short',
      day: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    });
  };

  if (!isOpen) return null;

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="default" title="Support Notes">
      <div className={styles.container}>
        {isLoading ? (
          <div className={styles.loading}>Loading...</div>
        ) : error ? (
          <div className={styles.error}>{error}</div>
        ) : dealer ? (
          <>
            <div className={styles.dealerInfo}>
              <span className={styles.dealerName}>{dealer.businessName || 'Unnamed Dealer'}</span>
              {dealer.subdomain && <span className={styles.subdomain}>{dealer.subdomain}</span>}
            </div>

            {/* Add Note Form */}
            <div className={styles.addNoteForm}>
              <div className={styles.noteFormRow}>
                <select
                  value={noteType}
                  onChange={(e) => setNoteType(e.target.value)}
                  className={styles.select}
                >
                  <option value="support_call">Support Call</option>
                  <option value="manual">Note</option>
                  <option value="email_sent">Email Sent</option>
                  <option value="internal">Internal</option>
                </select>
                <button
                  onClick={handleAddNote}
                  disabled={isAddingNote || !newNote.trim()}
                  className={styles.addNoteButton}
                >
                  {isAddingNote ? 'Adding...' : 'Add Note'}
                </button>
              </div>
              <textarea
                value={newNote}
                onChange={(e) => setNewNote(e.target.value)}
                placeholder="Describe the support interaction..."
                className={styles.noteInput}
                rows={3}
                autoFocus
              />
            </div>

            {/* Recent Activity */}
            {activity.length > 0 && (
              <div className={styles.recentNotes}>
                <h4 className={styles.recentTitle}>Recent Activity</h4>
                {activity.map((item) => (
                  <div
                    key={item.id}
                    className={`${styles.noteItem} ${item.type === 'action' ? styles.actionItem : ''}`}
                  >
                    <div className={styles.noteHeader}>
                      <ActivityIcon item={item} />
                      <span className={styles.noteType}>
                        {item.type === 'action'
                          ? ACTION_LABELS[item.action || ''] || item.action
                          : NOTE_TYPE_LABELS[item.noteType || 'manual']}
                      </span>
                      <span className={styles.noteTime}>{formatDateTime(item.timestamp)}</span>
                    </div>
                    {item.content && <p className={styles.noteContent}>{item.content}</p>}
                    <span className={styles.noteAuthor}>
                      by {item.adminName || item.adminEmail}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </>
        ) : (
          <div className={styles.error}>No dealer found for this user</div>
        )}
      </div>
    </Modal>
  );
}