import { useState } from 'react';
import { useScrapbook } from '../context/ScrapbookContext';
import { PaintBucket, X } from 'lucide-react';

interface BackgroundSelectorProps {
  pageId: string;
}

// Mock background data
const PAPER_BACKGROUNDS = [
  { id: 'vintage', url: 'https://img.freepik.com/free-photo/brown-concrete-wall-with-scratches_1339-4193.jpg' },
  { id: 'craft', url: 'https://img.freepik.com/free-photo/brown-paper-texture_95678-75.jpg' },
  { id: 'watercolor', url: 'https://img.freepik.com/free-photo/abstract-watercolor-paper-background_23-2149060409.jpg' },
  { id: 'newspaper', url: 'https://img.freepik.com/free-photo/old-newspaper-background_1194-6309.jpg' },
  { id: 'music', url: 'https://img.freepik.com/free-photo/sheet-music-notes_144627-16624.jpg' }
];

const PATTERN_BACKGROUNDS = [
  { id: 'polkadot', url: 'https://img.freepik.com/free-vector/polka-dots-pattern-design_53876-90531.jpg' },
  { id: 'gingham-red', url: 'https://img.freepik.com/free-vector/red-white-gingham-pattern-background_1409-1599.jpg' },
  { id: 'floral', url: 'https://img.freepik.com/free-vector/vintage-floral-background_1284-38654.jpg' },
  { id: 'stripes', url: 'https://img.freepik.com/free-vector/vintage-striped-seamless-pattern_1409-2938.jpg' },
  { id: 'hearts', url: 'https://img.freepik.com/free-vector/hand-drawn-heart-pattern_1189-1510.jpg' }
];

const COLOR_BACKGROUNDS = [
  { id: 'cream', color: '#FFF8E1' },
  { id: 'pink', color: '#FCE4EC' },
  { id: 'light-blue', color: '#E3F2FD' },
  { id: 'mint', color: '#E8F5E9' },
  { id: 'lavender', color: '#F3E5F5' },
  { id: 'peach', color: '#FFF3E0' }
];

