'use client'

import Image from 'next/image';
import { CopyPlus, Trash2, Plus } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';

interface Card {
  id: number;
  isEditing: boolean;
}

export default function Frame() {
  const [cards, setCards] = useState<Card[]>([]);
  const [nextId, setNextId] = useState(1);

  const handleAddCard = () => {
    setCards([...cards, { id: nextId, isEditing: true }]);
    setNextId(nextId + 1);
  };

  const handleDeleteCard = (id: number) => {
    setCards(cards.filter(card => card.id !== id));
  };

  const totalPages = cards.length + 1; 

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4">
      <div className="w-full max-w-[450px] flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
        <span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page 1/{totalPages}</span>
        <div className="flex gap-2">
          <CopyPlus 
            size={18} 
            className="cursor-pointer text-[#1A237E] hover:text-blue-600" 
            onClick={handleAddCard}
          />
          <Trash2 
            size={18} 
            className="cursor-pointer text-[#1A237E] hover:text-red-600" 
            onClick={() => handleDeleteCard(0)}
          />
        </div>
      </div>

      <div className="flex flex-col items-center gap-4 md:gap-8 w-full max-w-[450px]">
        <div className="w-full flex flex-col items-center">
          <div className="w-full max-w-[410px] aspect-[410/510] flex items-center justify-center">
            <Image 
              src="/pdf-image.png" 
              alt="Excerpt Card" 
              width={410} 
              height={510} 
              className="w-full h-full object-contain"
            />
          </div>
        </div>

        {cards.map((card, index) => (
          <div key={card.id} className="w-full flex flex-col items-center">
            <div className="w-full flex items-center justify-between px-4 py-2 mb-2" style={{ minHeight: 40 }}>
              <span className="text-[#2633B9] text-sm md:text-[14px] font-[#1A237E400]">Page {index + 2}/{totalPages}</span>
              <div className="flex gap-2">
                <CopyPlus 
                  size={18} 
                  className="cursor-pointer text-[#1A237E] hover:text-blue-600" 
                  onClick={handleAddCard}
                />
                <Trash2 
                  size={18} 
                  className="cursor-pointer text-[#1A237E] hover:text-red-600" 
                  onClick={() => handleDeleteCard(card.id)}
                />
              </div>
            </div>
            <div className="w-full max-w-[410px] aspect-[410/510] bg-white rounded-lg shadow-md">
            </div>
          </div>
        ))}

        <div className="w-full max-w-[450px] flex justify-center">
          <Button
            onClick={handleAddCard}
            variant="outline"
            className="flex justify-center items-center gap-2 py-2 text-[#1A237E] font-medium bg-white hover:bg-blue-50 transition-colors shadow-sm w-full max-w-[410px]"
          >
            <Plus size={20} className="text-[#1A237E]" />
            <span className="text-center text-sm md:text-[16px] font-[400]">Add new page</span>
          </Button>
        </div>
      </div>
    </div>
  );
}