import {
  RiCheckLine,
  RiCloseLine,
  RiDeleteBinLine,
  RiLink,
  RiLoader4Line,
  RiUserAddLine,
  RiWhatsappLine,
} from '@remixicon/react'
import { useEffect, useState } from 'react'
import { confirmAction, showError, showSuccess } from '../lib/alerts'
import * as shareService from '../services/shareService'

const ROLE_LABELS = { editor: 'Editor', viewer: 'Visor' }

function MemberRow({ member, onRemove, removing }) {
  const displayName = [member.name, member.lastname].filter(Boolean).join(' ') || member.email

  return (
    <div className="flex items-center justify-between gap-3 py-2">
      <div className="min-w-0">
        <p className="truncate text-sm text-slate-200">{displayName}</p>
        <p className="truncate text-xs text-slate-500">{member.email}</p>
      </div>
      <div className="flex shrink-0 items-center gap-2">
        <span className="rounded-full bg-white/5 px-2 py-1 text-xs text-slate-400">
          {member.role === 'owner' ? 'Propietario' : ROLE_LABELS[member.role] || member.role}
        </span>
        {member.role !== 'owner' && (
          <button
            type="button"
            onClick={() => onRemove(member)}
            disabled={removing}
            className="rounded-lg p-1.5 text-slate-400 hover:bg-white/10 hover:text-red-300 disabled:opacity-50"
            title="Quitar acceso"
          >
            <RiDeleteBinLine size={16} />
          </button>
        )}
      </div>
    </div>
  )
}

function ShareModal({ project, onClose }) {
  const [members, setMembers] = useState([])
  const [loading, setLoading] = useState(true)
  const [email, setEmail] = useState('')
  const [role, setRole] = useState('editor')
  const [inviting, setInviting] = useState(false)
  const [removingId, setRemovingId] = useState(null)
  const [copied, setCopied] = useState(false)

  const shareUrl = `${window.location.origin}/projects/${project.id}`

  const loadMembers = async () => {
    setLoading(true)
    try {
      const data = await shareService.getMembers(project.id)
      setMembers(data)
    } catch (err) {
      showError(err.message)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadMembers()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [project.id])

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      setCopied(true)
      showSuccess('Enlace copiado al portapapeles')
      setTimeout(() => setCopied(false), 2500)
    } catch (e) {
      showError('No se pudo copiar el enlace')
    }
  }

  const handleInvite = async (event) => {
    event.preventDefault()
    if (!email.trim()) {
      showError('Ingresa un correo.')
      return
    }
    setInviting(true)
    try {
      await shareService.inviteMember(project.id, email.trim(), role)
      setEmail('')
      await loadMembers()
    } catch (err) {
      showError(err.message)
    } finally {
      setInviting(false)
    }
  }

  const handleRemove = async (member) => {
    const confirmed = await confirmAction({
      title: '¿Quitar acceso?',
      text: `${member.email} ya no podrá ver ni editar "${project.name}".`,
      confirmText: 'Quitar',
      danger: true,
    })
    if (!confirmed) return

    setRemovingId(member.id)
    try {
      await shareService.removeMember(member.id)
      setMembers((prev) => prev.filter((m) => m.id !== member.id))
    } catch (err) {
      showError(err.message)
    } finally {
      setRemovingId(null)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 backdrop-blur-xs">
      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[#12141c] p-6 shadow-2xl">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-white">Compartir "{project.name}"</h2>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg p-1 text-slate-400 hover:bg-white/10 hover:text-white"
          >
            <RiCloseLine size={20} />
          </button>
        </div>

        {/* Sección Enlace Directo (Copiar / WhatsApp) */}
        <div className="mt-4 rounded-xl border border-white/10 bg-[#181b24] p-3.5 flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium text-slate-300 flex items-center gap-1.5">
              <RiLink size={15} className="text-brand-400" /> Enlace para compartir
            </span>
            {copied && (
              <span className="text-xs font-medium text-emerald-400 flex items-center gap-1">
                <RiCheckLine size={14} /> ¡Copiado!
              </span>
            )}
          </div>

          <div className="flex items-center gap-2">
            <input
              type="text"
              readOnly
              value={shareUrl}
              className="min-w-0 flex-1 rounded-lg border border-white/10 bg-[#12141c] px-3 py-1.5 text-xs text-slate-300 outline-none select-all"
            />
            <button
              type="button"
              onClick={handleCopyLink}
              className="inline-flex items-center gap-1 rounded-lg bg-white/10 px-3 py-1.5 text-xs font-medium text-white hover:bg-white/20 transition-all shrink-0"
              title="Copiar enlace"
            >
              <RiLink size={14} />
              {copied ? 'Copiado' : 'Copiar'}
            </button>
            <a
              href={`https://api.whatsapp.com/send?text=${encodeURIComponent(`Te comparto la pizarra "${project.name}": ${shareUrl}`)}`}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-500 transition-all shrink-0"
              title="Enviar por WhatsApp"
            >
              <RiWhatsappLine size={14} />
              WhatsApp
            </a>
          </div>
        </div>

        {/* Invitación por Correo */}
        <form onSubmit={handleInvite} className="mt-4 flex items-center gap-2">
          <input
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
            placeholder="correo@ejemplo.com"
            className="min-w-0 flex-1 rounded-lg border border-white/10 bg-[#181b24] px-3 py-2 text-sm text-slate-200 outline-none focus:border-brand-500"
          />
          <select
            value={role}
            onChange={(event) => setRole(event.target.value)}
            className="rounded-lg border border-white/10 bg-[#181b24] px-2 py-2 text-sm text-slate-200 outline-none focus:border-brand-500"
          >
            <option value="editor">Editor</option>
            <option value="viewer">Visor</option>
          </select>
          <button
            type="submit"
            disabled={inviting}
            className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-500 disabled:opacity-60"
          >
            <RiUserAddLine size={16} />
            Invitar
          </button>
        </form>

        {/* Lista de Miembros */}
        <div className="mt-4 border-t border-white/10 pt-3">
          {loading ? (
            <div className="flex items-center justify-center gap-2 py-6 text-sm text-slate-400">
              <RiLoader4Line size={16} className="animate-spin" />
              Cargando...
            </div>
          ) : members.length === 0 ? (
            <p className="py-4 text-center text-sm text-slate-500">
              Nadie más tiene acceso a este proyecto todavía.
            </p>
          ) : (
            <div className="flex flex-col divide-y divide-white/5">
              {members.map((member) => (
                <MemberRow
                  key={member.id}
                  member={member}
                  onRemove={handleRemove}
                  removing={removingId === member.id}
                />
              ))}
            </div>
          )}
        </div>

        <div className="mt-4 flex justify-end">
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5"
          >
            Cerrar
          </button>
        </div>
      </div>
    </div>
  )
}

export default ShareModal