'use client';

import React, { useState, useEffect } from 'react';
import { useRecordMode } from './RecordModeContext';
import { finder } from '@medv/finder';
import {
  Play,
  Square,
  MousePointer2,
  Scroll,
  Plus,
  Save,
  Trash2,
  Eye,
  Edit2,
  X,
  Check,
  Download,
} from 'lucide-react';
import { RecordEvent } from '@/types/record-mode';
import { PlaybackCursor } from './PlaybackCursor';

export function RecordModeOverlay() {
  const {
    isActive,
    setIsActive,
    events,
    addEvent,
    updateEvent,
    removeEvent,
    isPlaying,
    playEvents,
    saveSession,
    clearEvents,
  } = useRecordMode();

  const [pickingMode, setPickingMode] = useState<'click' | 'scroll' | null>(null);
  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
  const [editingEventId, setEditingEventId] = useState<string | null>(null);

  // Edit form state
  const [editForm, setEditForm] = useState<Partial<RecordEvent>>({});
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted || !isActive) return;

    const handleMessage = (e: MessageEvent) => {
      if (e.data.type === 'ELEMENT_SELECTED') {
        const { selector, rect, tagName } = e.data;

        if (pickingMode === 'click') {
          addEvent({
            type: 'click',
            selector,
            duration: 1000,
            zoom: 1,
            description: `Click on ${tagName}`,
            motionBlur: false,
            rect,
          });
        } else if (pickingMode === 'scroll') {
          addEvent({
            type: 'scroll',
            selector,
            duration: 1500,
            zoom: 1,
            description: `Scroll to ${tagName}`,
            motionBlur: false,
            rect,
          });
        }
        setPickingMode(null);
      } else if (e.data.type === 'PICKING_CANCELLED') {
        setPickingMode(null);
      }
    };

    window.addEventListener('message', handleMessage);

    if (pickingMode) {
      // Find the iframe and signal start picking
      const iframe = document.querySelector('iframe');
      if (iframe?.contentWindow) {
        iframe.contentWindow.postMessage({ type: 'START_PICKING', mode: pickingMode }, '*');
      }
    } else {
      // Signal stop picking
      const iframe = document.querySelector('iframe');
      if (iframe?.contentWindow) {
        iframe.contentWindow.postMessage({ type: 'STOP_PICKING' }, '*');
      }
    }

    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, [isActive, pickingMode, addEvent]);

  const [showEvents, setShowEvents] = useState(false);

  if (!mounted) return null;

  if (!isActive) {
    // Failsafe: Never render host toggle in embedded mode
    if (typeof window !== 'undefined' && (window.self !== window.top || window.name === 'record-mode-iframe' || window.location.search.includes('embedded=true'))) {
      return null;
    }

    return (
      <button
        onClick={() => setIsActive(true)}
        className="fixed bottom-6 left-6 z-[9999] bg-[#82ed20]/20 hover:bg-[#82ed20]/30 text-[#82ed20] p-4 rounded-full shadow-2xl transition-all hover:scale-110 record-mode-ignore border border-[#82ed20]/30 backdrop-blur-md animate-pulse"
      >
        <div className="w-5 h-5 rounded-[4px] border-2 border-[#82ed20]" />
      </button>
    );
  }

  return (
    <div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
      {/* 1. Global Toolbar - Slim Industrial Bar */}
      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
        <div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">

          {/* Identity Tag */}
          <div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
            <div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
            <div className="flex flex-col">
              <span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">Event Builder</span>
              <span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">Manual Mode</span>
            </div>
          </div>

          <div className="w-px h-6 bg-white/10 mx-1" />

          {/* Action Tools */}
          <div className="flex items-center gap-1">
            <button
              onClick={() => setPickingMode('click')}
              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'click' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
            >
              <MousePointer2 size={16} />
              <span>Click</span>
            </button>

            <button
              onClick={() => setPickingMode('scroll')}
              className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'scroll' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
            >
              <Scroll size={16} />
              <span>Scroll</span>
            </button>

            <button
              onClick={() => addEvent({
                type: 'wait',
                duration: 2000,
                zoom: 1,
                description: 'Wait for 2s',
                motionBlur: false
              })}
              className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
            >
              <Plus size={16} />
              <span>Wait</span>
            </button>
          </div>

          <div className="w-px h-6 bg-white/10 mx-1" />

          {/* Sequence Controls */}
          <div className="flex items-center gap-1 p-0.5">
            <button
              onClick={playEvents}
              disabled={isPlaying || events.length === 0}
              className="p-2.5 text-accent hover:bg-accent/10 rounded-[14px] disabled:opacity-20 transition-all"
              title="Preview Sequence"
            >
              <Play size={18} fill="currentColor" />
            </button>

            <button
              onClick={() => setShowEvents(!showEvents)}
              className={`p-2.5 rounded-[14px] transition-all relative ${showEvents ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
            >
              <Edit2 size={18} />
              {events.length > 0 && (
                <span className="absolute -top-1 -right-1 w-4 h-4 bg-accent text-primary-dark text-[10px] flex items-center justify-center rounded-full font-bold border-2 border-black">
                  {events.length}
                </span>
              )}
            </button>

            <button
              onClick={async () => {
                const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
                try {
                  const res = await fetch('/api/save-session', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(session),
                  });
                  if (res.ok) {
                    // Visual feedback could be improved, but alert is fine for dev tool
                    alert('Session saved to remotion/session.json');
                  } else {
                    const err = await res.json();
                    alert(`Failed to save: ${err.error}`);
                  }
                } catch (e) {
                  console.error(e);
                  alert('Error saving session');
                }
              }}
              disabled={events.length === 0}
              className="p-3 bg-white/5 hover:bg-green-500/20 rounded-2xl disabled:opacity-30 transition-all text-green-400"
              title="Save to Project (Dev)"
            >
              <Save size={20} />
            </button>

            <button
              onClick={() => {
                const data = JSON.stringify({ events, name: 'Recording', createdAt: new Date().toISOString() }, null, 2);
                const blob = new Blob([data], { type: 'application/json' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'remotion-session.json';
                a.click();
                URL.revokeObjectURL(url);
              }}
              disabled={events.length === 0}
              className="p-3 bg-white/5 hover:bg-blue-500/20 rounded-2xl disabled:opacity-30 transition-all text-blue-400"
              title="Download JSON"
            >
              <Download size={20} />
            </button>
          </div>

          <div className="w-px h-6 bg-white/10 mx-1" />

          <button
            onClick={() => setIsActive(false)}
            className="p-2.5 text-red-500 hover:bg-red-500/10 rounded-[14px] transition-all mx-1"
            title="Exit Studio"
          >
            <X size={20} />
          </button>
        </div>
      </div>

      {/* 2. Event Timeline Popover */}
      {showEvents && (
        <div className="fixed bottom-[100px] left-1/2 -translate-x-1/2 w-[400px] pointer-events-auto z-[9999]">
          <div className="bg-black/90 backdrop-blur-3xl border border-white/10 rounded-[32px] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.9)] max-h-[500px] overflow-hidden flex flex-col scale-in">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
                <p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">{events.length} Actions Recorded</p>
              </div>
              <button
                onClick={clearEvents}
                disabled={events.length === 0}
                className="text-red-400/40 hover:text-red-400 transition-colors p-2 hover:bg-red-500/10 rounded-xl disabled:opacity-10"
              >
                <Trash2 size={18} />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto space-y-2 pr-2 scrollbar-hide">
              {events.length === 0 ? (
                <div className="py-12 flex flex-col items-center justify-center text-white/10">
                  <Plus size={40} strokeWidth={1} />
                  <p className="text-xs mt-4">Timeline is empty</p>
                </div>
              ) : (
                events.map((event, index) => (
                  <div
                    key={event.id}
                    className="group flex items-center gap-4 bg-white/[0.03] border border-white/5 p-3 rounded-[20px] transition-all hover:bg-white/[0.06] hover:border-white/10"
                  >
                    <div className="w-6 h-6 rounded-full bg-white/5 border border-white/5 flex items-center justify-center text-[9px] font-bold text-white/30">
                      {index + 1}
                    </div>

                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="text-white text-xs font-bold uppercase tracking-widest">{event.type}</span>
                        <span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">{event.duration}ms</span>
                      </div>
                      <p className="text-[10px] text-white/30 truncate font-mono mt-1 opacity-60">
                        {event.selector || 'system:wait'}
                      </p>
                    </div>

                    <button
                      onClick={() => removeEvent(event.id)}
                      className="p-2 text-white/0 group-hover:text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all"
                    >
                      <Trash2 size={14} />
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}

      {/* Industrial Selector Highlighter - handled inside iframe via PickingHelper */}

      {/* Picking Tooltip */}
      {pickingMode && (
        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
          <div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
              <span className="font-black uppercase tracking-widest text-xs">Assigning {pickingMode}</span>
            </div>
            <div className="w-px h-6 bg-primary-dark/20" />
            <button
              onClick={() => {
                setPickingMode(null);
                setHoveredElement(null);
              }}
              className="text-[10px] font-bold uppercase tracking-widest opacity-60 hover:opacity-100 transition-opacity bg-primary-dark/10 px-3 py-1.5 rounded-full"
            >
              ESC to Cancel
            </button>
          </div>
        </div>
      )}

      <PlaybackCursor />
    </div>
  );
}