import { notFound } from 'next/navigation'
import { getItem } from '@/lib/actions'
import ItemDetail from '@/components/ItemDetail'
import Link from 'next/link'
import { ArrowLeft, Edit, Trash2 } from 'lucide-react'
import DeleteItemButton from '@/components/DeleteItemButton'
import ToggleItemButton from '@/components/ToggleItemButton'

interface PageProps {
  params: {
    id: string
    itemId: string
  }
}

export default async function ItemDetailPage({ params }: PageProps) {
  const item = await getItem(params.itemId)

  if (!item || item.listId !== params.id) {
    notFound()
  }

  return (
    <main className="container mx-auto px-4 py-8 max-w-3xl">
      {/* Header Actions */}
      <div className="flex items-center justify-between mb-6">
        <Link
          href={`/list/${params.id}`}
          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
        >
          <ArrowLeft size={20} />
          <span>Back to List</span>
        </Link>

        <div className="flex items-center gap-2">
          <ToggleItemButton itemId={item.id} completed={item.completed} />
          <Link
            href={`/list/${params.id}/item/${params.itemId}/edit`}
            className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
          >
            <Edit size={18} />
            <span>Edit</span>
          </Link>
          <DeleteItemButton itemId={item.id} listId={params.id} />
        </div>
      </div>

      {/* Item Detail */}
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <ItemDetail item={item} listTitle={item.list.title} />
      </div>
    </main>
  )
}