"use client";

import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { redirect } from "next/navigation";
import { Navigation } from "@/components/carnet/navigation";
import { NotesView } from "@/components/carnet/notes-view";
import { Editor } from "@/components/carnet/editor";
import { PanelResizer } from "@/components/carnet/panel-resizer";
import { useMediaQuery } from "@/hooks/use-media-query";

// Layout modes
export enum PaneLayout {
  TagSelection = "tag-selection",
  ItemSelection = "item-selection",
  TableView = "table-view",
  Editing = "editing"
}

interface Note {
  id: string;
  title: string;
  content: string;
  lastEdited: Date;
}

export default function CarnetPage() {
  const { data: session, status } = useSession();
  const [isLoading, setIsLoading] = useState(true);
  const [layoutMode, setLayoutMode] = useState<PaneLayout>(PaneLayout.ItemSelection);
  const [selectedNote, setSelectedNote] = useState<Note | null>(null);
  const [isMobile, setIsMobile] = useState(false);
  const [showNav, setShowNav] = useState(true);
  const [showNotes, setShowNotes] = useState(true);
  
  // Panel widths state
  const [navWidth, setNavWidth] = useState(220);
  const [notesWidth, setNotesWidth] = useState(400);
  const [isDraggingNav, setIsDraggingNav] = useState(false);
  const [isDraggingNotes, setIsDraggingNotes] = useState(false);

  // Check screen size
  const isSmallScreen = useMediaQuery("(max-width: 768px)");
  const isMediumScreen = useMediaQuery("(max-width: 1024px)");

  useEffect(() => {
    if (status === "unauthenticated") {
      redirect("/signin");
    }
    if (status !== "loading") {
      setIsLoading(false);
    }
  }, [status]);

  useEffect(() => {
    if (isSmallScreen) {
      setIsMobile(true);
      setShowNav(false);
      setShowNotes(false);
    } else if (isMediumScreen) {
      setIsMobile(false);
      setShowNav(true);
      setShowNotes(false);
    } else {
      setIsMobile(false);
      setShowNav(true);
      setShowNotes(true);
    }
  }, [isSmallScreen, isMediumScreen]);

  // Handle panel resizing
  const handleNavResize = (e: MouseEvent) => {
    if (!isDraggingNav) return;
    const newWidth = e.clientX;
    if (newWidth >= 48 && newWidth <= 400) {
      setNavWidth(newWidth);
    }
  };

  const handleNotesResize = (e: MouseEvent) => {
    if (!isDraggingNotes) return;
    const newWidth = e.clientX - navWidth - 2; // 2px for the resizer
    if (newWidth >= 200) {
      setNotesWidth(newWidth);
    }
  };

  const handleNoteSelect = (note: Note) => {
    setSelectedNote(note);
    if (isMobile) {
      setShowNotes(false);
    }
  };

  const handleNoteSave = async (note: Note) => {
    try {
      const response = await fetch('/api/carnet', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          content: note.content,
          date: note.lastEdited.toISOString(),
          category: 'Notes'
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to save note');
      }

      const result = await response.json();
      console.log('Note saved successfully:', result);
    } catch (error) {
      console.error('Error saving note:', error);
    }
  };

  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="h-32 w-32 animate-spin rounded-full border-t-2 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  return (
    <main className="flex h-[calc(100vh-3.5rem)] mt-14 bg-carnet-bg">
      {/* Navigation Panel */}
      {showNav && (
        <>
          <div 
            className="flex flex-col h-full bg-carnet-sidebar"
            style={{ width: `${navWidth}px` }}
          >
            <Navigation onLayoutChange={setLayoutMode} />
          </div>

          {/* Navigation Resizer */}
          <PanelResizer
            isDragging={isDraggingNav}
            onDragStart={() => setIsDraggingNav(true)}
            onDragEnd={() => setIsDraggingNav(false)}
            onDrag={handleNavResize}
          />
        </>
      )}

      {/* Notes Panel */}
      {showNotes && (
        <>
          <div 
            className="flex flex-col h-full bg-carnet-bg"
            style={{ width: `${notesWidth}px` }}
          >
            <NotesView onNoteSelect={handleNoteSelect} />
          </div>

          {/* Notes Resizer */}
          <PanelResizer
            isDragging={isDraggingNotes}
            onDragStart={() => setIsDraggingNotes(true)}
            onDragEnd={() => setIsDraggingNotes(false)}
            onDrag={handleNotesResize}
          />
        </>
      )}

      {/* Editor Panel */}
      <div className="flex-1 flex flex-col h-full bg-carnet-bg">
        <Editor note={selectedNote} onSave={handleNoteSave} />
      </div>

      {/* Mobile Navigation Toggle */}
      {isMobile && (
        <div className="fixed bottom-4 right-4 flex space-x-2">
          <button
            className="p-2 rounded-full bg-primary text-white"
            onClick={() => setShowNav(!showNav)}
          >
            {showNav ? 'Hide Nav' : 'Show Nav'}
          </button>
          <button
            className="p-2 rounded-full bg-primary text-white"
            onClick={() => setShowNotes(!showNotes)}
          >
            {showNotes ? 'Hide Notes' : 'Show Notes'}
          </button>
        </div>
      )}
    </main>
  );
}