import React, { useState, useRef, useEffect, useMemo } from 'react';
import { ImageCropModal } from '../../ui/ImageCropModal';
import { getSpaceGradient } from '../../../utils/gradients';
import { useSpaceStore } from '../../../stores/spaceStore';
import { useAuthStore } from '../../../stores/authStore';
import { useUIStore } from '../../../stores/uiStore';
import { useNavigate } from 'react-router-dom';
import { api } from '../../../api/client';
import { getApiForOrigin, getMyUserIdForOrigin } from '../../../stores/spaceStore';
import { hasPermissionBit, PermissionBits } from '../../../utils/permissions';

interface OverviewPanelProps {
  spaceId: string;
}

export function OverviewPanel({ spaceId }: OverviewPanelProps) {
  const spaces = useSpaceStore((s) => s.spaces);
  const updateSpace = useSpaceStore((s) => s.updateSpace);
  const deleteSpace = useSpaceStore((s) => s.deleteSpace);
  const currentUser = useAuthStore((s) => s.user);
  const closeModal = useUIStore((s) => s.closeModal);
  const spacePermissions = useSpaceStore((s) => s.spacePermissions);
  const navigate = useNavigate();

  const space = spaces.find((s) => s.id === spaceId);
  const isOwner = space?.ownerId === getMyUserIdForOrigin((space as any)?._instanceOrigin ?? '');
  const myPerms = spacePermissions.get(spaceId);
  const canManageSpace = hasPermissionBit(myPerms, PermissionBits.MANAGE_SPACE);

  const [spaceName, setSpaceName] = useState(space?.name ?? '');
  // null = no change, '' = remove, 'filename.png' = new uploaded
  const [iconFilename, setIconFilename] = useState<string | null>(null);
  const [iconPreview, setIconPreview] = useState<string | null>(null);
  const [uploadingIcon, setUploadingIcon] = useState(false);
  const [cropSrc, setCropSrc] = useState<string | null>(null);

  // Banner state (same pattern as icon)
  const [bannerFilename, setBannerFilename] = useState<string | null>(null);
  const [bannerPreview, setBannerPreview] = useState<string | null>(null);
  const [uploadingBanner, setUploadingBanner] = useState(false);
  const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null);
  const bannerFileInputRef = useRef<HTMLInputElement>(null);

  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState('');
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Transfer ownership state
  const members = useSpaceStore((s) => s.members);
  const transferOwnership = useSpaceStore((s) => s.transferOwnership);
  const addToast = useUIStore((s) => s.addToast);
  const [showTransfer, setShowTransfer] = useState(false);
  const [transferSearch, setTransferSearch] = useState('');
  const [transferTargetId, setTransferTargetId] = useState<string | null>(null);
  const [transferring, setTransferring] = useState(false);

  useEffect(() => {
    if (space) {
      setSpaceName(space.name);
      setIconFilename(null);
      if (iconPreview) {
        URL.revokeObjectURL(iconPreview);
        setIconPreview(null);
      }
      setBannerFilename(null);
      if (bannerPreview) {
        URL.revokeObjectURL(bannerPreview);
        setBannerPreview(null);
      }
    }
  }, [space?.name, space?.icon, space?.banner]);

  if (!space) return null;

  const hasNameChange = spaceName.trim() !== space.name;
  const hasIconChange = iconFilename !== null;
  const hasBannerChange = bannerFilename !== null;
  const hasChanges = hasNameChange || hasIconChange || hasBannerChange;

  const currentIconUrl = space.icon
    ? (space.icon.startsWith('http') ? space.icon : api.uploads.url(space.icon))
    : null;

  const currentBannerUrl = space.banner
    ? (space.banner.startsWith('http') ? space.banner : api.uploads.url(space.banner))
    : null;

  // ─── Icon handlers ────────────────────────────────────────────────────────

  const handleIconSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => setCropSrc(reader.result as string);
    reader.readAsDataURL(file);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const handleCropComplete = async (blob: Blob) => {
    if (iconPreview) URL.revokeObjectURL(iconPreview);
    const previewUrl = URL.createObjectURL(blob);
    setIconPreview(previewUrl);
    setCropSrc(null);

    const file = new File([blob], 'icon.png', { type: 'image/png' });
    setUploadingIcon(true);
    try {
      const spaceApi = getApiForOrigin(space._instanceOrigin);
      const attachment = await spaceApi.uploads.upload(file);
      setIconFilename(attachment.filename);
    } catch {
      setSaveError('Failed to upload icon');
      setIconPreview(null);
      URL.revokeObjectURL(previewUrl);
    } finally {
      setUploadingIcon(false);
    }
  };

  const handleRemoveIcon = () => {
    if (iconPreview) URL.revokeObjectURL(iconPreview);
    setIconPreview(null);
    setIconFilename('');
  };

  // ─── Banner handlers ──────────────────────────────────────────────────────

  const handleBannerSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => setBannerCropSrc(reader.result as string);
    reader.readAsDataURL(file);
    if (bannerFileInputRef.current) bannerFileInputRef.current.value = '';
  };

  const handleBannerCropComplete = async (blob: Blob) => {
    if (bannerPreview) URL.revokeObjectURL(bannerPreview);
    const previewUrl = URL.createObjectURL(blob);
    setBannerPreview(previewUrl);
    setBannerCropSrc(null);

    const file = new File([blob], 'banner.png', { type: 'image/png' });
    setUploadingBanner(true);
    try {
      const spaceApi = getApiForOrigin(space._instanceOrigin);
      const attachment = await spaceApi.uploads.upload(file);
      setBannerFilename(attachment.filename);
    } catch {
      setSaveError('Failed to upload banner');
      setBannerPreview(null);
      URL.revokeObjectURL(previewUrl);
    } finally {
      setUploadingBanner(false);
    }
  };

  const handleRemoveBanner = () => {
    if (bannerPreview) URL.revokeObjectURL(bannerPreview);
    setBannerPreview(null);
    setBannerFilename('');
  };

  // ─── Save / Discard / Delete ──────────────────────────────────────────────

  const handleSave = async () => {
    setSaving(true);
    setSaveError('');
    setSaveSuccess(false);
    try {
      const updates: { name?: string; icon?: string; banner?: string } = {};
      if (hasNameChange) updates.name = spaceName.trim();
      if (hasIconChange) {
        updates.icon = iconFilename === '' ? '' : iconFilename!;
      }
      if (hasBannerChange) {
        updates.banner = bannerFilename === '' ? '' : bannerFilename!;
      }
      await updateSpace(spaceId, updates);
      setIconFilename(null);
      if (iconPreview) {
        URL.revokeObjectURL(iconPreview);
        setIconPreview(null);
      }
      setBannerFilename(null);
      if (bannerPreview) {
        URL.revokeObjectURL(bannerPreview);
        setBannerPreview(null);
      }
      setSaveSuccess(true);
      setTimeout(() => setSaveSuccess(false), 2000);
    } catch (err) {
      setSaveError(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setSaving(false);
    }
  };

  const handleDiscard = () => {
    setSpaceName(space.name);
    setIconFilename(null);
    if (iconPreview) {
      URL.revokeObjectURL(iconPreview);
      setIconPreview(null);
    }
    setBannerFilename(null);
    if (bannerPreview) {
      URL.revokeObjectURL(bannerPreview);
      setBannerPreview(null);
    }
    setSaveError('');
  };

  const handleDelete = async () => {
    if (!confirmDelete) {
      setConfirmDelete(true);
      return;
    }
    try {
      await deleteSpace(spaceId);
      closeModal();
      navigate('/channels/@me');
    } catch (err) {
      setSaveError(err instanceof Error ? err.message : 'Failed to delete space');
    }
  };

  // Transfer ownership logic
  const transferCandidates = useMemo(() => {
    const candidates = members.filter(m => m.userId !== currentUser?.id);
    if (!transferSearch.trim()) return candidates;
    const q = transferSearch.toLowerCase();
    return candidates.filter(m =>
      m.user.displayName?.toLowerCase().includes(q) ||
      m.user.username.toLowerCase().includes(q)
    );
  }, [members, currentUser?.id, transferSearch]);

  const transferTarget = transferTargetId ? members.find(m => m.userId === transferTargetId) : null;

  const handleTransfer = async () => {
    if (!transferTargetId) return;
    setTransferring(true);
    try {
      await transferOwnership(spaceId, transferTargetId);
      addToast(`Ownership transferred to ${transferTarget?.user.displayName || transferTarget?.user.username}`, 'success', 3000);
      setShowTransfer(false);
      setTransferTargetId(null);
      setTransferSearch('');
    } catch (err) {
      addToast(err instanceof Error ? err.message : 'Failed to transfer ownership', 'warning', 3000);
    } finally {
      setTransferring(false);
    }
  };

  const displayIconSrc = iconPreview ?? (iconFilename === '' ? null : currentIconUrl);
  const displayIconName = space.name;
  const displayBannerSrc = bannerPreview ?? (bannerFilename === '' ? null : currentBannerUrl);

  return (
    <>
      <div className="space-y-5">
        {/* Space Identity */}
        <div>
          <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Space Identity</div>
          <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
        {/* Space Icon */}
        <div>
          <label className="block text-xs text-txt-secondary mb-1.5">
            Space Icon
          </label>
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={() => canManageSpace && fileInputRef.current?.click()}
              disabled={!canManageSpace || uploadingIcon}
              className={`relative w-16 h-16 rounded-full bg-surface-input border-2 border-dashed border-border-subtle flex items-center justify-center overflow-hidden group ${
                canManageSpace ? 'hover:border-accent-primary cursor-pointer' : 'cursor-default'
              } transition-colors`}
            >
              {displayIconSrc ? (
                <>
                  <img src={displayIconSrc} alt="Space icon" className="w-full h-full object-cover" />
                  {canManageSpace && (
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                  )}
                </>
              ) : (
                <div
                  className="w-full h-full rounded-full flex items-center justify-center text-white text-xl font-bold"
                  style={{ background: getSpaceGradient(space.id, space.name).gradient }}
                >
                  {space.name.charAt(0).toUpperCase()}
                </div>
              )}
              {uploadingIcon && (
                <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                  <svg className="w-5 h-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                </div>
              )}
            </button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleIconSelect}
              className="hidden"
            />
            {canManageSpace && (displayIconSrc || space.icon) && iconFilename !== '' && (
              <button
                type="button"
                onClick={handleRemoveIcon}
                className="text-xs text-txt-tertiary hover:text-txt-danger transition-colors"
              >
                Remove
              </button>
            )}
          </div>
        </div>

        {/* Space Banner */}
        <div>
          <label className="block text-xs text-txt-secondary mb-1.5">
            Space Banner
          </label>
          <div className="flex flex-col gap-2">
            <button
              type="button"
              onClick={() => canManageSpace && bannerFileInputRef.current?.click()}
              disabled={!canManageSpace || uploadingBanner}
              className={`relative w-full h-24 rounded-lg bg-surface-input border-2 border-dashed border-border-subtle flex items-center justify-center overflow-hidden group ${
                canManageSpace ? 'hover:border-accent-primary cursor-pointer' : 'cursor-default'
              } transition-colors`}
            >
              {displayBannerSrc ? (
                <>
                  <img src={displayBannerSrc} alt="Space banner" className="w-full h-full object-cover" />
                  {canManageSpace && (
                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path strokeLinecap="round" strokeLinejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                  )}
                </>
              ) : (
                <div className="flex flex-col items-center gap-1 text-txt-tertiary">
                  <svg className="w-6 h-6 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
                  </svg>
                  <span className="text-[11px]">Upload banner (16:9)</span>
                </div>
              )}
              {uploadingBanner && (
                <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                  <svg className="w-5 h-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                </div>
              )}
            </button>
            <input
              ref={bannerFileInputRef}
              type="file"
              accept="image/*"
              onChange={handleBannerSelect}
              className="hidden"
            />
            {canManageSpace && (displayBannerSrc || space.banner) && bannerFilename !== '' && (
              <button
                type="button"
                onClick={handleRemoveBanner}
                className="text-xs text-txt-tertiary hover:text-txt-danger transition-colors self-start"
              >
                Remove banner
              </button>
            )}
          </div>
        </div>

        {/* Space Name */}
        <div>
          <label className="block text-xs text-txt-secondary mb-1.5">
            Space Name
          </label>
          <input
            type="text"
            value={spaceName}
            onChange={(e) => setSpaceName(e.target.value)}
            className="w-full px-3 py-2 bg-surface-input rounded text-txt-primary outline-none focus:ring-2 focus:ring-accent-primary"
            disabled={!canManageSpace}
          />
        </div>
          </div>
        </div>

        {/* Save / Discard */}
        {saveError && (
          <div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
        )}
        {saveSuccess && (
          <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
        )}
        {/* Danger Zone */}
        {isOwner && (
          <div>
            <div className="text-[11px] font-semibold text-txt-danger uppercase tracking-wider mb-1.5">Danger Zone</div>
            <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
              {/* Transfer Ownership */}
              <div>
                <p className="text-xs text-txt-tertiary mb-3">Transfer ownership to another member. You will become a regular member.</p>
                {showTransfer ? (
                  transferTargetId && transferTarget ? (
                    /* Confirm step */
                    <div className="space-y-3">
                      <div className="p-2.5 rounded-lg bg-accent-amber/10 border border-accent-amber/20">
                        <p className="text-sm text-txt-secondary">
                          Transfer ownership to{' '}
                          <span className="font-semibold text-txt-primary">{transferTarget.user.displayName || transferTarget.user.username}</span>?
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => setTransferTargetId(null)}
                          className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
                          disabled={transferring}
                        >
                          Back
                        </button>
                        <button
                          onClick={handleTransfer}
                          disabled={transferring}
                          className="px-3 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
                        >
                          {transferring ? 'Transferring...' : 'Transfer'}
                        </button>
                      </div>
                    </div>
                  ) : (
                    /* Member picker */
                    <div className="space-y-2">
                      <input
                        type="text"
                        value={transferSearch}
                        onChange={(e) => setTransferSearch(e.target.value)}
                        placeholder="Search members..."
                        className="w-full px-3 py-1.5 bg-surface-input rounded text-sm text-txt-primary placeholder-txt-tertiary outline-none focus:ring-1 focus:ring-accent-primary/50"
                        autoFocus
                      />
                      <div className="max-h-[160px] overflow-y-auto space-y-0.5">
                        {transferCandidates.length === 0 ? (
                          <p className="text-xs text-txt-tertiary text-center py-3">No members found</p>
                        ) : (
                          transferCandidates.map((member) => {
                            const avatarUrl = member.user.avatar
                              ? (member.user.avatar.startsWith('http') ? member.user.avatar : `/api/uploads/${member.user.avatar}`)
                              : null;
                            return (
                              <button
                                key={member.userId}
                                onClick={() => setTransferTargetId(member.userId)}
                                className="w-full flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-white/[0.06] transition-colors"
                              >
                                <div className="w-7 h-7 rounded-full bg-surface-input flex-shrink-0 overflow-hidden flex items-center justify-center">
                                  {avatarUrl ? (
                                    <img src={avatarUrl} alt="" className="w-full h-full object-cover" />
                                  ) : (
                                    <span className="text-[10px] font-bold text-txt-secondary">
                                      {(member.user.displayName || member.user.username).charAt(0).toUpperCase()}
                                    </span>
                                  )}
                                </div>
                                <div className="flex flex-col items-start min-w-0">
                                  <span className="text-sm text-txt-primary truncate max-w-full">
                                    {member.user.displayName || member.user.username}
                                  </span>
                                  {member.user.displayName && (
                                    <span className="text-[11px] text-txt-tertiary truncate max-w-full">
                                      {member.user.username}
                                    </span>
                                  )}
                                </div>
                              </button>
                            );
                          })
                        )}
                      </div>
                      <button
                        onClick={() => { setShowTransfer(false); setTransferSearch(''); }}
                        className="text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
                      >
                        Cancel
                      </button>
                    </div>
                  )
                ) : (
                  <button
                    onClick={() => setShowTransfer(true)}
                    className="px-4 py-2 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors"
                  >
                    Transfer Ownership
                  </button>
                )}
              </div>

              {/* Divider */}
              <div className="border-t border-white/[0.05]" />

              {/* Delete Space */}
              <div>
                <p className="text-xs text-txt-tertiary mb-3">Permanently delete this space and all its data. This cannot be undone.</p>
                <button
                  onClick={handleDelete}
                  className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
                >
                  {confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
                </button>
              </div>
            </div>
          </div>
        )}

        {canManageSpace && hasChanges && (
          <div className="sticky bottom-0 z-10 pointer-events-none">
            <div className="flex justify-center pt-3 pb-1">
              <div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-2 animate-slide-up pointer-events-auto">
                <button
                  onClick={handleDiscard}
                  className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
                >
                  Discard
                </button>
                <button
                  onClick={handleSave}
                  disabled={saving || uploadingIcon || uploadingBanner || !spaceName.trim()}
                  className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
                >
                  {saving ? 'Saving...' : 'Save'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>

      <ImageCropModal
        isOpen={cropSrc !== null}
        onClose={() => setCropSrc(null)}
        imageSrc={cropSrc ?? ''}
        onCropComplete={handleCropComplete}
        title="Crop Space Icon"
        cropShape="round"
        aspectRatio={1}
      />

      <ImageCropModal
        isOpen={bannerCropSrc !== null}
        onClose={() => setBannerCropSrc(null)}
        imageSrc={bannerCropSrc ?? ''}
        onCropComplete={handleBannerCropComplete}
        title="Crop Space Banner"
        cropShape="rect"
        aspectRatio={16 / 9}
      />
    </>
  );
}