'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { ArrowLeft, Share2 } from 'lucide-react'
import PermissionBadge from './PermissionBadge'
import ShareListModal from './ShareListModal'

interface ListHeaderProps {
  listId: string
  listTitle: string
  listColor: string
  completedCount: number
  totalCount: number
  permission: 'owner' | 'editor' | 'viewer'
  canShare: boolean
  ownerId: string
  ownerName: string | null | undefined
  ownerEmail: string
  collaborators: Array<{
    id: string
    permission: 'editor' | 'viewer'
    user: {
      id: string
      name: string | null
      email: string
    }
  }>
}

export default function ListHeader({
  listId,
  listTitle,
  listColor,
  completedCount,
  totalCount,
  permission,
  canShare,
  ownerId,
  ownerName,
  ownerEmail,
  collaborators
}: ListHeaderProps) {
  const [mounted, setMounted] = useState(false)
  const [isShareModalOpen, setIsShareModalOpen] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <>
      <div className="mb-6 sm:mb-8">
        <Link 
          href="/" 
          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
        >
          <ArrowLeft size={20} className="flex-shrink-0" />
          <span>Back to Lists</span>
        </Link>
        
        <div className="flex items-center justify-between gap-3 mb-2">
          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
            <div 
              className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0" 
              style={{ backgroundColor: listColor }}
            />
            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
          </div>
          
          {mounted && (
            <div className="flex items-center gap-2 flex-shrink-0">
              <PermissionBadge permission={permission} />
              {canShare && (
                <button
                  onClick={() => setIsShareModalOpen(true)}
                  className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
                >
                  <Share2 size={16} />
                  <span className="hidden sm:inline">Share</span>
                </button>
              )}
            </div>
          )}
        </div>
        
        <p className="text-gray-600 text-sm sm:text-base">
          {completedCount} of {totalCount} tasks completed
        </p>
      </div>

      {mounted && (
        <ShareListModal
          isOpen={isShareModalOpen}
          onClose={() => setIsShareModalOpen(false)}
          listId={listId}
          listTitle={listTitle}
          isOwner={permission === 'owner'}
          ownerId={ownerId}
          ownerName={ownerName}
          ownerEmail={ownerEmail}
          initialCollaborators={collaborators}
        />
      )}
    </>
  )
}