import { useStore } from '@nanostores/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
import classNames from 'classnames';
import { type Change, diffLines } from 'diff';
import { memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import { Button } from '~/.client/components/ui/Button';
import { ConfirmationDialog, Dialog, DialogDescription, DialogRoot, DialogTitle } from '~/.client/components/ui/Dialog';
import { webBuilderStore } from '~/.client/stores/web-builder';
import type { PageMap } from '~/types/pages';
import { createScopedLogger, renderLogger } from '~/utils/logger';

const logger = createScopedLogger('PageTree');

interface PageNode {
  id: string;
  name: string;
  title: string;
}

interface Props {
  pages?: PageMap;
  selectedPage?: string;
  onPageSelect?: (pageName: string) => void;
  unsavedPages?: Set<string>;
  className?: string;
}

export const PageTree = memo(({ pages = {}, onPageSelect, selectedPage, className, unsavedPages }: Props) => {
  renderLogger.trace('PageTree');

  const pageList = useMemo(() => {
    return buildPageList(pages);
  }, [pages]);

  return (
    <div
      className={classNames(
        'text-sm rounded-md border border-upage-elements-borderColor',
        className,
        'overflow-y-auto modern-scrollbar',
      )}
    >
      <div className="p-2 border-b border-upage-elements-borderColor bg-upage-elements-background-depth-1">
        <h3 className="font-medium text-upage-elements-textPrimary">页面列表</h3>
      </div>
      <div className="p-1">
        {pageList.map((page) => (
          <Page
            key={page.id}
            selected={selectedPage === page.name}
            page={page}
            unsavedChanges={unsavedPages instanceof Set && unsavedPages.has(page.name)}
            onClick={() => {
              onPageSelect?.(page.name);
            }}
          />
        ))}
      </div>
    </div>
  );
});

export default PageTree;

function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; children: ReactNode }) {
  return (
    <ContextMenu.Item
      onSelect={onSelect}
      className="flex items-center w-full px-3 py-2 outline-0 text-sm cursor-pointer rounded-md transition-colors duration-200 hover:bg-upage-elements-item-backgroundActive hover:text-upage-elements-item-contentActive"
    >
      {children}
    </ContextMenu.Item>
  );
}

