'use client'

import Link from 'next/link'
import { useState } from 'react'
import { Edit2 } from 'lucide-react'
import Modal from './Modal'
import ListForm from './ListForm'
import DeleteListButton from './DeleteListButton'

interface List {
  id: string
  title: string
  color: string
  items: Array<{
    id: string
    completed: boolean
  }>
}

export default function ListCard({ list }: { list: List }) {
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const completedCount = list.items.filter(item => item.completed).length
  const totalCount = list.items.length
  const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0

  const handleEditClick = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setIsEditModalOpen(true)
  }

  const handleDeleteClick = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
  }

  return (
    <>
      <Link href={`/list/${list.id}`}>
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer group">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3 flex-1 min-w-0">
              <div 
                className="w-4 h-4 rounded-full flex-shrink-0" 
                style={{ backgroundColor: list.color }}
              />
              <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
            </div>
            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={handleDeleteClick}>
              <button
                onClick={handleEditClick}
                className="text-gray-600 hover:text-gray-900 transition-colors p-2 hover:bg-gray-100 rounded-lg"
                aria-label="Edit list"
              >
                <Edit2 size={18} />
              </button>
              <DeleteListButton 
                listId={list.id} 
                listTitle={list.title}
                itemCount={totalCount}
              />
            </div>
          </div>
          
          <div className="space-y-3">
            <div className="flex items-center justify-between text-sm text-gray-600">
              <span>{completedCount} of {totalCount} completed</span>
              <span>{Math.round(progress)}%</span>
            </div>
            
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="h-2 rounded-full transition-all duration-300"
                style={{ 
                  width: `${progress}%`,
                  backgroundColor: list.color 
                }}
              />
            </div>
          </div>
        </div>
      </Link>

      <Modal
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        title="Edit List"
      >
        <ListForm
          list={list}
          onCancel={() => setIsEditModalOpen(false)}
          onSuccess={() => setIsEditModalOpen(false)}
        />
      </Modal>
    </>
  )
}