export default function BackgroundSelector({ pageId }: BackgroundSelectorProps) {
  const { updatePageBackground } = useScrapbook();
  const [isOpen, setIsOpen] = useState(false);
  const [activeTab, setActiveTab] = useState<'paper' | 'pattern' | 'color'>('paper');

  const handleSelectBackground = (type: 'paper' | 'pattern' | 'color', value: string) => {
    updatePageBackground(pageId, type, value);
    setIsOpen(false);
  };

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`flex items-center gap-2 px-4 py-2 ${
          isOpen 
            ? 'bg-amber-600 text-white' 
            : 'bg-amber-500 text-white hover:bg-amber-600'
        } rounded-lg`}
      >
        <PaintBucket className="w-4 h-4" />
        <span>Change Background</span>
      </button>
      
      {isOpen && (
        <div className="absolute left-0 top-full mt-2 bg-white border border-amber-200 rounded-lg shadow-lg z-40 w-80">
          <div className="flex justify-between items-center p-3 border-b border-amber-100">
            <h3 className="font-medium text-amber-900">Select Background</h3>
            <button
              onClick={() => setIsOpen(false)}
              className="text-gray-500 hover:text-gray-700"
            >
              <X className="w-5 h-5" />
            </button>
          </div>
          
          <div className="flex border-b border-amber-100">
            <button
              onClick={() => setActiveTab('paper')}
              className={`flex-1 py-2 text-sm font-medium ${
                activeTab === 'paper'
                  ? 'text-amber-800 border-b-2 border-amber-500'
                  : 'text-amber-600 hover:text-amber-800'
              }`}
            >
              Paper
            </button>
            <button
              onClick={() => setActiveTab('pattern')}
              className={`flex-1 py-2 text-sm font-medium ${
                activeTab === 'pattern'
                  ? 'text-amber-800 border-b-2 border-amber-500'
                  : 'text-amber-600 hover:text-amber-800'
              }`}
            >
              Pattern
            </button>
            <button
              onClick={() => setActiveTab('color')}
              className={`flex-1 py-2 text-sm font-medium ${
                activeTab === 'color'
                  ? 'text-amber-800 border-b-2 border-amber-500'
                  : 'text-amber-600 hover:text-amber-800'
              }`}
            >
              Solid Color
            </button>
          </div>
          
          <div className="p-3 max-h-60 overflow-y-auto">
            {activeTab === 'paper' && (
              <div className="grid grid-cols-3 gap-2">
                {PAPER_BACKGROUNDS.map(bg => (
                  <button
                    key={bg.id}
                    onClick={() => handleSelectBackground('paper', bg.url)}
                    className="h-20 border border-amber-200 rounded overflow-hidden hover:opacity-90"
                  >
                    <img 
                      src={bg.url}
                      alt={bg.id}
                      className="w-full h-full object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
            
            {activeTab === 'pattern' && (
              <div className="grid grid-cols-3 gap-2">
                {PATTERN_BACKGROUNDS.map(bg => (
                  <button
                    key={bg.id}
                    onClick={() => handleSelectBackground('pattern', bg.url)}
                    className="h-20 border border-amber-200 rounded overflow-hidden hover:opacity-90"
                  >
                    <img 
                      src={bg.url}
                      alt={bg.id}
                      className="w-full h-full object-cover"
                    />
                  </button>
                ))}
              </div>
            )}
            
            {activeTab === 'color' && (
              <div className="grid grid-cols-3 gap-2">
                {COLOR_BACKGROUNDS.map(bg => (
                  <button
                    key={bg.id}
                    onClick={() => handleSelectBackground('color', bg.color)}
                    className="h-20 border border-amber-200 rounded overflow-hidden hover:opacity-90"
                    style={{ backgroundColor: bg.color }}
                  />
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
import { useState } from 'react';
import { useScrapbook } from '../context/ScrapbookContext';
import { BookOpen, X } from 'lucide-react';

interface AddJournalEntryProps {
  pageId: string;
}

export default function AddJournalEntry({ pageId }: AddJournalEntryProps) {
  const { addJournalEntry } = useScrapbook();
  const [isAdding, setIsAdding] = useState(false);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleAdd = () => {
    if (!content.trim()) return;
    
    const today = new Date();
    const formattedDate = today.toLocaleDateString('en-US', {
      month: 'long',
      day: 'numeric',
      year: 'numeric'
    });
    
    addJournalEntry(pageId, {
      title: title || undefined,
      content,
      date: formattedDate
    });
    
    setTitle('');
    setContent('');
    setIsAdding(false);
  };

  if (!isAdding) {
    return (
      <button
        onClick={() => setIsAdding(true)}
        className="flex items-center gap-2 px-4 py-2 bg-amber-500 text-white rounded-lg hover:bg-amber-600"
      >
        <BookOpen className="w-4 h-4" />
        <span>Add Journal Entry</span>
      </button>
    );
  }

  return (
    <div className="bg-white p-4 border border-amber-200 rounded-lg shadow-md">
      <div className="flex justify-between items-center mb-3">
        <h3 className="font-medium text-amber-900">New Journal Entry</h3>
        <button
          onClick={() => setIsAdding(false)}
          className="text-gray-500 hover:text-gray-700"
        >
          <X className="w-5 h-5" />
        </button>
      </div>
      
      <div className="space-y-3">
        <div>
          <label className="block text-sm text-amber-800 mb-1">Title (optional)</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full px-3 py-2 border border-amber-300 rounded-lg"
            placeholder="Add a title..."
          />
        </div>
        
        <div>
          <label className="block text-sm text-amber-800 mb-1">Your thoughts</label>
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            className="w-full px-3 py-2 border border-amber-300 rounded-lg min-h-[120px]"
            placeholder="Write your thoughts, memories, or stories..."
          />
        </div>
        
        <div className="flex justify-end gap-2">
          <button
            onClick={() => setIsAdding(false)}
            className="px-3 py-1.5 text-sm bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
          >
            Cancel
          </button>
          <button
            onClick={handleAdd}
            disabled={!content.trim()}
            className={`px-3 py-1.5 text-sm rounded-lg ${
              content.trim() 
                ? 'bg-amber-500 text-white hover:bg-amber-600' 
                : 'bg-amber-300 text-amber-100 cursor-not-allowed'
            }`}
          >
            Add Entry
          </button>
        </div>
      </div>
    </div>
  );
}
import { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { GuestbookEntry } from '../types/GuestbookEntry';
import { Calendar, MessageSquare, PenLine, Send, User } from 'lucide-react';

export default function GuestbookPage() {
  const [entries, setEntries] = useState<GuestbookEntry[]>([]);
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');
  
  // Load entries from localStorage on initial render
  useEffect(() => {
    const savedEntries = localStorage.getItem('guestbook-entries');
    if (savedEntries) {
      setEntries(JSON.parse(savedEntries));
    }
  }, []);
  
  // Save entries to localStorage whenever they change
  useEffect(() => {
    localStorage.setItem('guestbook-entries', JSON.stringify(entries));
  }, [entries]);
  
  const addEntry = () => {
    if (!name.trim() || !message.trim()) return;
    
    const newEntry: GuestbookEntry = {
      id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
      name: name.trim(),
      message: message.trim(),
      timestamp: new Date().toLocaleString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    };
    
    setEntries([newEntry, ...entries]);
    setName('');
    setMessage('');
  };
  
  return (
    <div className="min-h-screen bg-amber-50 py-8">
      <div className="max-w-3xl mx-auto px-4">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-handwriting text-amber-900 mb-2">Guestbook</h1>
          <p className="text-amber-800">Leave a message to sign our scrapbook!</p>
        </div>
        
        <div className="bg-white border border-amber-200 rounded-lg p-6 shadow-md mb-8">
          <h2 className="flex items-center gap-2 text-xl font-medium text-amber-900 mb-4">
            <PenLine className="h-5 w-5 text-amber-700" />
            <span>Sign the Guestbook</span>
          </h2>
          
          <div className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-amber-800 mb-1">
                Your Name
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <User className="h-5 w-5 text-amber-500" />
                </div>
                <input
                  type="text"
                  id="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Enter your name"
                  className="pl-10 w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                />
              </div>
            </div>
            
            <div>
              <label htmlFor="message" className="block text-sm font-medium text-amber-800 mb-1">
                Your Message
              </label>
              <div className="relative">
                <textarea
                  id="message"
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Write a message..."
                  rows={4}
                  className="w-full px-4 py-2 border border-amber-300 rounded-lg focus:ring-amber-500 focus:border-amber-500"
                />
              </div>
            </div>
            
            <div className="flex justify-end">
              <button
                onClick={addEntry}
                disabled={!name.trim() || !message.trim()}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg ${
                  !name.trim() || !message.trim()
                    ? 'bg-amber-300 text-amber-100 cursor-not-allowed'
                    : 'bg-amber-500 text-white hover:bg-amber-600'
                }`}
              >
                <Send className="h-4 w-4" />
                <span>Sign Guestbook</span>
              </button>
            </div>
          </div>
        </div>
        
        <div className="space-y-6">
          <h2 className="flex items-center gap-2 text-xl font-medium text-amber-900 mb-4">
            <MessageSquare className="h-5 w-5 text-amber-700" />
            <span>Messages ({entries.length})</span>
          </h2>
          
          {entries.length === 0 ? (
            <div className="text-center py-8 bg-white border border-amber-200 rounded-lg">
              <p className="text-amber-700">No messages yet. Be the first to sign!</p>
            </div>
          ) : (
            <div className="space-y-4">
              {entries.map((entry) => (
                <div 
                  key={entry.id} 
                  className="bg-white border border-amber-200 rounded-lg p-4 shadow-md transform rotate-[-0.5deg] hover:rotate-0 transition-transform"
                >
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="font-handwriting text-xl text-amber-900">{entry.name}</h3>
                    <div className="flex items-center text-xs text-amber-600">
                      <Calendar className="h-3 w-3 mr-1" />
                      {entry.timestamp}
                    </div>
                  </div>
                  <p className="text-amber-800 whitespace-pre-wrap">{entry.message}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
import { Book, House, MessageSquare, Settings, User } from 'lucide-react';
import { useState } from 'react';
export default function Header() {
  const [isProfileOpen, setIsProfileOpen] = useState(false);
  return <header className="bg-amber-800 text-white shadow-md">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Book className="h-6 w-6" />
            <h1 className="text-xl font-bold font-handwriting">Avina's Diary</h1>
          </div>
          
          <nav className="hidden md:flex items-center space-x-6">
            <a href="#" className="flex items-center gap-1.5 hover:text-amber-200 transition-colors">
              <House className="h-4 w-4" />
              <span>House</span>
            </a>
            <a href="#" className="flex items-center gap-1.5 hover:text-amber-200 transition-colors">
              <Book className="h-4 w-4" />
              <span>Pages</span>
            </a>
            <a href="/guestbook" className="flex items-center gap-1.5 hover:text-amber-200 transition-colors">
              <MessageSquare className="h-4 w-4" />
              <span>Guestbook</span>
            </a>
            <a href="#" className="flex items-center gap-1.5 hover:text-amber-200 transition-colors">
              <Settings className="h-4 w-4" />
              <span>Settings</span>
            </a>
          </nav>
          
          <div className="relative">
            <button onClick={() => setIsProfileOpen(!isProfileOpen)} className="flex items-center gap-2 bg-amber-700 hover:bg-amber-600 rounded-full py-1.5 px-3 transition-colors">
              <span className="font-medium">My Account</span>
              <div className="h-7 w-7 rounded-full bg-amber-500 flex items-center justify-center">
                <User className="h-4 w-4 text-amber-900" />
              </div>
            </button>
            
            {isProfileOpen && <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-50">
                <a href="#" className="block px-4 py-2 text-amber-900 hover:bg-amber-50">
                  Profile
                </a>
                <a href="#" className="block px-4 py-2 text-amber-900 hover:bg-amber-50">
                  Account Settings
                </a>
                <a href="#" className="block px-4 py-2 text-amber-900 hover:bg-amber-50">
                  Help & Support
                </a>
                <div className="border-t border-amber-100 my-1"></div>
                <a href="#" className="block px-4 py-2 text-amber-900 hover:bg-amber-50">
                  Sign Out
                </a>
              </div>}
          </div>
        </div>
      </div>
    </header>;
}import { useState, useRef } from 'react';
import { JournalEntry as JournalEntryType } from '../types';
import { useScrapbook } from '../context/ScrapbookContext';
import { Squircle, Move, Trash2 } from 'lucide-react';

interface JournalEntryProps {
  entry: JournalEntryType;
  pageId: string;
}

export default function JournalEntry({ entry, pageId }: JournalEntryProps) {
  const { updateJournalEntry, deleteJournalEntry } = useScrapbook();
  const [isEditing, setIsEditing] = useState(false);
  const [title, setTitle] = useState(entry.title || '');
  const [content, setContent] = useState(entry.content);
  const [showControls, setShowControls] = useState(false);
  const entryRef = useRef<HTMLDivElement>(null);
  
  const handleSave = () => {
    updateJournalEntry(pageId, { 
      ...entry, 
      title, 
      content 
    });
    setIsEditing(false);
  };

  const handleDelete = () => {
    deleteJournalEntry(pageId, entry.id);
  };

  return (
    <div 
      ref={entryRef}
      className="max-w-md relative group"
      onMouseEnter={() => setShowControls(true)}
      onMouseLeave={() => setShowControls(false)}
    >
      <div className="bg-amber-50 p-4 shadow-md border border-amber-200 rotate-[-1deg]">
        {isEditing ? (
          <div className="space-y-2">
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              className="w-full px-3 py-1.5 border border-amber-300 rounded"
              placeholder="Entry title..."
            />
            <textarea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              className="w-full px-3 py-1.5 border border-amber-300 rounded min-h-[100px]"
              placeholder="Write your thoughts..."
            />
            <div className="flex justify-end gap-2">
              <button 
                onClick={() => setIsEditing(false)}
                className="px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
              >
                Cancel
              </button>
              <button 
                onClick={handleSave}
                className="px-3 py-1 text-sm bg-amber-500 text-white rounded hover:bg-amber-600"
              >
                Save
              </button>
            </div>
          </div>
        ) : (
          <div>
            {entry.title && (
              <h3 className="font-handwriting text-xl mb-2 text-amber-900">
                {entry.title}
              </h3>
            )}
            <p className="font-handwriting text-lg text-amber-800 whitespace-pre-wrap">
              {entry.content}
            </p>
            <div className="text-right mt-2">
              <span className="text-xs text-amber-600 font-handwriting">
                {entry.date}
              </span>
            </div>
          </div>
        )}
      </div>
      
      {showControls && !isEditing && (
        <div className="absolute -top-3 -right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
          <button 
            onClick={() => setIsEditing(true)}
            className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
            title="Edit entry"
          >
            <Squircle className="w-4 h-4 text-amber-800" />
          </button>
          
          <button 
            onClick={handleDelete}
            className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
            title="Delete entry"
          >
            <Trash2 className="w-4 h-4 text-red-500" />
          </button>
        </div>
      )}
    </div>
  );
}
import { useState } from 'react';
import { useScrapbook } from '../context/ScrapbookContext';
import { ArrowLeft, ArrowRight, Book, Plus } from 'lucide-react';

export default function PageNavigation() {
  const { pages, currentPageId, setCurrentPageId, addPage } = useScrapbook();
  const [newPageTitle, setNewPageTitle] = useState('');
  const [isAddingPage, setIsAddingPage] = useState(false);

  const currentPageIndex = pages.findIndex(page => page.id === currentPageId);
  
  const handlePrevPage = () => {
    if (currentPageIndex > 0) {
      setCurrentPageId(pages[currentPageIndex - 1].id);
    }
  };

  const handleNextPage = () => {
    if (currentPageIndex < pages.length - 1) {
      setCurrentPageId(pages[currentPageIndex + 1].id);
    }
  };

  const handleAddPage = () => {
    if (newPageTitle.trim()) {
      addPage(newPageTitle);
      setNewPageTitle('');
      setIsAddingPage(false);
    }
  };

  return (
    <div className="flex items-center justify-between w-full py-3 px-4 bg-amber-50 border-b border-amber-200">
      <div className="flex items-center gap-2">
        <Book className="h-5 w-5 text-amber-800" />
        <span className="font-medium text-amber-900">
          Page {currentPageIndex + 1} of {pages.length}
        </span>
      </div>
      
      <div className="flex items-center gap-2">
        <button 
          onClick={handlePrevPage}
          disabled={currentPageIndex === 0}
          className={`p-2 rounded-full ${currentPageIndex === 0 ? 'text-amber-300' : 'text-amber-700 hover:bg-amber-100'}`}
        >
          <ArrowLeft className="h-5 w-5" />
        </button>
        
        <div className="relative">
          <select 
            value={currentPageId}
            onChange={(e) => setCurrentPageId(e.target.value)}
            className="appearance-none bg-amber-100 border border-amber-300 rounded-lg px-3 py-1.5 pr-8 text-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500"
          >
            {pages.map(page => (
              <option key={page.id} value={page.id}>
                {page.title}
              </option>
            ))}
          </select>
          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700">
            <svg className="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
            </svg>
          </div>
        </div>
        
        <button 
          onClick={handleNextPage}
          disabled={currentPageIndex === pages.length - 1}
          className={`p-2 rounded-full ${currentPageIndex === pages.length - 1 ? 'text-amber-300' : 'text-amber-700 hover:bg-amber-100'}`}
        >
          <ArrowRight className="h-5 w-5" />
        </button>
      </div>
      
      <div className="flex items-center gap-2">
        {isAddingPage ? (
          <>
            <input
              type="text"
              value={newPageTitle}
              onChange={(e) => setNewPageTitle(e.target.value)}
              placeholder="Page title..."
              className="px-3 py-1.5 text-sm border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
              autoFocus
            />
            <button
              onClick={handleAddPage}
              className="px-3 py-1.5 text-sm bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors"
            >
              Add
            </button>
            <button
              onClick={() => setIsAddingPage(false)}
              className="px-3 py-1.5 text-sm bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
            >
              Cancel
            </button>
          </>
        ) : (
          <button
            onClick={() => setIsAddingPage(true)}
            className="flex items-center gap-1 px-3 py-1.5 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors"
          >
            <Plus className="h-4 w-4" />
            <span>New Page</span>
          </button>
        )}
      </div>
    </div>
  );
}
import { useState, useRef } from 'react';
import { Photo as PhotoType } from '../types';
import { useScrapbook } from '../context/ScrapbookContext';
import { Squircle, Move, Trash2 } from 'lucide-react';

interface PhotoProps {
  photo: PhotoType;
  pageId: string;
}

export default function Photo({ photo, pageId }: PhotoProps) {
  const { updatePhoto, deletePhoto } = useScrapbook();
  const [isEditing, setIsEditing] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [caption, setCaption] = useState(photo.caption || '');
  const [showControls, setShowControls] = useState(false);
  const photoRef = useRef<HTMLDivElement>(null);
  const initialPosition = useRef({ x: 0, y: 0 });
  const photoPosition = useRef({ x: photo.x || 0, y: photo.y || 0 });

  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault();
    setIsDragging(true);
    initialPosition.current = { x: e.clientX, y: e.clientY };
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return;
    
    const dx = e.clientX - initialPosition.current.x;
    const dy = e.clientY - initialPosition.current.y;
    
    initialPosition.current = { x: e.clientX, y: e.clientY };
    photoPosition.current = {
      x: photoPosition.current.x + dx,
      y: photoPosition.current.y + dy
    };
    
    if (photoRef.current) {
      photoRef.current.style.transform = `
        translate(${photoPosition.current.x}px, ${photoPosition.current.y}px)
        rotate(${photo.rotation || 0}deg)
      `;
    }
  };

  const handleMouseUp = () => {
    if (isDragging) {
      setIsDragging(false);
      updatePhoto(pageId, { 
        ...photo, 
        x: photoPosition.current.x, 
        y: photoPosition.current.y 
      });
    }
  };

  const handleRotate = (direction: 'left' | 'right') => {
    const currentRotation = photo.rotation || 0;
    const newRotation = direction === 'left' 
      ? currentRotation - 5 
      : currentRotation + 5;
    
    updatePhoto(pageId, { ...photo, rotation: newRotation });
  };

  const handleSaveCaption = () => {
    updatePhoto(pageId, { ...photo, caption });
    setIsEditing(false);
  };

  const handleDelete = () => {
    deletePhoto(pageId, photo.id);
  };

  return (
    <div 
      ref={photoRef}
      className={`absolute ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
      style={{ 
        transform: `translate(${photo.x || 0}px, ${photo.y || 0}px) rotate(${photo.rotation || 0}deg)`,
        zIndex: photo.zIndex || 10,
      }}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
      onMouseEnter={() => setShowControls(true)}
      onMouseLeave={() => setShowControls(false)}
    >
      <div className="relative group">
        <div className="bg-white p-3 shadow-md border border-amber-100 max-w-xs">
          <img 
            src={photo.url} 
            alt={photo.caption || 'Scrapbook photo'} 
            className="max-w-full h-auto"
          />
          
          {isEditing ? (
            <div className="mt-2">
              <input
                type="text"
                value={caption}
                onChange={(e) => setCaption(e.target.value)}
                className="w-full px-2 py-1 text-sm border border-amber-300 rounded"
                placeholder="Add caption..."
                autoFocus
              />
              <div className="flex justify-end mt-1 gap-1">
                <button 
                  onClick={handleSaveCaption}
                  className="px-2 py-0.5 text-xs bg-amber-500 text-white rounded hover:bg-amber-600"
                >
                  Save
                </button>
                <button 
                  onClick={() => setIsEditing(false)}
                  className="px-2 py-0.5 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300"
                >
                  Cancel
                </button>
              </div>
            </div>
          ) : (
            photo.caption && (
              <p className="mt-1 text-sm text-center font-handwriting text-amber-900">
                {photo.caption}
              </p>
            )
          )}
        </div>
        
        {showControls && (
          <div className="absolute -top-3 -right-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
            <button 
              onClick={() => handleRotate('left')}
              className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
              title="Rotate left"
            >
              <svg className="w-4 h-4 text-amber-800" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M9 14L5 10L9 6" />
                <path d="M5 10H16C19.866 10 23 13.134 23 17V20" />
              </svg>
            </button>
            
            <button 
              onClick={() => handleRotate('right')}
              className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
              title="Rotate right"
            >
              <svg className="w-4 h-4 text-amber-800" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M15 14L19 10L15 6" />
                <path d="M19 10H8C4.134 10 1 13.134 1 17V20" />
              </svg>
            </button>
            
            <button 
              onClick={() => setIsEditing(true)}
              className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
              title="Edit caption"
            >
              <Squircle className="w-4 h-4 text-amber-800" />
            </button>
            
            <button 
              onClick={handleDelete}
              className="p-1 bg-white rounded-full shadow-md hover:bg-amber-50"
              title="Delete photo"
            >
              <Trash2 className="w-4 h-4 text-red-500" />
            </button>
          </div>
        )}
        
        {isDragging && (
          <div className="fixed inset-0 z-50 cursor-grabbing" />
        )}
      </div>
    </div>
  );
}