import { FormEvent, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Archive, Clock3, FolderKanban, FolderOpen, Plus, RotateCcw, Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  CollaborationProject,
  getStageName,
  isProjectInactive,
  useCollaborationProjectsStore,
} from '@/stores/collaboration-projects';
import { cn } from '@/lib/utils';
import { invokeIpc } from '@/lib/api-client';

type OpenDialogResult = {
  canceled: boolean;
  filePaths: string[];
};

function formatRelativeTime(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  const diff = Date.now() - date.getTime();
  const hours = Math.max(1, Math.floor(diff / (60 * 60 * 1000)));
  if (hours < 24) return `${hours} 小时前`;
  return `${Math.floor(hours / 24)} 天前`;
}

function ProjectCard({
  project,
  archived = false,
  onOpen,
  onArchive,
  onRestore,
}: {
  project: CollaborationProject;
  archived?: boolean;
  onOpen: () => void;
  onArchive: () => void;
  onRestore: () => void;
}) {
  return (
    <div className="surface-card motion-press rounded-2xl border border-border/70 bg-card p-4 shadow-none hover:border-brand/25 hover:shadow-soft">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex min-w-0 items-center gap-2">
            <h2 className="truncate text-base font-semibold tracking-normal">{project.name}</h2>
            {archived ? (
              <Badge variant="secondary">归档</Badge>
            ) : null}
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
            <span className="inline-flex items-center gap-1">
              <Clock3 className="h-3.5 w-3.5" />
              {formatRelativeTime(project.lastActiveAt)}
            </span>
            <span>{getStageName(project.currentStage)}</span>
            {project.workspacePath ? (
              <span className="inline-flex min-w-0 items-center gap-1">
                <FolderOpen className="h-3.5 w-3.5" />
                <span className="max-w-[260px] truncate">{project.workspacePath}</span>
              </span>
            ) : null}
          </div>
        </div>
        <Button size="sm" onClick={onOpen}>
          进入项目
        </Button>
      </div>

      <div className="mt-4 rounded-md bg-surface-input px-3 py-2 text-sm text-foreground/80">
        {project.lastResult}
      </div>

      <div className="mt-4 flex items-center justify-between gap-3">
        <div className="text-xs text-muted-foreground">
          交付物 {project.deliverables.length} 个 · 文件 {project.files.length} 个
        </div>
        {archived ? (
          <Button variant="ghost" size="sm" onClick={onRestore}>
            <RotateCcw className="mr-2 h-4 w-4" />
            恢复
          </Button>
        ) : (
          <Button variant="ghost" size="sm" onClick={onArchive}>
            <Archive className="mr-2 h-4 w-4" />
            归档
          </Button>
        )}
      </div>
    </div>
  );
}