function PageContextMenu({ pageName, children }: { pageName: string; children: ReactNode }) {
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

  const handleDrop = useCallback(async (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

  const handleCreatePage = async (pageName: string, pageTitle: string) => {
    setIsLoading(true);
    try {
      const success = await webBuilderStore.createPage(pageName, pageTitle);

      if (success) {
        toast.success('页面创建成功');
      } else {
        toast.error('页面创建失败');
      }
    } catch (error) {
      toast.error('页面创建失败');
      logger.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleDelete = async () => {
    setIsLoading(true);
    try {
      const success = await webBuilderStore.deletePage(pageName);

      if (success) {
        toast.success(`页面删除成功`);
        setIsDeleteDialogOpen(false);
      } else {
        toast.error(`页面删除失败`);
      }
    } catch (error) {
      toast.error(`页面删除失败`);
      logger.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <ContextMenu.Root>
        <ContextMenu.Trigger>
          <div
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            className={classNames('relative', {
              'bg-upage-elements-background-depth-2 border border-dashed border-upage-elements-item-contentAccent rounded-md':
                isDragging,
            })}
          >
            {children}
          </div>
        </ContextMenu.Trigger>
        <ContextMenu.Portal>
          <ContextMenu.Content
            style={{ zIndex: 998 }}
            className="min-w-56 p-1 border border-upage-elements-borderColor rounded-md z-context-menu bg-upage-elements-background-depth-1 dark:bg-upage-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 shadow-lg"
          >
            <ContextMenu.Group className="mb-1">
              <ContextMenuItem onSelect={() => setIsCreateDialogOpen(true)}>
                <div className="flex items-center gap-2 text-upage-elements-textPrimary">
                  <div className="i-ph:file-plus text-green-500" />
                  新建页面
                </div>
              </ContextMenuItem>
            </ContextMenu.Group>

            <ContextMenu.Separator className="h-px bg-upage-elements-borderColor my-1" />

            <ContextMenu.Group className="mt-1">
              <ContextMenuItem onSelect={() => setIsDeleteDialogOpen(true)}>
                <div className="flex items-center gap-2 text-red-500">
                  <div className="i-ph:trash" />
                  删除页面
                </div>
              </ContextMenuItem>
            </ContextMenu.Group>
          </ContextMenu.Content>
        </ContextMenu.Portal>
      </ContextMenu.Root>

      <CreatePageDialog
        isOpen={isCreateDialogOpen}
        onClose={() => setIsCreateDialogOpen(false)}
        onConfirm={handleCreatePage}
      />

      <ConfirmationDialog
        isOpen={isDeleteDialogOpen}
        onClose={() => setIsDeleteDialogOpen(false)}
        onConfirm={handleDelete}
        title="删除页面"
        description={`确定要删除页面 "${pageName}" 吗？此操作不可撤销。`}
        confirmLabel="删除"
        cancelLabel="取消"
        variant="destructive"
        isLoading={isLoading}
      />
    </>
  );
}

interface PageProps {
  page: PageNode;
  selected: boolean;
  unsavedChanges?: boolean;
  onClick: () => void;
}

function formatSaveTime(timestamp: number): string {
  const saveDate = new Date(timestamp);
  return `${saveDate.getHours().toString().padStart(2, '0')}:${saveDate.getMinutes().toString().padStart(2, '0')}`;
}

function Page({ page, onClick, selected, unsavedChanges = false }: PageProps) {
  const pageHistory = useStore(webBuilderStore.pagesStore.pageHistory);
  const { name, title } = page;
  const pageModifications = pageHistory[name];
  const lastSavedTimes = useStore(webBuilderStore.editorStore.documentLastSaved);
  const lastSavedTime = lastSavedTimes[name];

  const { additions, deletions } = useMemo(() => {
    if (!pageModifications?.originalContent) {
      return { additions: 0, deletions: 0 };
    }

    const normalizedOriginal = pageModifications.originalContent.replace(/\r\n/g, '\n');
    const normalizedCurrent =
      pageModifications.versions[pageModifications.versions.length - 1]?.content.replace(/\r\n/g, '\n') || '';

    if (normalizedOriginal === normalizedCurrent) {
      return { additions: 0, deletions: 0 };
    }

    const changes = diffLines(normalizedOriginal, normalizedCurrent, {
      newlineIsToken: false,
      ignoreWhitespace: true,
    });

    return changes.reduce(
      (acc: { additions: number; deletions: number }, change: Change) => {
        if (change.added) {
          acc.additions += change.value.split('\n').length;
        }

        if (change.removed) {
          acc.deletions += change.value.split('\n').length;
        }

        return acc;
      },
      { additions: 0, deletions: 0 },
    );
  }, [pageModifications]);

  const showStats = additions > 0 || deletions > 0;

  return (
    <PageContextMenu pageName={name}>
      <div
        className={classNames('rounded-md transition-colors duration-200 my-1 overflow-hidden', {
          'bg-upage-elements-background-depth-1 hover:bg-upage-elements-item-backgroundActive': !selected,
          'bg-upage-elements-item-backgroundAccent': selected,
        })}
      >
        <NodeButton
          className={classNames('group', {
            'text-upage-elements-item-contentDefault dark:bg-gray-800': !selected,
            'text-upage-elements-item-contentAccent dark:bg-gray-800': selected,
          })}
          iconClasses={classNames('i-ph:file-duotone scale-98', {
            'group-hover:text-upage-elements-item-contentActive': !selected,
          })}
          onClick={onClick}
        >
          <div className="flex flex-col w-full">
            <div
              className={classNames('flex items-center', {
                'group-hover:text-upage-elements-item-contentActive': !selected,
              })}
            >
              <div className="flex-1 font-medium truncate pr-2">{title || name}</div>
              <div className="flex items-center gap-1">
                {showStats && (
                  <div className="flex items-center gap-1 text-xs">
                    {additions > 0 && <span className="text-green-500">+{additions}</span>}
                    {deletions > 0 && <span className="text-red-500">-{deletions}</span>}
                  </div>
                )}
                {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
              </div>
            </div>

            <div className="flex justify-between items-center text-xs text-upage-elements-textTertiary mt-0.5">
              <span className="truncate opacity-80">{name}</span>
              {lastSavedTime && !unsavedChanges && (
                <span className="flex items-center text-xs whitespace-nowrap">
                  <span className="i-ph:clock-clockwise size-4 mr-1 scale-90 inline-block" />
                  {formatSaveTime(lastSavedTime)}
                </span>
              )}
            </div>
          </div>
        </NodeButton>
      </div>
    </PageContextMenu>
  );
}

interface ButtonProps {
  iconClasses: string;
  children: ReactNode;
  className?: string;
  onClick?: () => void;
}

function NodeButton({ iconClasses, onClick, className, children }: ButtonProps) {
  return (
    <button
      className={classNames('flex items-start gap-1.5 w-full px-3 py-2 border-2 border-transparent', className)}
      onClick={() => onClick?.()}
    >
      <div className={classNames('scale-120 shrink-0 mt-0.5', iconClasses)}></div>
      <div className="w-full text-left">{children}</div>
    </button>
  );
}

function buildPageList(pages: PageMap): PageNode[] {
  const nodeList: PageNode[] = [];
  const pageList = Object.values(pages);
  for (const page of pageList) {
    if (!page) {
      continue;
    }
    nodeList.push({
      id: page.name,
      name: page.name,
      title: page.title ?? '未命名页面',
    });
  }
  return nodeList.sort((a, b) => compareNodes(a, b));
}

function compareNodes(a: PageNode, b: PageNode): number {
  return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
}

interface CreatePageDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (pageName: string, pageTitle: string) => void;
}

function CreatePageDialog({ isOpen, onClose, onConfirm }: CreatePageDialogProps) {
  const [pageName, setPageName] = useState('');
  const [pageTitle, setPageTitle] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen) {
      setPageName('');
      setPageTitle('');
      setError(null);
    }
  }, [isOpen]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!pageName.trim()) {
      setError('页面名称不能为空');
      return;
    }

    if (!/^[a-zA-Z0-9_-]+$/.test(pageName)) {
      setError('页面名称只能包含字母、数字、连字符和下划线');
      return;
    }

    setIsLoading(true);

    try {
      await onConfirm(pageName.trim(), pageTitle.trim() || '未命名页面');
      onClose();
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <DialogRoot open={isOpen} onOpenChange={onClose}>
      <Dialog showCloseButton={true} onClose={onClose}>
        <div className="p-6 bg-white dark:bg-gray-950 relative z-10">
          <DialogTitle>新建页面</DialogTitle>
          <DialogDescription className="mb-4">请输入页面文件名和标题</DialogDescription>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="pageName" className="block text-sm font-medium text-upage-elements-textPrimary">
                页面文件名 <span className="text-red-500">*</span>
              </label>
              <input
                id="pageName"
                type="text"
                value={pageName}
                onChange={(e) => setPageName(e.target.value)}
                className="w-full px-3 py-2 border border-upage-elements-borderColor rounded-md bg-upage-elements-background-depth-1 text-upage-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-upage-elements-item-contentAccent"
                placeholder="例如：about"
                autoFocus
              />
              <p className="text-xs text-upage-elements-textTertiary">只能包含字母、数字、连字符和下划线</p>
            </div>

            <div className="space-y-2">
              <label htmlFor="pageTitle" className="block text-sm font-medium text-upage-elements-textPrimary">
                页面标题
              </label>
              <input
                id="pageTitle"
                type="text"
                value={pageTitle}
                onChange={(e) => setPageTitle(e.target.value)}
                className="w-full px-3 py-2 border border-upage-elements-borderColor rounded-md bg-upage-elements-background-depth-1 text-upage-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-upage-elements-item-contentAccent"
                placeholder="例如：关于我们"
              />
              <p className="text-xs text-upage-elements-textTertiary">如果不填写，将使用默认标题"未命名页面"</p>
            </div>

            {error && <div className="text-sm text-red-500 font-medium">{error}</div>}

            <div className="flex justify-end space-x-2 pt-2">
              <Button variant="outline" onClick={onClose} type="button" disabled={isLoading}>
                取消
              </Button>
              <Button type="submit" disabled={isLoading || !pageName.trim()}>
                {isLoading ? (
                  <>
                    <div className="i-ph-spinner-gap-bold animate-spin size-4 mr-2" />
                    创建中...
                  </>
                ) : (
                  '创建页面'
                )}
              </Button>
            </div>
          </form>
        </div>
      </Dialog>
    </DialogRoot>
  );
}