import { useEffect, useState } from "react";
import { useStudioStore } from '../studio/store.ts';
import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2, MousePointer2, Book } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ViewEditor } from "@/pages/view/components/ViewEditor.tsx";
import { toast } from "sonner";
import { useShallow } from "zustand/shallow";
import { DocsModal } from './components/DocsModal.tsx'
const ViewItem = ({ view, onEdit, onDelete, onDeleteViewItem }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void; onDeleteViewItem: (id: string, viewId: string) => void }) => {
  const [expanded, setExpanded] = useState(false);
  const studioStore = useStudioStore(useShallow((state) => ({
    currentView: state.currentView,
    searchRoutes: state.searchRoutes
  })));
  useEffect(() => {
    const currentViewId = studioStore.currentView?.viewId;
    if (view.views.some((v: any) => v.id === currentViewId)) {
      setExpanded(true);
    }
  }, [studioStore.currentView?.viewId]);
  const ShowViews = (props: { views: { id: string, title: string, query?: any }[] }) => {
    const studioStore = useStudioStore(useShallow((state) => ({
      currentView: state.currentView,
      setCurrentView: state.setCurrentView,
    })));
    const currentViewId = studioStore.currentView?.viewId;
    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
    const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
    const isActiveView = (viewId: string) => {
      return viewId === currentViewId;
    }
    return <div className="mt-2 ml-4 w-full border-l-2 border-l-gray-300 border-gray-300 pl-3 space-y-1">
      {props.views.map(v => (
        <div
          key={v.id}
          className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors flex items-center justify-between group ${isActiveView(v.id) ? 'text-black bg-gray-100' : 'text-gray-600 hover:text-black hover:bg-gray-100'}`}
          onClick={(e) => {
            studioStore.setCurrentView({ ...view, viewId: v.id })
          }}
        >
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger>
                <span>{v.title || '未命名视图'}</span>
              </TooltipTrigger>
              <TooltipContent side="right" className="max-w-xs">
                <div className="text-xs">
                  {v.query ? v.query : '无查询字段'}
                </div>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
          <Popover open={deleteConfirmOpen && deleteTargetId === v.id} onOpenChange={(open) => {
            if (!open) {
              setDeleteConfirmOpen(false);
              setDeleteTargetId(null);
            }
          }}>
            <PopoverTrigger>
              <Trash2
                className="h-4 w-4 text-gray-400 hover:text-gray-600 transition-colors cursor-pointer opacity-0 group-hover:opacity-100"
                onClick={(e) => {
                  e.stopPropagation();
                  setDeleteTargetId(v.id);
                  setDeleteConfirmOpen(true);
                }}
              />
            </PopoverTrigger>
            <PopoverContent side="bottom" align="end" sideOffset={8} className="w-80 border-gray-300">
              <div className="space-y-4">
                <div>
                  <h4 className="font-semibold text-sm">删除视图</h4>
                  <p className="text-xs text-gray-600 mt-1">确定要删除这个视图吗？此操作无法撤销。</p>
                </div>
                <div className="flex justify-end gap-2">
                  <Button className="border-gray-300" variant="outline" size="sm" onClick={() => setDeleteConfirmOpen(false)}>
                    取消
                  </Button>
                  <Button
                    variant="destructive"
                    size="sm"
                    onClick={() => {
                      if (deleteTargetId) {
                        onDeleteViewItem(view.id, deleteTargetId);
                        setDeleteConfirmOpen(false);
                        setDeleteTargetId(null);
                      }
                    }}
                  >
                    删除
                  </Button>
                </div>
              </div>
            </PopoverContent>
          </Popover>
        </div>
      ))}
    </div>
  }
  return <div
    key={view.id}
    className="flex flex-col items-center py-3 px-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
  >
    <div className="w-full flex justify-between" onClick={() => setExpanded(!expanded)}>
      <div className="flex items-center cursor-pointer"  >
        <Layout className="h-4 w-4 mr-2 text-gray-500" />
        {view.title || '未命名视图'}
      </div>

      <DropdownMenu>
        <DropdownMenuTrigger
          className="inline-flex items-center justify-center h-8 w-8 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
          onClick={(e) => e.stopPropagation()}
        >
          <MoreHorizontal className="h-4 w-4" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="border-gray-300">
          <DropdownMenuItem className="cursor-pointer" onClick={(e) => {
            e.stopPropagation();
            studioStore.searchRoutes('')
          }}>
            <MousePointer2 className="h-4 w-4 mr-2" />
            选中
          </DropdownMenuItem>
          <DropdownMenuItem className="cursor-pointer" onClick={(e) => {
            e.stopPropagation();
            onEdit(view);
          }}>
            <Edit2 className="h-4 w-4 mr-2" />
            编辑
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={(e) => {
              e.stopPropagation();
              onDelete(view.id);
            }}
            className="cursor-pointer text-red-600 focus:text-red-600"
          >
            <Trash2 className="h-4 w-4 mr-2" />
            删除
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>

    {expanded &&
      <ShowViews views={view.views} />
    }
  </div>
}
export const ViewList = () => {
  const store = useStudioStore(useShallow((state) => ({
    routeViewList: state.routeViewList,
    updateRouteView: state.updateRouteView,
    deleteRouteView: state.deleteRouteView,
    deleteRouteViewItem: state.deleteRouteViewItem,
    getViewList: state.getViewList,
    setShowApiDocs: state.setShowApiDocs,
  })));
  const [searchTerm, setSearchTerm] = useState("");
  const [editorOpen, setEditorOpen] = useState(false);
  const [editingView, setEditingView] = useState<any>(null);

  const filteredViews = store.routeViewList.filter(view =>
    (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
    (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
  );
  useEffect(() => {
    store.getViewList();
  }, [])

  const handleRefresh = async () => {
    const toastId = toast.loading('正在刷新视图列表...');
    await store.getViewList();
    // toast.update(toastId, { render: '视图列表已刷新', type: 'success', id: false, autoClose: 1000 });
    toast.success('视图列表已刷新', { duration: 1000 });
    toast.dismiss(toastId);
  };

  const handleAdd = () => {
    handleEdit({});
  };

  const handleEdit = (view: any) => {
    setEditingView(view);
    setEditorOpen(true);
  };

  const handleDelete = (id: string) => {
    if (confirm('确定要删除这个视图吗？')) {
      store.deleteRouteView(id);
    }
  };

  const handleSaveView = (viewData: any) => {
    store.updateRouteView(viewData);
  };

  return (
    <div className="w-full h-full max-w-4xl  py-4  border border-gray-200 rounded-md shadow-sm overflow-hidden">
      <div className="flex items-center px-4 space-x-2 mb-4">
        <Button onClick={() => store.setShowApiDocs(true)} title='文档' variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300">
          <Book size={16} />
        </Button>
        <div className="relative flex-1">
          <Input
            placeholder="搜索视图..."
            className="pl-3 pr-8"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
        </div>
        <Button variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300" onClick={handleRefresh}>
          <RotateCw className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="icon" className="h-8 w-8 cursor-pointer border-gray-300" onClick={handleAdd}>
          <Plus className="h-4 w-4" />
        </Button>
      </div>

      <div className="flex flex-col px-4 overscroll-auto scrollbar" style={{ height: 'calc(100% - 32px)' }}>
        {filteredViews.length === 0 ? (
          <div className="text-center py-4 text-gray-500">
            {searchTerm ? '未找到匹配的视图' : '暂无视图'}
          </div>
        ) : (
          filteredViews.map((view) => (
            <ViewItem
              key={view.id}
              view={view}
              onEdit={handleEdit}
              onDelete={handleDelete}
              onDeleteViewItem={store.deleteRouteViewItem}
            />
          ))
        )}
      </div>

      <ViewEditor
        open={editorOpen}
        onOpenChange={setEditorOpen}
        data={editingView}
        onSave={handleSaveView}
      />
      <DocsModal />
    </div>
  );
}