import { getListWithItems } from '@/lib/actions'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, Plus } from 'lucide-react'
import ItemCard from '@/components/ItemCard'
import InlineItemCreate from '@/components/InlineItemCreate'

export default async function ListDetailPage({ params }: { params: { id: string } }) {
  const list = await getListWithItems(params.id)

  if (!list) {
    notFound()
  }

  const completedItems = list.items.filter(item => item.completed)
  const incompleteItems = list.items.filter(item => !item.completed)

  return (
    <main className="container mx-auto px-4 py-8 max-w-4xl">
      {/* Header */}
      <div className="mb-8">
        <Link 
          href="/" 
          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
        >
          <ArrowLeft size={20} />
          <span>Back to Lists</span>
        </Link>
        
        <div className="flex items-center gap-3 mb-2">
          <div 
            className="w-6 h-6 rounded-full flex-shrink-0" 
            style={{ backgroundColor: list.color }}
          />
          <h1 className="text-3xl font-bold text-gray-900">{list.title}</h1>
        </div>
        
        <p className="text-gray-600">
          {completedItems.length} of {list.items.length} tasks completed
        </p>
      </div>

      {/* Inline Item Creation */}
      <div className="mb-6">
        <InlineItemCreate listId={list.id} />
      </div>

      {/* Items List */}
      <div className="space-y-6">
        {/* Incomplete Items */}
        {incompleteItems.length > 0 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-3">
              To Do ({incompleteItems.length})
            </h2>
            <div className="space-y-2">
              {incompleteItems.map((item) => (
                <ItemCard key={item.id} item={item} listId={list.id} />
              ))}
            </div>
          </div>
        )}

        {/* Completed Items */}
        {completedItems.length > 0 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-500 mb-3">
              Completed ({completedItems.length})
            </h2>
            <div className="space-y-2">
              {completedItems.map((item) => (
                <ItemCard key={item.id} item={item} listId={list.id} />
              ))}
            </div>
          </div>
        )}

        {/* Empty State */}
        {list.items.length === 0 && (
          <div className="text-center py-12 bg-gray-50 rounded-lg">
            <p className="text-gray-500 text-lg mb-2">No tasks yet</p>
            <p className="text-gray-400">Add your first task to get started</p>
          </div>
        )}
      </div>
    </main>
  )
}