"use client";
import React from "react";

function MainComponent() {
  const [notes, setNotes] = useState([]);
  const [isCreating, setIsCreating] = useState(false);
  const [selectedColor, setSelectedColor] = useState("#FFE4B5");
  const [isDragging, setIsDragging] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const [editingNote, setEditingNote] = useState(null);
  const [feedback, setFeedback] = useState(null);

  const colors = ["#ffeb3b", "#ff80ab", "#90caf9", "#a5d6a7", "#ce93d8"];

  useEffect(() => {
    try {
      const savedNotes = localStorage.getItem("stickyNotes");
      if (savedNotes) {
        setNotes(JSON.parse(savedNotes));
      }
    } catch (error) {
      console.error("Error loading notes:", error);
    }
  }, []);

  useEffect(() => {
    try {
      localStorage.setItem("stickyNotes", JSON.stringify(notes));
    } catch (error) {
      console.error("Error saving notes:", error);
    }
  }, [notes]);

  const downloadAllNotes = () => {
    try {
      const date = new Date().toISOString().split("T")[0];
      const filename = `sticky-notes-backup-${date}.json`;
      const data = JSON.stringify(notes, null, 2);
      const blob = new Blob([data], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
      setFeedback({
        type: "success",
        message: "Notes downloaded successfully!",
      });
    } catch (error) {
      console.error("Error downloading notes:", error);
      setFeedback({ type: "error", message: "Failed to download notes" });
    }
  };

  const downloadSingleNote = (note) => {
    try {
      const title =
        note.content.split("\n")[0].slice(0, 30).trim() || "untitled";
      const filename = `${title}-${new Date().toISOString().split("T")[0]}.txt`;
      const content = `${note.content}\n\nCreated: ${new Date(
        note.lastModified
      ).toLocaleString()}`;
      const blob = new Blob([content], { type: "text/plain" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Error downloading note:", error);
      setFeedback({ type: "error", message: "Failed to download note" });
    }
  };

  const handleImport = async (event) => {
    try {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const imported = JSON.parse(e.target.result);
          if (!Array.isArray(imported)) {
            throw new Error("Invalid file format");
          }

          const validNotes = imported.filter(
            (note) =>
              note.id &&
              note.content !== undefined &&
              note.color &&
              note.position &&
              note.size
          );

          if (validNotes.length === 0) {
            throw new Error("No valid notes found in file");
          }

          setNotes((prevNotes) => [...prevNotes, ...validNotes]);
          setFeedback({
            type: "success",
            message: `Imported ${validNotes.length} notes successfully!`,
          });
        } catch (error) {
          console.error("Error parsing import file:", error);
          setFeedback({ type: "error", message: "Invalid file format" });
        }
      };
      reader.readAsText(file);
    } catch (error) {
      console.error("Error importing notes:", error);
      setFeedback({ type: "error", message: "Failed to import notes" });
    }
  };

  const addNote = () => {
    const newNote = {
      id: Date.now(),
      content: "",
      color: selectedColor,
      position: { x: Math.random() * 100, y: Math.random() * 100 },
      size: { width: 250, height: 250 },
      lastModified: new Date().toISOString(),
    };
    setNotes([...notes, newNote]);
    setIsCreating(false);
  };
  const updateNote = (id, updates) => {
    setNotes(
      notes.map((note) =>
        note.id === id
          ? { ...note, ...updates, lastModified: new Date().toISOString() }
          : note
      )
    );
  };
  const deleteNote = (id) => {
    setNotes(notes.filter((note) => note.id !== id));
  };
  const handleDragStart = (e, note) => {
    const startPos = {
      x: e.clientX - note.position.x,
      y: e.clientY - note.position.y,
    };
    setIsDragging(true);

    const handleDrag = (moveEvent) => {
      updateNote(note.id, {
        position: {
          x: moveEvent.clientX - startPos.x,
          y: moveEvent.clientY - startPos.y,
        },
      });
    };

    const handleDragEnd = () => {
      setIsDragging(false);
      document.removeEventListener("mousemove", handleDrag);
      document.removeEventListener("mouseup", handleDragEnd);
      document.removeEventListener("touchmove", handleDrag);
      document.removeEventListener("touchend", handleDragEnd);
    };

    document.addEventListener("mousemove", handleDrag);
    document.addEventListener("mouseup", handleDragEnd);
    document.addEventListener("touchmove", handleDrag);
    document.addEventListener("touchend", handleDragEnd);
  };

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 p-4">
      <header className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white font-inter">
          Sticky Notes
        </h1>
        <div className="flex flex-wrap items-center gap-4">
          <button
            onClick={downloadAllNotes}
            className="bg-gray-900 dark:bg-gray-800 text-white px-4 py-2 rounded hover:opacity-80 transition-opacity font-inter"
          >
            <i className="fas fa-download mr-2"></i>Download All
          </button>
          <label className="bg-gray-900 dark:bg-gray-800 text-white px-4 py-2 rounded hover:opacity-80 transition-opacity font-inter cursor-pointer">
            <i className="fas fa-upload mr-2"></i>Import Notes
            <input
              type="file"
              accept=".json"
              onChange={handleImport}
              className="hidden"
            />
          </label>
          <button
            onClick={() => setIsCreating(true)}
            className="bg-gray-900 dark:bg-gray-800 text-white px-4 py-2 rounded hover:opacity-80 transition-opacity font-inter"
          >
            <i className="fas fa-plus mr-2"></i>Add New Note
          </button>
        </div>
      </header>

      {feedback && (
        <div
          className={`fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
            feedback.type === "success" ? "bg-green-500" : "bg-red-500"
          } text-white`}
        >
          <p className="font-inter">{feedback.message}</p>
        </div>
      )}

      {notes.length === 0 && !isCreating && (
        <div className="flex flex-col items-center justify-center h-[80vh] text-center px-4">
          <i className="fas fa-sticky-note text-4xl mb-4 text-gray-400"></i>
          <h2 className="text-2xl font-bold text-gray-700 dark:text-gray-300 mb-2 font-indie">
            Welcome to Sticky Notes!
          </h2>
          <p className="text-gray-600 dark:text-gray-400 font-indie">
            Click the + button in the bottom right to create your first note
          </p>
        </div>
      )}

      {isCreating && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4 font-inter">
              Choose Note Color
            </h2>
            <div className="flex gap-3 mb-4">
              {colors.map((color) => (
                <button
                  key={color}
                  onClick={() => setSelectedColor(color)}
                  className={`w-8 h-8 rounded-full transition-transform hover:scale-110 ${
                    selectedColor === color ? "ring-2 ring-gray-900" : ""
                  }`}
                  style={{ backgroundColor: color }}
                />
              ))}
            </div>
            <div className="flex justify-end gap-2">
              <button
                onClick={() => setIsCreating(false)}
                className="px-4 py-2 border border-gray-200 rounded text-gray-900 dark:text-white hover:bg-gray-900 hover:text-white transition-colors font-inter"
              >
                Cancel
              </button>
              <button
                onClick={addNote}
                className="px-4 py-2 bg-gray-900 text-white rounded hover:opacity-80 transition-opacity font-inter"
              >
                Create
              </button>
            </div>
          </div>
        </div>
      )}

      <div className="max-w-7xl mx-auto relative min-h-[500px]">
        {notes.map((note) => (
          <div
            key={note.id}
            className={`animate-fade-in absolute shadow-lg ${
              isDragging ? "cursor-grabbing" : "cursor-grab"
            }`}
            style={{
              backgroundColor: note.color,
              width: note.size.width,
              height: note.size.height,
              transform: `translate(${note.position.x}px, ${
                note.position.y
              }px) rotate(${isDragging ? "2deg" : "0deg"})`,
              transition: "transform 0.2s, box-shadow 0.2s",
              borderRadius: "8px",
              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
            }}
          >
            <div
              className="p-4 h-full flex flex-col font-indie"
              onMouseDown={(e) => handleDragStart(e, note)}
              onTouchStart={(e) => {
                const touch = e.touches[0];
                handleDragStart(
                  { clientX: touch.clientX, clientY: touch.clientY },
                  note
                );
              }}
            >
              <div className="flex justify-between mb-2 select-none">
                <div className="flex gap-2">
                  <button
                    onClick={() =>
                      setEditingNote(editingNote === note.id ? null : note.id)
                    }
                    className="text-gray-600 hover:text-gray-900 p-1"
                  >
                    <i className="fas fa-edit"></i>
                  </button>
                  <button
                    onClick={() => downloadSingleNote(note)}
                    className="text-gray-600 hover:text-gray-900 p-1"
                  >
                    <i className="fas fa-download"></i>
                  </button>
                  <button
                    onClick={() => setDeleteConfirm(note.id)}
                    className="text-gray-600 hover:text-red-500 p-1"
                  >
                    <i className="fas fa-trash"></i>
                  </button>
                </div>
                {editingNote === note.id && (
                  <div className="flex gap-1">
                    {colors.map((color) => (
                      <button
                        key={color}
                        onClick={() => updateNote(note.id, { color })}
                        className="w-5 h-5 rounded-full transition-transform hover:scale-110"
                        style={{ backgroundColor: color }}
                      />
                    ))}
                  </div>
                )}
              </div>
              <textarea
                className="flex-grow bg-transparent resize-none focus:outline-none text-gray-700 min-h-[100px] font-indie"
                value={note.content}
                onChange={(e) =>
                  updateNote(note.id, { content: e.target.value })
                }
                placeholder="Type your note here..."
              />
              <div className="flex justify-between text-xs text-gray-600 mt-2">
                <span>{new Date(note.lastModified).toLocaleString()}</span>
                <span>{note.content.length} characters</span>
              </div>
            </div>
            <div
              className="absolute bottom-0 right-0 w-6 h-6 cursor-se-resize flex items-center justify-center text-gray-500 hover:text-gray-700"
              onMouseDown={(e) => {
                const startSize = { ...note.size };
                const startPos = { x: e.clientX, y: e.clientY };
                const onMouseMove = (moveEvent) => {
                  const dx = moveEvent.clientX - startPos.x;
                  const dy = moveEvent.clientY - startPos.y;
                  updateNote(note.id, {
                    size: {
                      width: Math.max(150, startSize.width + dx),
                      height: Math.max(150, startSize.height + dy),
                    },
                  });
                };
                const onMouseUp = () => {
                  document.removeEventListener("mousemove", onMouseMove);
                  document.removeEventListener("mouseup", onMouseUp);
                };
                document.addEventListener("mousemove", onMouseMove);
                document.addEventListener("mouseup", onMouseUp);
              }}
            >
              <i className="fas fa-expand-arrows-alt text-xs"></i>
            </div>
          </div>
        ))}
      </div>

      <button
        onClick={() => setIsCreating(true)}
        className="fixed bottom-6 right-6 w-14 h-14 bg-gray-900 dark:bg-gray-800 text-white rounded-full shadow-lg flex items-center justify-center text-2xl hover:bg-gray-800 transition-all transform hover:scale-110 z-50"
      >
        <i className="fas fa-plus"></i>
      </button>

      {deleteConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-sm w-full mx-4">
            <h3 className="text-lg font-bold mb-4 text-gray-900 dark:text-white font-indie">
              Delete Note?
            </h3>
            <p className="text-gray-600 dark:text-gray-400 mb-4 font-indie">
              This action cannot be undone.
            </p>
            <div className="flex justify-end gap-2">
              <button
                onClick={() => setDeleteConfirm(null)}
                className="px-4 py-2 text-gray-600 hover:text-gray-900"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  deleteNote(deleteConfirm);
                  setDeleteConfirm(null);
                }}
                className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

      <style jsx global>{`
  @keyframes fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  
  @keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }
  
  .animate-fade-out {
    animation: fade-out 0.3s ease-out;
  }

  @media (max-width: 640px) {
    .sticky-note {
      width: 100% !important;
      margin-bottom: 1rem;
    }
  }
`}</style>
    </div>
  );
}

export default MainComponent;