export function Home() {
  const navigate = useNavigate();
  const projects = useCollaborationProjectsStore((state) => state.projects);
  const initialized = useCollaborationProjectsStore((state) => state.initialized);
  const init = useCollaborationProjectsStore((state) => state.init);
  const createProject = useCollaborationProjectsStore((state) => state.createProject);
  const archiveProject = useCollaborationProjectsStore((state) => state.archiveProject);
  const restoreProject = useCollaborationProjectsStore((state) => state.restoreProject);
  const touchProject = useCollaborationProjectsStore((state) => state.touchProject);
  const [name, setName] = useState('');
  const [workspacePath, setWorkspacePath] = useState('');
  const [nameError, setNameError] = useState('');
  const [createOpen, setCreateOpen] = useState(false);
  const [showInactive, setShowInactive] = useState(false);
  const nameInputRef = useRef<HTMLInputElement>(null);
  const folderInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    init();
  }, [init]);

  const resetCreateForm = () => {
    setName('');
    setWorkspacePath('');
    setNameError('');
  };

  const openCreateDialog = () => {
    resetCreateForm();
    setCreateOpen(true);
    window.setTimeout(() => nameInputRef.current?.focus(), 50);
  };

  const cancelCreateDialog = () => {
    resetCreateForm();
    setCreateOpen(false);
  };

  useEffect(() => {
    const handleOpenCreateProject = () => openCreateDialog();

    window.addEventListener('niancode:create-project', handleOpenCreateProject);
    return () => window.removeEventListener('niancode:create-project', handleOpenCreateProject);
  }, []);

  const visibleGroups = useMemo(() => {
    const active = projects.filter((project) => !project.archivedAt && !isProjectInactive(project));
    const inactive = projects.filter((project) => !project.archivedAt && isProjectInactive(project));
    const archived = projects.filter((project) => Boolean(project.archivedAt));
    return { active, inactive, archived };
  }, [projects]);

  const openProject = (project: CollaborationProject) => {
    touchProject(project.id);
    navigate(`/workbench/${project.id}`);
  };

  const submit = (event: FormEvent) => {
    event.preventDefault();
    const trimmed = name.trim();
    if (!trimmed) {
      setNameError('请输入项目名称');
      nameInputRef.current?.focus();
      return;
    }
    const project = createProject(trimmed, workspacePath);
    resetCreateForm();
    setCreateOpen(false);
    navigate(`/workbench/${project.id}`);
  };

  const chooseProjectFolder = async () => {
    const electronApi = (window as Partial<Window>).electron;

    if (electronApi?.ipcRenderer?.invoke) {
      const result = await invokeIpc<OpenDialogResult>('dialog:open', {
        properties: ['openDirectory'],
        title: '选择项目储存地址',
      });

      if (!result.canceled && result.filePaths[0]) {
        setWorkspacePath(result.filePaths[0]);
      }
      return;
    }

    folderInputRef.current?.click();
  };

  if (!initialized) {
    return (
      <main className="flex h-full items-center justify-center text-sm text-muted-foreground">
        正在读取本地项目
      </main>
    );
  }

  return (
    <main className="flex h-full min-h-0 -m-6 flex-col bg-background">
      <div className="glass-surface shrink-0 border-b border-border/70 bg-background/80 px-6 py-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
              <FolderKanban className="h-4 w-4" />
              AI 项目协作平台
            </div>
            <h1 className="mt-2 text-2xl font-semibold tracking-normal">项目导航</h1>
          </div>

          <Button
            className="w-full shrink-0 lg:w-auto"
            onClick={openCreateDialog}
          >
            <Plus className="mr-2 h-4 w-4" />
            新建项目
          </Button>
        </div>
      </div>

      <Tabs defaultValue="running" className="flex min-h-0 flex-1 flex-col">
        <div className="shrink-0 px-6 pt-5">
          <TabsList>
            <TabsTrigger value="running">进行中项目</TabsTrigger>
            <TabsTrigger value="archived">归档项目</TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="running" className="min-h-0 flex-1 overflow-auto px-6 pb-6">
          {visibleGroups.active.length === 0 && visibleGroups.inactive.length === 0 ? (
            <div className="surface-card mt-6 flex min-h-[280px] items-center justify-center rounded-2xl border border-dashed border-border bg-card/40">
              <div className="max-w-sm text-center">
                <FolderKanban className="mx-auto h-10 w-10 text-muted-foreground" />
                <p className="mt-3 text-sm font-medium">还没有项目</p>
                <p className="mt-1 text-sm text-muted-foreground">创建一个项目后，会直接进入阶段一：项目背景。</p>
                <Button
                  className="mt-4"
                  size="sm"
                  onClick={openCreateDialog}
                >
                  <Plus className="mr-2 h-4 w-4" />
                  新建项目
                </Button>
              </div>
            </div>
          ) : (
            <div className="mt-5 grid gap-3 xl:grid-cols-2">
              {visibleGroups.active.map((project) => (
                <ProjectCard
                  key={project.id}
                  project={project}
                  onOpen={() => openProject(project)}
                  onArchive={() => archiveProject(project.id)}
                  onRestore={() => restoreProject(project.id)}
                />
              ))}
            </div>
          )}

          {visibleGroups.inactive.length > 0 ? (
            <div className={cn('mt-5', visibleGroups.active.length === 0 && 'mt-0')}>
              <Button variant="outline" size="sm" onClick={() => setShowInactive(!showInactive)}>
                {showInactive ? '收起不活跃项目' : `展开不活跃项目 (${visibleGroups.inactive.length})`}
              </Button>
              {showInactive ? (
                <div className="mt-3 grid gap-3 xl:grid-cols-2">
                  {visibleGroups.inactive.map((project) => (
                    <ProjectCard
                      key={project.id}
                      project={project}
                      onOpen={() => openProject(project)}
                      onArchive={() => archiveProject(project.id)}
                      onRestore={() => restoreProject(project.id)}
                    />
                  ))}
                </div>
              ) : null}
            </div>
          ) : null}
        </TabsContent>

        <TabsContent value="archived" className="min-h-0 flex-1 overflow-auto px-6 pb-6">
          {visibleGroups.archived.length === 0 ? (
            <div className="mt-6 flex min-h-[240px] items-center justify-center rounded-lg border border-dashed bg-card/40 text-sm text-muted-foreground">
              暂无归档项目
            </div>
          ) : (
            <div className="mt-5 grid gap-3 xl:grid-cols-2">
              {visibleGroups.archived.map((project) => (
                <ProjectCard
                  key={project.id}
                  project={project}
                  archived
                  onOpen={() => openProject(project)}
                  onArchive={() => archiveProject(project.id)}
                  onRestore={() => restoreProject(project.id)}
                />
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>

      <Dialog
        open={createOpen}
        onOpenChange={(open) => {
          if (open) {
            openCreateDialog();
          } else {
            cancelCreateDialog();
          }
        }}
      >
        <DialogContent className="flex max-h-[calc(100vh-2rem)] w-[min(460px,92vw)] max-w-none flex-col overflow-hidden p-0 sm:max-w-lg">
          <DialogHeader className="border-b px-6 py-5">
            <DialogTitle className="flex items-center gap-2">
              <span className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
                <Sparkles className="h-4 w-4" />
              </span>
              新建项目
            </DialogTitle>
            <DialogDescription>
              只需要先填写项目名称，其他信息会在阶段一继续补充。
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={submit} className="flex min-h-0 flex-1 flex-col">
            <div className="min-h-0 flex-1 space-y-4 overflow-auto px-6 py-5">
              <div>
                <Label htmlFor="collaboration-project-name">项目名称</Label>
                <Input
                  ref={nameInputRef}
                  id="collaboration-project-name"
                  value={name}
                  onChange={(event) => {
                    setName(event.target.value);
                    if (nameError) setNameError('');
                  }}
                  placeholder="例如：AI 项目协作平台 MVP"
                  className="mt-2"
                />
                {nameError ? (
                  <p className="mt-2 text-sm text-destructive">{nameError}</p>
                ) : null}
              </div>
              <div>
                <Label htmlFor="collaboration-project-path">项目储存地址</Label>
                <div
                  id="collaboration-project-path"
                  className="mt-2 flex min-h-10 items-center gap-2 rounded-md border bg-surface-input px-3 py-2"
                >
                  <span className={cn(
                    'min-w-0 flex-1 truncate text-sm',
                    workspacePath ? 'text-foreground' : 'text-muted-foreground',
                  )}>
                    {workspacePath || '选择本地文件夹作为项目储存地址'}
                  </span>
                  <Button type="button" variant="outline" size="sm" onClick={() => void chooseProjectFolder()}>
                    <FolderOpen className="mr-2 h-4 w-4" />
                    {workspacePath ? '修改' : '选择'}
                  </Button>
                </div>
                <input
                  ref={folderInputRef}
                  type="file"
                  multiple
                  className="hidden"
                  {...({ webkitdirectory: '' } as Record<string, string>)}
                  onChange={(event) => {
                    const file = event.target.files?.[0];
                    const relativePath = file && 'webkitRelativePath' in file
                      ? String((file as File & { webkitRelativePath?: string }).webkitRelativePath)
                      : '';
                    const folderName = relativePath.split('/')[0] || file?.name || '';
                    if (folderName) setWorkspacePath(folderName);
                    event.target.value = '';
                  }}
                />
                <p className="mt-2 text-xs text-muted-foreground">
                  浏览器预览会记录文件夹名；桌面版会记录完整路径。
                </p>
              </div>
            </div>
            <div className="mt-auto flex shrink-0 justify-end gap-2 border-t bg-background px-6 py-4">
              <Button type="button" variant="outline" onClick={cancelCreateDialog}>
                取消
              </Button>
              <Button type="submit">
                创建项目
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </main>
  );
}

export default Home;