"use client";

import { useState, useEffect, useCallback } from "react";
import {
  Canvas,
  CanvasCollaborator,
  getChannelCanvases,
  getCanvas,
  updateCanvas,
} from "@/lib/api";
import { CanvasEditor } from "./CanvasEditor";
import { CreateCanvasModal } from "./CreateCanvasModal";
import { CanvasCollaborators } from "./CanvasCollaborators";
import { Plus, FileText, Save, ChevronRight } from "lucide-react";

interface CanvasViewProps {
  channelId: string;
}

export function CanvasView({ channelId }: CanvasViewProps) {
  const [canvases, setCanvases] = useState<Canvas[]>([]);
  const [selectedCanvas, setSelectedCanvas] = useState<Canvas | null>(null);
  const [content, setContent] = useState("");
  const [title, setTitle] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [saving, setSaving] = useState(false);
  const [dirty, setDirty] = useState(false);

  const loadCanvases = useCallback(() => {
    setLoading(true);
    getChannelCanvases(channelId)
      .then((data) => {
        setCanvases(data);
        if (data.length > 0 && !selectedCanvas) {
          setSelectedCanvas(data[0]);
          setTitle(data[0].title);
          setContent(data[0].content || "");
        }
      })
      .catch((err) => {
        console.error("Failed to load canvases:", err);
        setError("Failed to load canvases");
      })
      .finally(() => setLoading(false));
  }, [channelId]); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    loadCanvases();
  }, [loadCanvases]);

  const handleSelectCanvas = (canvas: Canvas) => {
    setSelectedCanvas(canvas);
    setTitle(canvas.title);
    setContent(canvas.content || "");
    setDirty(false);
  };

  const handleContentChange = (newContent: string) => {
    setContent(newContent);
    setDirty(true);
  };

  const handleTitleChange = (newTitle: string) => {
    setTitle(newTitle);
    setDirty(true);
  };

  const handleSave = async () => {
    if (!selectedCanvas || !dirty) return;
    setSaving(true);
    try {
      await updateCanvas(selectedCanvas.id, { title, content });
      setDirty(false);
      // Update in list
      setCanvases((prev) =>
        prev.map((c) => (c.id === selectedCanvas.id ? { ...c, title, content } : c))
      );
    } catch (err) {
      console.error("Failed to save canvas:", err);
      setError("Failed to save canvas");
    } finally {
      setSaving(false);
    }
  };

  const handleCanvasCreated = (canvas: Canvas) => {
    setCanvases((prev) => [...prev, canvas]);
    setSelectedCanvas(canvas);
    setTitle(canvas.title);
    setContent(canvas.content || "");
    setDirty(false);
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-full text-gray-400">
        <div className="animate-pulse">Loading canvases...</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center h-full text-slack-red">
        <p>{error}</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200 bg-white">
        <div className="flex items-center gap-2">
          <FileText size={22} className="text-slack-purple" />
          <h1 className="text-lg font-bold text-gray-800">Canvas</h1>
          <span className="text-sm text-gray-400">({canvases.length})</span>
        </div>
        <button
          onClick={() => setShowCreateModal(true)}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple transition-colors"
        >
          <Plus size={16} />
          <span>New canvas</span>
        </button>
      </div>

      <div className="flex-1 flex overflow-hidden">
        {/* Canvas list */}
        <div className="w-64 border-r border-gray-200 bg-gray-50 overflow-y-auto">
          <div className="px-3 py-2">
            <h2 className="text-xs font-semibold text-gray-500 uppercase mb-2">All canvases</h2>
            <div className="space-y-1">
              {canvases.map((c) => (
                <button
                  key={c.id}
                  onClick={() => handleSelectCanvas(c)}
                  className={`w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-left transition-colors ${
                    selectedCanvas?.id === c.id
                      ? "bg-slack-purple/10 text-slack-purple font-medium"
                      : "text-gray-700 hover:bg-gray-200/50"
                  }`}
                >
                  <FileText size={14} className="flex-shrink-0" />
                  <span className="truncate">{c.title}</span>
                </button>
              ))}
              {canvases.length === 0 && (
                <p className="text-sm text-gray-400 px-3 py-2">No canvases yet.</p>
              )}
            </div>
          </div>
        </div>

        {/* Editor area */}
        <div className="flex-1 flex flex-col p-4 gap-3">
          {selectedCanvas ? (
            <>
              {/* Title + save */}
              <div className="flex items-center gap-2">
                <input
                  type="text"
                  value={title}
                  onChange={(e) => handleTitleChange(e.target.value)}
                  className="flex-1 text-lg font-bold text-gray-800 bg-transparent border-b border-transparent focus:border-slack-purple focus:outline-none px-1 py-1"
                  placeholder="Untitled canvas"
                />
                <button
                  onClick={handleSave}
                  disabled={!dirty || saving}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-sm font-medium hover:bg-slack-darkpurple disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                >
                  <Save size={14} />
                  <span>{saving ? "Saving..." : "Save"}</span>
                </button>
              </div>

              {/* Editor */}
              <div className="flex-1 min-h-0">
                <CanvasEditor content={content} onChange={handleContentChange} />
              </div>
            </>
          ) : (
            <div className="flex-1 flex items-center justify-center text-gray-400 flex-col gap-3">
              <FileText size={48} />
              <p>Select a canvas or create a new one.</p>
            </div>
          )}
        </div>

        {/* Right sidebar: collaborators */}
        {selectedCanvas && (
          <div className="w-64 border-l border-gray-200 bg-gray-50 overflow-y-auto">
            <CanvasCollaborators
              canvasId={selectedCanvas.id}
              collaborators={selectedCanvas.collaborators || []}
              onUpdated={loadCanvases}
            />
          </div>
        )}
      </div>

      {/* Create modal */}
      <CreateCanvasModal
        open={showCreateModal}
        channelId={channelId}
        onClose={() => setShowCreateModal(false)}
        onCreated={handleCanvasCreated}
      />
    </div>
  );
}