Todo/components/ShareListModal.tsx

'use client'

import { useState } from 'react'
import { Users, Mail, Send } from 'lucide-react'
import Modal from './Modal'
import CollaboratorList from './CollaboratorList'
import { inviteUserToList, getCollaborators } from '@/lib/sharing-actions'
import { useRouter } from 'next/navigation'

interface Collaborator {
  id: string
  permission: 'editor' | 'viewer'
  user: {
    id: string
    name: string | null
    email: string
  }
}

interface ShareListModalProps {
  isOpen: boolean
  onClose: () => void
  listId: string
  listTitle: string
  isOwner: boolean
  ownerId: string
  ownerName: string | null
  ownerEmail: string
  initialCollaborators?: Collaborator[]
}

export default function ShareListModal({
  isOpen,
  onClose,
  listId,
  listTitle,
  isOwner,
  ownerId,
  ownerName,
  ownerEmail,
  initialCollaborators = [],
}: ShareListModalProps) {
  const [email, setEmail] = useState('')
  const [permission, setPermission] = useState<'editor' | 'viewer'>('editor')
  const [isInviting, setIsInviting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)
  const [collaborators, setCollaborators] = useState<Collaborator[]>(initialCollaborators)
  const router = useRouter()

  const handleInvite = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsInviting(true)
    setError(null)
    setSuccess(null)

    try {
      await inviteUserToList(listId, email, permission)
      setSuccess(`Invitation sent to ${email}`)
      setEmail('')
      setPermission('editor')
      
      // Refresh collaborators list
      const updatedCollaborators = await getCollaborators(listId) as Collaborator[]
      setCollaborators(updatedCollaborators)
      router.refresh()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to send invitation')
    } finally {
      setIsInviting(false)
    }
  }

  const handleClose = () => {
    setEmail('')
    setPermission('editor')
    setError(null)
    setSuccess(null)
    onClose()
  }

  return (
    <Modal isOpen={isOpen} onClose={handleClose} title={`Share "${listTitle}"`}>
      <div className="space-y-6">
        {/* Invite Form - Only show if user is owner */}
        {isOwner && (
          <div>
            <div className="flex items-center gap-2 mb-3">
              <Mail size={18} className="text-gray-600" />
              <h3 className="font-medium text-gray-900">Invite Collaborator</h3>
            </div>

            <form onSubmit={handleInvite} className="space-y-3">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="colleague@example.com"
                  required
                  disabled={isInviting}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                />
              </div>

              <div>
                <label htmlFor="permission" className="block text-sm font-medium text-gray-700 mb-1">
                  Permission Level
                </label>
                <select
                  id="permission"
                  value={permission}
                  onChange={(e) => setPermission(e.target.value as 'editor' | 'viewer')}
                  disabled={isInviting}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
                >
                  <option value="editor">Editor - Can add, edit, and delete items</option>
                  <option value="viewer">Viewer - Can only view items</option>
                </select>
              </div>

              {error && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
                  {error}
                </div>
              )}

              {success && (
                <div className="p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700">
                  {success}
                </div>
              )}

              <button
                type="submit"
                disabled={isInviting || !email}
                className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors font-medium"
              >
                <Send size={18} />
                {isInviting ? 'Sending...' : 'Send Invitation'}
              </button>
            </form>
          </div>
        )}

        {/* Collaborators List */}
        <div>
          <div className="flex items-center gap-2 mb-3">
            <Users size={18} className="text-gray-600" />
            <h3 className="font-medium text-gray-900">
              {isOwner ? 'People with Access' : 'Collaborators'}
            </h3>
          </div>

          <CollaboratorList
            listId={listId}
            collaborators={collaborators}
            isOwner={isOwner}
            ownerId={ownerId}
            ownerName={ownerName}
            ownerEmail={ownerEmail}
          />
        </div>
      </div>
    </Modal>
  )
}