import React, { useState, useEffect, useRef } from 'react';
import {
  X,
  UserPlus,
  Users,
  Copy,
  Check,
  Shield,
  Trash2,
  Loader2,
  AlertCircle,
  Palette,
  CheckCircle,
  ExternalLink,
} from 'lucide-react';
import { CalendarSpace, SpaceMember } from '../types/calendar';
import { atprotoService, CALENDAR_COLORS } from '../services/atproto';
import { useToast } from './Toast';
import { useModalFocus } from '../hooks/useModalFocus';

interface ShareSpaceModalProps {
  isOpen: boolean;
  onClose: () => void;
  space: CalendarSpace | null;
  onMembersUpdated: () => void;
  onSpaceUpdated?: (updatedSpace: CalendarSpace) => void;
  onOpenTools?: () => void;
}

export const ShareSpaceModal: React.FC<ShareSpaceModalProps> = ({
  isOpen,
  onClose,
  space,
  onMembersUpdated,
  onSpaceUpdated,
  onOpenTools,
}) => {
  const toast = useToast();

  const [members, setMembers] = useState<SpaceMember[]>([]);
  const [loadingMembers, setLoadingMembers] = useState(false);
  const [membersError, setMembersError] = useState<string | null>(null);
  const [inviteIdentifier, setInviteIdentifier] = useState('');
  const [inviting, setInviting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);
  const [removingDid, setRemovingDid] = useState<string | null>(null);

  const [spaceName, setSpaceName] = useState('');
  const [spaceColor, setSpaceColor] = useState('');
  const [spaceDescription, setSpaceDescription] = useState('');
  const [savingSettings, setSavingSettings] = useState(false);
  const membersRequestId = useRef(0);
  const requestClose = () => {
    if (!inviting && !removingDid && !savingSettings) onClose();
  };
  const dialogRef = useModalFocus(isOpen, requestClose);

  const currentDid = atprotoService.getCurrentDid();

  useEffect(() => {
    if (isOpen && space) {
      setMembers([]);
      loadMembers();
      setSpaceName(space.name);
      setSpaceColor(space.color);
      setSpaceDescription(space.description || '');
    }
    return () => {
      membersRequestId.current += 1;
    };
  }, [isOpen, space]);

  const loadMembers = async (requestedSpace = space) => {
    if (!requestedSpace) return;
    const requestId = ++membersRequestId.current;
    setLoadingMembers(true);
    setMembersError(null);
    try {
      const list = await atprotoService.listSpaceMembers(requestedSpace.uri);
      if (requestId === membersRequestId.current && space?.uri === requestedSpace.uri) {
        setMembers(list);
      }
    } catch (err: any) {
      if (requestId === membersRequestId.current && space?.uri === requestedSpace.uri) {
        setMembersError(err.message || 'Failed to load space members.');
      }
    } finally {
      if (requestId === membersRequestId.current) setLoadingMembers(false);
    }
  };

  if (!isOpen || !space) return null;

  const handleCopyUri = async () => {
    try {
      await navigator.clipboard.writeText(space.uri);
      setCopied(true);
      toast.success('Space URI copied to clipboard');
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error('Could not copy the calendar address. Select and copy it manually.');
    }
  };

  const handleInvite = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inviteIdentifier.trim()) return;

    setInviting(true);
    setError(null);

    try {
      await atprotoService.addSpaceMember(space.uri, inviteIdentifier.trim());
      toast.success(`Invited ${inviteIdentifier.trim()} to space`);
      setInviteIdentifier('');
      await loadMembers();
      onMembersUpdated();
    } catch (err: any) {
      setError(err.message || 'Failed to invite user to space. Check handle/DID.');
    } finally {
      setInviting(false);
    }
  };

  const handleRemove = async (did: string) => {
    setRemovingDid(did);
    setError(null);
    try {
      await atprotoService.removeSpaceMember(space.uri, did);
      toast.success('Member removed');
      await loadMembers();
      onMembersUpdated();
    } catch (err: any) {
      setError(err.message || 'Failed to remove member.');
    } finally {
      setRemovingDid(null);
    }
  };

  const handleSaveSettings = async () => {
    if (!spaceName.trim()) return;
    setSavingSettings(true);
    try {
      await atprotoService.updateSpaceMeta(space.uri, {
        name: spaceName.trim(),
        color: spaceColor,
        description: spaceDescription.trim() || undefined,
      });
      toast.success('Space settings updated');
      if (onSpaceUpdated) {
        onSpaceUpdated({
          ...space,
          name: spaceName.trim(),
          color: spaceColor,
          description: spaceDescription.trim() || undefined,
        });
      }
    } catch {
      toast.error('Failed to update space settings');
    } finally {
      setSavingSettings(false);
    }
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/60 backdrop-blur-xs animate-fade-in"
      onClick={requestClose}
    >
      <div
        ref={dialogRef} role="dialog" aria-modal="true" aria-label="Calendar settings" tabIndex={-1}
        className="w-full max-w-lg bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden flex flex-col max-h-[90vh]"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-4 sm:p-5 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div
              className="w-4 h-4 rounded-full flex-shrink-0"
              style={{ backgroundColor: spaceColor || space.color }}
            />
            <div>
              <h3 className="font-semibold text-slate-900 dark:text-white text-base">
                Calendar settings
              </h3>
              <p className="text-xs text-slate-500 dark:text-slate-400">
                Access control, members, and calendar settings
              </p>
            </div>
          </div>
          <button
            onClick={requestClose}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="px-5 pt-4">
          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
            Space URI (AT Protocol Identifier)
          </label>
          <div className="flex items-center gap-2 bg-slate-50 dark:bg-slate-800/60 p-2 rounded-xl border border-slate-200 dark:border-slate-700">
            <code className="text-[11px] font-mono text-slate-600 dark:text-slate-300 truncate flex-1 select-all">
              {space.uri}
            </code>
            <button
              onClick={handleCopyUri}
              className="px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-700 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-100 transition flex items-center gap-1.5 flex-shrink-0 shadow-xs"
            >
              {copied ? (
                <>
                  <Check className="w-3.5 h-3.5 text-emerald-500" />
                  <span className="text-emerald-600 dark:text-emerald-400">Copied</span>
                </>
              ) : (
                <>
                  <Copy className="w-3.5 h-3.5" />
                  <span>Copy</span>
                </>
              )}
            </button>
            <a
              href={`https://pds.ls/${space.uri}`}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Open space in PDSls"
              title="Open in PDSls"
              className="px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-700 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-100 transition flex items-center gap-1.5 flex-shrink-0 shadow-xs"
            >
              <ExternalLink className="w-3.5 h-3.5" />
              <span>PDSls</span>
            </a>
          </div>
        </div>

        {space.isOwner && (
          <div className="px-5 pt-3">
            <label htmlFor="calendar-name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
              Calendar name
            </label>
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
              <input
                id="calendar-name"
                type="text"
                value={spaceName}
                onChange={(e) => setSpaceName(e.target.value)}
                className="flex-1 px-3 py-1.5 text-xs rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-primary-500"
              />
              <div className="flex flex-wrap items-center gap-1" aria-label="Calendar color">
                {CALENDAR_COLORS.map((c) => (
                  <button
                    key={c}
                    type="button"
                    onClick={() => setSpaceColor(c)}
                    aria-label={`Use ${c} calendar color`}
                    aria-pressed={spaceColor === c}
                    className={`w-6 h-6 rounded-full transition-transform ${
                      spaceColor === c ? 'scale-110 ring-2 ring-offset-1 ring-primary-500' : 'hover:scale-105'
                    }`}
                    style={{ backgroundColor: c }}
                  />
                ))}
              </div>
              {(spaceName !== space.name || spaceColor !== space.color || spaceDescription !== (space.description || '')) && (
                <button
                  type="button"
                  onClick={handleSaveSettings}
                  disabled={savingSettings}
                  className="px-2.5 py-1 text-xs font-semibold text-white bg-primary-600 hover:bg-primary-700 rounded-lg shadow-xs transition"
                >
                  Save
                </button>
              )}
            </div>
            <label htmlFor="calendar-description" className="mt-3 mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300">
              Description
            </label>
            <textarea id="calendar-description" value={spaceDescription} onChange={(e) => setSpaceDescription(e.target.value)} rows={2} className="w-full resize-y rounded-xl border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 outline-none focus:ring-2 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-800 dark:text-white" />
          </div>
        )}

        <form onSubmit={handleInvite} className="p-5 pb-2">
          <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
            Invite Collaborator
          </label>
          <div className="flex gap-2">
            <input
              type="text"
              placeholder="e.g. alice.spaces-alpha.bsky.network or did:plc:..."
              value={inviteIdentifier}
              onChange={(e) => setInviteIdentifier(e.target.value)}
              className="flex-1 px-3 py-2 text-xs rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-primary-500 outline-none transition"
            />
            <button
              type="submit"
              disabled={inviting || !inviteIdentifier.trim()}
              className="px-4 py-2 text-xs font-semibold text-white bg-primary-600 hover:bg-primary-700 active:bg-primary-800 rounded-xl transition flex items-center gap-1.5 disabled:opacity-50 shadow-xs whitespace-nowrap"
            >
              {inviting ? (
                <Loader2 className="w-3.5 h-3.5 animate-spin" />
              ) : (
                <UserPlus className="w-3.5 h-3.5" />
              )}
              <span>Invite</span>
            </button>
          </div>
        </form>

        {error && (
          <div className="mx-5 mb-2 p-2.5 bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/50 rounded-xl text-xs text-red-600 dark:text-red-400 flex items-center gap-2">
            <AlertCircle className="w-4 h-4 flex-shrink-0" />
            <span>{error}</span>
          </div>
        )}

        {membersError && (
          <div role="alert" className="mx-5 mb-2 flex items-center justify-between gap-2 rounded-xl border border-red-200 bg-red-50 p-2.5 text-xs text-red-600 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-400">
            <span>{membersError}</span>
            <button type="button" onClick={() => loadMembers()} className="font-semibold underline" disabled={loadingMembers}>
              Retry
            </button>
          </div>
        )}

        <div className="p-5 pt-2 flex-1 overflow-y-auto">
          <div className="flex items-center justify-between mb-2.5">
            <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
              <Users className="w-3.5 h-3.5" />
              Members & Collaborators ({members.length})
            </span>
            {loadingMembers && (
              <span className="text-[11px] text-slate-400 flex items-center gap-1">
                <Loader2 className="w-3 h-3 animate-spin" /> Loading...
              </span>
            )}
          </div>

          <div className="space-y-2">
            {members.map((member) => {
              const isCurrentUser = member.did === currentDid;

              return (
                <div
                  key={member.did}
                  className="flex items-center justify-between p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition"
                >
                  <div className="flex items-center gap-3 overflow-hidden">
                    <div className="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-xs font-bold text-slate-600 dark:text-slate-300 flex-shrink-0 overflow-hidden">
                      {member.avatar ? (
                        <img src={member.avatar} alt="Avatar" className="w-full h-full object-cover" />
                      ) : (
                        (member.displayName || member.handle || member.did).charAt(0).toUpperCase()
                      )}
                    </div>
                    <div className="truncate">
                      <div className="flex items-center gap-1.5">
                        <span className="text-xs font-semibold text-slate-800 dark:text-slate-200 truncate">
                          {member.displayName || member.handle || 'Member'}
                        </span>
                        {isCurrentUser && (
                          <span className="px-1.5 py-0.2 rounded text-[9px] font-bold bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">
                            You
                          </span>
                        )}
                        {member.isOwner && (
                          <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary-100 dark:bg-primary-900/60 text-primary-700 dark:text-primary-300">
                            <Shield className="w-2.5 h-2.5" /> Owner
                          </span>
                        )}
                      </div>
                      <div className="text-[11px] text-slate-400 dark:text-slate-500 font-mono truncate">
                        {member.handle ? `@${member.handle} (${member.did})` : member.did}
                      </div>
                    </div>
                  </div>

                  {!member.isOwner && (
                    <button
                      onClick={() => handleRemove(member.did)}
                      disabled={removingDid === member.did}
                      title="Remove collaborator"
                      className="p-1.5 rounded-lg text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 transition disabled:opacity-50"
                    >
                      {removingDid === member.did ? (
                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
                      ) : (
                        <Trash2 className="w-3.5 h-3.5" />
                      )}
                    </button>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        <div className="flex flex-wrap justify-between gap-2 border-t border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
          {onOpenTools && <button onClick={onOpenTools} className="rounded-xl px-4 py-2 text-xs font-semibold text-primary-700 transition hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-slate-700">Calendar tools</button>}
          <button
            onClick={requestClose}
            className="px-4 py-2 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl transition"
          >
            Done
          </button>
        </div>
      </div>
    </div>
  );
};