'use client'

import { memo, useState } from 'react'
import Link from 'next/link'
import { Edit2, Users } 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
  }>
  collaborators?: Array<{
    id: string
    userId: string
    permission: string
  }>
}

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 hasCollaborators = list.collaborators && list.collaborators.length > 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-5 sm:p-6 hover:shadow-md active:shadow-lg transition-all cursor-pointer group min-h-[140px] sm:min-h-[160px]">
          <div className="flex items-start justify-between mb-4 gap-2">
            <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
              <div 
                className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex-shrink-0" 
                style={{ backgroundColor: list.color }}
              />
              <h3 className="font-semibold text-gray-900 truncate text-base sm:text-lg">{list.title}</h3>
              {hasCollaborators && list.collaborators && (
                <div className="flex items-center gap-1 text-gray-500 flex-shrink-0" title={`Shared with ${list.collaborators.length} ${list.collaborators.length === 1 ? 'person' : 'people'}`}>
                  <Users size={16} />
                  <span className="text-xs">{list.collaborators.length}</span>
                </div>
              )}
            </div>
            <div className="flex items-center gap-0.5 sm:gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0" onClick={handleDeleteClick}>
              <button
                onClick={handleEditClick}
                className="text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm hover:bg-gray-100 active:bg-gray-200 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-2.5 sm:space-y-3">
            <div className="flex items-center justify-between text-xs sm:text-sm text-gray-600">
              <span>{completedCount} of {totalCount} completed</span>
              <span className="font-medium">{Math.round(progress)}%</span>
            </div>
            
            <div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
              <div 
                className="h-2 sm:h-2.5 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>
    </>
  )
}

export default memo(ListCard)