import React, { useState, useEffect, useCallback } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import Markdown from 'react-markdown';
import { useAuth } from '../context/AuthContext';
import { useToast } from '../components/Toast';
import api from '../api/axios';
import { formatLocalDateTime, formatLocalTime } from '../utils/dateUtils';
import PopularityBadge from '../components/PopularityBadge';

function SessionDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  const { error: showError, success } = useToast();

  const [session, setSession] = useState(null);
  const [games, setGames] = useState([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);
  const [editedNotes, setEditedNotes] = useState('');
  const [saving, setSaving] = useState(false);
  const [showDeleteNotesConfirm, setShowDeleteNotesConfirm] = useState(false);
  const [showDeleteSessionConfirm, setShowDeleteSessionConfirm] = useState(false);
  const [showChatImport, setShowChatImport] = useState(false);
  const [closingSession, setClosingSession] = useState(false);

  const loadSession = useCallback(async () => {
    try {
      const res = await api.get(`/sessions/${id}`);
      setSession(res.data);
    } catch (err) {
      if (err.response?.status === 404) {
        navigate('/history', { replace: true });
      }
      console.error('Failed to load session', err);
    }
  }, [id, navigate]);

  const loadGames = useCallback(async () => {
    try {
      const res = await api.get(`/sessions/${id}/games`);
      setGames([...res.data].reverse());
    } catch (err) {
      console.error('Failed to load session games', err);
    }
  }, [id]);

  useEffect(() => {
    Promise.all([loadSession(), loadGames()]).finally(() => setLoading(false));
  }, [loadSession, loadGames]);

  useEffect(() => {
    if (!session || session.is_active !== 1) return;
    const interval = setInterval(() => {
      loadSession();
      loadGames();
    }, 3000);
    return () => clearInterval(interval);
  }, [session, loadSession, loadGames]);

  const handleSaveNotes = async () => {
    setSaving(true);
    try {
      await api.put(`/sessions/${id}/notes`, { notes: editedNotes });
      await loadSession();
      setEditing(false);
      success('Notes saved');
    } catch (err) {
      showError('Failed to save notes');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteNotes = async () => {
    try {
      await api.delete(`/sessions/${id}/notes`);
      await loadSession();
      setEditing(false);
      setShowDeleteNotesConfirm(false);
      success('Notes deleted');
    } catch (err) {
      showError('Failed to delete notes');
    }
  };

  const handleDeleteSession = async () => {
    try {
      await api.delete(`/sessions/${id}`);
      success('Session deleted');
      navigate('/history', { replace: true });
    } catch (err) {
      showError('Failed to delete session: ' + (err.response?.data?.error || err.message));
    }
  };

  const handleCloseSession = async (sessionId, notes) => {
    try {
      await api.post(`/sessions/${sessionId}/close`, { notes });
      await loadSession();
      await loadGames();
      setClosingSession(false);
      success('Session ended successfully');
    } catch (err) {
      showError('Failed to close session');
    }
  };

  const handleExport = async (format) => {
    try {
      const response = await api.get(`/sessions/${id}/export?format=${format}`, {
        responseType: 'blob'
      });
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `session-${id}.${format === 'json' ? 'json' : 'txt'}`);
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
      window.URL.revokeObjectURL(url);
      success(`Session exported as ${format.toUpperCase()}`);
    } catch (err) {
      showError('Failed to export session');
    }
  };

  const startEditing = () => {
    setEditedNotes(session.notes || '');
    setEditing(true);
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-xl text-gray-600 dark:text-gray-400">Loading...</div>
      </div>
    );
  }

  if (!session) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-xl text-gray-600 dark:text-gray-400">Session not found</div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto">
      <Link
        to="/history"
        className="inline-flex items-center text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 mb-4 transition"
      >
        ← Back to History
      </Link>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <h1 className="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">
                Session #{session.id}
              </h1>
              {session.is_active === 1 && (
                <span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm px-3 py-1 rounded-full font-semibold animate-pulse inline-flex items-center gap-1">
                  🟢 Active
                </span>
              )}
            </div>
            <p className="text-gray-600 dark:text-gray-400">
              {formatLocalDateTime(session.created_at)}
              {' • '}
              {session.games_played} game{session.games_played !== 1 ? 's' : ''} played
            </p>
          </div>

          <div className="flex flex-wrap gap-2">
            {isAuthenticated && session.is_active === 1 && (
              <>
                <button
                  onClick={() => setClosingSession(true)}
                  className="bg-orange-600 dark:bg-orange-700 text-white px-4 py-2 rounded-lg hover:bg-orange-700 dark:hover:bg-orange-800 transition text-sm"
                >
                  End Session
                </button>
                <button
                  onClick={() => setShowChatImport(true)}
                  className="bg-indigo-600 dark:bg-indigo-700 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition text-sm"
                >
                  Import Chat Log
                </button>
              </>
            )}
            {isAuthenticated && (
              <>
                <button
                  onClick={() => handleExport('txt')}
                  className="bg-gray-600 dark:bg-gray-700 text-white px-4 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition text-sm"
                >
                  Export TXT
                </button>
                <button
                  onClick={() => handleExport('json')}
                  className="bg-gray-600 dark:bg-gray-700 text-white px-4 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition text-sm"
                >
                  Export JSON
                </button>
              </>
            )}
            {isAuthenticated && session.is_active === 0 && (
              <button
                onClick={() => setShowDeleteSessionConfirm(true)}
                className="bg-red-600 dark:bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition text-sm"
              >
                Delete Session
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
        <NotesSection
          session={session}
          isAuthenticated={isAuthenticated}
          editing={editing}
          editedNotes={editedNotes}
          saving={saving}
          showDeleteNotesConfirm={showDeleteNotesConfirm}
          onStartEditing={startEditing}
          onSetEditedNotes={setEditedNotes}
          onSave={handleSaveNotes}
          onCancel={() => setEditing(false)}
          onDeleteNotes={handleDeleteNotes}
          onShowDeleteConfirm={() => setShowDeleteNotesConfirm(true)}
          onHideDeleteConfirm={() => setShowDeleteNotesConfirm(false)}
        />
      </div>

      {showChatImport && (
        <div className="mb-6">
          <ChatImportPanel
            sessionId={id}
            onClose={() => setShowChatImport(false)}
            onImportComplete={() => {
              loadGames();
              setShowChatImport(false);
            }}
          />
        </div>
      )}

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        {games.length === 0 ? (
          <p className="text-gray-500 dark:text-gray-400">No games played in this session</p>
        ) : (
          <>
            <h2 className="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">
              Games Played ({games.length})
            </h2>
            <div className="space-y-3">
              {games.map((game, index) => (
                <div key={game.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-700/50">
                  <div className="flex justify-between items-start mb-2">
                    <div>
                      <div className="font-semibold text-lg text-gray-800 dark:text-gray-100">
                        {games.length - index}. {game.title}
                      </div>
                      <div className="text-gray-600 dark:text-gray-400">{game.pack_name}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-500 dark:text-gray-400">
                        {formatLocalTime(game.played_at)}
                      </div>
                      {game.manually_added === 1 && (
                        <span className="inline-block mt-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-1 rounded">
                          Manual
                        </span>
                      )}
                    </div>
                  </div>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-gray-600 dark:text-gray-400">
                    <div>
                      <span className="font-semibold">Players:</span> {game.min_players}-{game.max_players}
                    </div>
                    <div>
                      <span className="font-semibold">Type:</span> {game.game_type || 'N/A'}
                    </div>
                    <div className="flex items-center gap-2">
                      <span
                        className="font-semibold"
                        title="Popularity is cumulative across all sessions where this game was played"
                      >
                        Popularity:
                      </span>
                      <PopularityBadge
                        upvotes={game.upvotes || 0}
                        downvotes={game.downvotes || 0}
                        popularityScore={game.popularity_score || 0}
                        size="sm"
                        showCounts={true}
                        showNet={true}
                        showRatio={true}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      {closingSession && (
        <EndSessionModal
          sessionId={parseInt(id)}
          sessionGames={games}
          onClose={() => setClosingSession(false)}
          onConfirm={handleCloseSession}
          onShowChatImport={() => {
            setShowChatImport(true);
            setClosingSession(false);
          }}
        />
      )}

      {showDeleteSessionConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
            <h2 className="text-2xl font-bold mb-4 text-red-600 dark:text-red-400">Delete Session?</h2>
            <p className="text-gray-700 dark:text-gray-300 mb-6">
              Are you sure you want to delete Session #{session.id}?
              This will permanently delete all games and chat logs associated with this session. This action cannot be undone.
            </p>
            <div className="flex gap-4">
              <button
                onClick={handleDeleteSession}
                className="flex-1 bg-red-600 dark:bg-red-700 text-white py-3 rounded-lg hover:bg-red-700 dark:hover:bg-red-800 transition font-semibold"
              >
                Delete Permanently
              </button>
              <button
                onClick={() => setShowDeleteSessionConfirm(false)}
                className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function NotesSection({
  session,
  isAuthenticated,
  editing,
  editedNotes,
  saving,
  showDeleteNotesConfirm,
  onStartEditing,
  onSetEditedNotes,
  onSave,
  onCancel,
  onDeleteNotes,
  onShowDeleteConfirm,
  onHideDeleteConfirm,
}) {
  if (editing) {
    return (
      <div>
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Session Notes</h2>
          <div className="flex gap-2">
            <button
              onClick={onShowDeleteConfirm}
              className="bg-red-600 dark:bg-red-700 text-white px-3 py-1.5 rounded text-sm hover:bg-red-700 dark:hover:bg-red-800 transition"
            >
              Delete Notes
            </button>
            <button
              onClick={onSave}
              disabled={saving}
              className="bg-green-600 dark:bg-green-700 text-white px-3 py-1.5 rounded text-sm hover:bg-green-700 dark:hover:bg-green-800 transition disabled:opacity-50"
            >
              {saving ? 'Saving...' : 'Save'}
            </button>
            <button
              onClick={onCancel}
              className="bg-gray-500 dark:bg-gray-600 text-white px-3 py-1.5 rounded text-sm hover:bg-gray-600 dark:hover:bg-gray-700 transition"
            >
              Cancel
            </button>
          </div>
        </div>
        <textarea
          value={editedNotes}
          onChange={(e) => onSetEditedNotes(e.target.value)}
          className="w-full px-4 py-3 border border-indigo-300 dark:border-indigo-600 rounded-lg h-48 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500"
          placeholder="Write your session notes here... Markdown is supported."
        />
        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Supports Markdown formatting</p>

        {showDeleteNotesConfirm && (
          <div className="mt-3 p-4 bg-red-50 dark:bg-red-900/30 border border-red-300 dark:border-red-700 rounded-lg">
            <p className="text-red-700 dark:text-red-300 mb-3">Are you sure you want to delete these notes?</p>
            <div className="flex gap-2">
              <button
                onClick={onDeleteNotes}
                className="bg-red-600 text-white px-4 py-2 rounded text-sm hover:bg-red-700 transition"
              >
                Yes, Delete
              </button>
              <button
                onClick={onHideDeleteConfirm}
                className="bg-gray-500 text-white px-4 py-2 rounded text-sm hover:bg-gray-600 transition"
              >
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>
    );
  }

  if (!isAuthenticated) {
    return (
      <div>
        <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Session Notes</h2>
        {session.has_notes ? (
          <>
            <p className="text-gray-700 dark:text-gray-300">{session.notes_preview}</p>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">Log in to view full notes</p>
          </>
        ) : (
          <p className="text-gray-500 dark:text-gray-400 italic">No notes for this session</p>
        )}
      </div>
    );
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-3">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Session Notes</h2>
        <button
          onClick={onStartEditing}
          className="bg-indigo-600 dark:bg-indigo-700 text-white px-3 py-1.5 rounded text-sm hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
        >
          {session.notes ? 'Edit' : 'Add Notes'}
        </button>
      </div>
      {session.notes ? (
        <div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
          <Markdown>{session.notes}</Markdown>
        </div>
      ) : (
        <p className="text-gray-500 dark:text-gray-400 italic">No notes for this session</p>
      )}
    </div>
  );
}

function EndSessionModal({ sessionId, sessionGames, onClose, onConfirm, onShowChatImport }) {
  const [notes, setNotes] = useState('');

  const hasPopularityData = sessionGames.some(game => game.popularity_score !== 0);
  const showPopularityWarning = sessionGames.length > 0 && !hasPopularityData;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
        <h2 className="text-2xl font-bold mb-4 dark:text-gray-100">End Session #{sessionId}</h2>

        {showPopularityWarning && (
          <div className="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg">
            <div className="flex items-start gap-2">
              <span className="text-yellow-600 dark:text-yellow-400 text-xl">⚠️</span>
              <div className="flex-1">
                <p className="font-semibold text-yellow-800 dark:text-yellow-200 mb-1">No Popularity Data</p>
                <p className="text-sm text-yellow-700 dark:text-yellow-300 mb-3">
                  You haven't imported chat reactions yet. Import now to track which games your players loved!
                </p>
                <button
                  onClick={() => { onClose(); onShowChatImport(); }}
                  className="text-sm bg-yellow-600 dark:bg-yellow-700 text-white px-4 py-2 rounded hover:bg-yellow-700 dark:hover:bg-yellow-800 transition"
                >
                  Import Chat Log
                </button>
              </div>
            </div>
          </div>
        )}

        <div className="mb-4">
          <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">
            Session Notes (optional)
          </label>
          <textarea
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-32 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
            placeholder="Add any notes about this session..."
          />
        </div>

        <div className="flex gap-4">
          <button
            onClick={() => onConfirm(sessionId, notes)}
            className="flex-1 bg-orange-600 dark:bg-orange-700 text-white py-3 rounded-lg hover:bg-orange-700 dark:hover:bg-orange-800 transition"
          >
            End Session
          </button>
          <button
            onClick={onClose}
            className="flex-1 bg-gray-600 dark:bg-gray-700 text-white py-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}

function ChatImportPanel({ sessionId, onClose, onImportComplete }) {
  const [chatData, setChatData] = useState('');
  const [importing, setImporting] = useState(false);
  const [result, setResult] = useState(null);
  const { error, success } = useToast();

  const handleFileUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;
    try {
      const text = await file.text();
      setChatData(text);
      success('File loaded successfully');
    } catch (err) {
      error('Failed to read file: ' + err.message);
    }
  };

  const handleImport = async () => {
    if (!chatData.trim()) {
      error('Please enter chat data or upload a file');
      return;
    }
    setImporting(true);
    setResult(null);
    try {
      const parsedData = JSON.parse(chatData);
      const response = await api.post(`/sessions/${sessionId}/chat-import`, { chatData: parsedData });
      setResult(response.data);
      success('Chat log imported successfully');
      setTimeout(() => onImportComplete(), 2000);
    } catch (err) {
      error('Import failed: ' + (err.response?.data?.error || err.message));
    } finally {
      setImporting(false);
    }
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
      <h3 className="text-xl font-semibold mb-4 dark:text-gray-100">Import Chat Log</h3>
      <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
        Upload a JSON file or paste JSON array with format: [&#123;"username": "...", "message": "...", "timestamp": "..."&#125;]
        <br />
        The system will detect "thisgame++" and "thisgame--" patterns and update game popularity.
      </p>
      <div className="mb-4">
        <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Upload JSON File</label>
        <input
          type="file"
          accept=".json"
          onChange={handleFileUpload}
          disabled={importing}
          className="block w-full text-sm text-gray-900 dark:text-gray-100 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/30 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900/50 file:cursor-pointer cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
        />
      </div>
      <div className="mb-4 text-center text-gray-500 dark:text-gray-400 text-sm">— or —</div>
      <div className="mb-4">
        <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Paste Chat JSON Data</label>
        <textarea
          value={chatData}
          onChange={(e) => setChatData(e.target.value)}
          className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg h-48 font-mono text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
          placeholder='[{"username":"Alice","message":"thisgame++","timestamp":"2024-01-01T12:00:00Z"}]'
          disabled={importing}
        />
      </div>
      {result && (
        <div className="mb-4 p-4 bg-green-50 dark:bg-green-900/30 border border-green-300 dark:border-green-700 rounded-lg">
          <p className="font-semibold text-green-800 dark:text-green-200">Import Successful!</p>
          <p className="text-sm text-green-700 dark:text-green-300">
            Imported {result.messagesImported} messages, processed {result.votesProcessed} votes
          </p>
        </div>
      )}
      <div className="flex gap-4">
        <button
          onClick={handleImport}
          disabled={importing}
          className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400 dark:disabled:bg-gray-600"
        >
          {importing ? 'Importing...' : 'Import'}
        </button>
        <button
          onClick={onClose}
          className="bg-gray-600 dark:bg-gray-700 text-white px-6 py-2 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition"
        >
          Close
        </button>
      </div>
    </div>
  );
}

export default SessionDetail;