import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { DetailsTab, useQueryViewStore } from '../store';
import { useShallow } from 'zustand/shallow';
import { useStudioStore, filterRouteInfo, getPayload } from '@/pages/studio/store';
import { QueryView } from '..';
import { useCallback, useMemo, useState } from 'react';
import { pickRouterViewData, RouterViewData, RouterViewItem } from '@kevisual/api/proxy';
import { RouteInfo, fromJSONSchema } from '@kevisual/router/browser';
import { pick } from 'es-toolkit';
import { toast } from 'sonner';
import { Play } from 'lucide-react';
// 视图信息表格组件
export const ViewInfoTable = ({ currentView }: { currentView?: RouterViewData }) => {

  if (!currentView || !currentView.views || currentView.views.length === 0) {
    return (
      <div className="text-sm text-gray-500 text-center py-8">
        当前视图没有子视图信息
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* 当前选中的视图 ID */}
      {currentView.viewId && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">当前视图 ID</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {currentView.viewId}
          </div>
        </div>
      )}

      {/* Link */}
      {currentView.link && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">链接</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md break-all">
            {currentView.link}
          </div>
        </div>
      )}

      {/* Summary */}
      {currentView.summary && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">摘要</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {currentView.summary}
          </div>
        </div>
      )}

      {/* Tags */}
      {currentView.tags && currentView.tags.length > 0 && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">标签</label>
          <div className="flex flex-wrap gap-2">
            {currentView.tags.map((tag: string, index: number) => (
              <span
                key={index}
                className="px-2 py-1 text-xs bg-gray-900 text-white rounded-md"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Title */}
      {currentView.title && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {currentView.title}
          </div>
        </div>
      )}

      {/* Description */}
      {currentView.description && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
            {currentView.description}
          </div>
        </div>
      )}

      {/* 子视图列表表格 */}
      <div>
        <label className="text-sm font-semibold text-gray-700 block mb-2">视图列表</label>
        <div className="border border-gray-300 rounded-md overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-100 border-b border-gray-300">
              <tr>
                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">ID</th>
                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">标题</th>
                <th className="px-4 py-2 text-left text-xs font-semibold text-gray-700">查询</th>
              </tr>
            </thead>
            <tbody>
              {currentView.views.map((view: any, index: number) => {
                const isSelected = view.id === currentView.viewId;
                return (
                  <tr
                    key={view.id || index}
                    className={`border-b border-gray-200 transition-colors ${isSelected
                      ? 'bg-gray-500 hover:bg-gray-900'
                      : index % 2 === 0
                        ? 'bg-white hover:bg-gray-50'
                        : 'bg-gray-50 hover:bg-gray-100'
                      }`}
                  >
                    <td className={`px-4 py-2 text-sm ${isSelected ? 'text-white font-semibold' : 'text-gray-900'}`}>
                      <div className="flex items-center gap-2">
                        {view.id || '-'}
                        {isSelected && (
                          <span className="px-2 py-0.5 text-xs bg-white text-gray-900 rounded-full font-medium">
                            当前
                          </span>
                        )}
                      </div>
                    </td>
                    <td className={`px-4 py-2 text-sm ${isSelected ? 'text-white' : 'text-gray-900'}`}>{view.title || '-'}</td>
                    <td className={`px-4 py-2 text-sm font-mono ${isSelected ? 'text-gray-200' : 'text-gray-600'}`}>
                      {view.query || '-'}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export const DetailsInfoPanel = ({ detailsData }: { detailsData: RouterViewItem | null }) => {
  const queryViewStore = useQueryViewStore(useShallow((state) => ({
    editing: state.editing,
    setEditing: state.setEditing,
    setDetailsData: state.setDetailsData,
    setDetailsActiveTab: state.setDetailsActiveTab
  })));
  const studioStore = useStudioStore(useShallow((state) => ({
    queryProxy: state.queryProxy,
  })));
  if (!detailsData) {
    return (
      <div className="text-sm text-gray-500 text-center py-8">
        无法获取详情信息
      </div>
    );
  }
  const [action, setAction] = useState(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
  const otherFilds = useMemo(() => {
    const { type } = detailsData;
    if (type === 'api') {
      {/* 其他字段 */ }
      return <>{
        detailsData.api && (
          <div className="border-b border-gray-200 pb-3 w-full scrollbar">
            <label className="text-sm font-semibold text-gray-700 block mb-1">API</label>
            <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
              <pre className="text-xs w-full">
                {JSON.stringify(detailsData.api, null, 2)}
              </pre>
            </div>
          </div>
        )
      }
      </>
    }
    if (type === 'context') {
      return <>{
        detailsData.context && (
          <div className="border-b border-gray-200 pb-3 w-full scrollbar">
            <label className="text-sm font-semibold text-gray-700 block mb-1">上下文</label>
            <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
              <pre className="text-xs w-full">
                {JSON.stringify(detailsData.context, null, 2)}
              </pre>
            </div>
          </div>
        )
      }
      </>
    }
    if (type === 'page') {
      return <>{
        detailsData.page && (
          <div className="border-b border-gray-200 pb-3 w-full scrollbar">
            <label className="text-sm font-semibold text-gray-700 block mb-1">页面信息</label>
            <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
              <pre className="text-xs w-full">
                {JSON.stringify(detailsData.page, null, 2)}
              </pre>
            </div>
          </div>
        )
      }
      </>
    }
    return null;
  }, [detailsData]);
  const onRun = useCallback(async () => {
    let _action = detailsData?.action;
    const isEditing = queryViewStore.editing;
    if (isEditing) {
      try {
        _action = JSON.parse(action as string);
      } catch (error) {
        toast.error('操作信息必须是合法的 JSON 格式');
        return;
      }

    }
    if (!_action) {
      toast.error('没有操作信息可供执行');
      return;
    }
    if (!studioStore.queryProxy) {
      toast.error('没有可用的查询代理，无法执行操作');
      return;
    }
    const payload = getPayload(_action as any);
    const res = await studioStore.queryProxy.run({
      ..._action,
      // @ts-ignore
      payload,
    })
    console.log('执行结果', res);
    if (res?.code === 200) {
      queryViewStore.setDetailsData({
        ...detailsData,
        action: _action,
        response: res,
      });
      toast.success('操作执行成功', {
        action: {
          label: '查看数据',
          onClick: () => queryViewStore.setDetailsActiveTab('response'),
        },
        closeButton: true,
        duration: 2000,
        position: 'top-center',
      });
    } else {
      toast.error(`操作执行失败: ${res?.message || '未知错误'}`);
    }
  }, [queryViewStore.editing, studioStore.queryProxy, action]);
  const runCom = (
    <button
      className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
      onClick={() => {
        console.log('点击执行', detailsData.action);
        onRun();
      }}
    >
      <Play className="w-3 h-3" />
      执行
    </button>
  )
  const editCom = (<>
    {queryViewStore.editing && <button
      className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors align-middle cursor-pointer"
      onClick={() => {
        if (queryViewStore.editing) {
          // 保存操作
          try {
            const parsedAction = JSON.parse(action);
            detailsData.action = parsedAction;
            queryViewStore.setEditing(false);
            queryViewStore.setDetailsData({ ...detailsData });
            toast.success('操作信息已更新');
          } catch (error) {
            toast.error('操作信息必须是合法的 JSON 格式');
            return;
          }
        }
      }}>保存</button>}
    <button
      className="inline-flex items-center gap-1 ml-2 px-2 py-0.5 text-xs rounded-md border border-gray-300 hover:bg-gray-50 transition-colors align-middle cursor-pointer"
      onClick={() => {
        if (queryViewStore.editing) {
          setAction(detailsData.action ? JSON.stringify(detailsData.action, null, 2) : '');
        }
        queryViewStore.setEditing(!queryViewStore.editing);
      }}
    >
      {queryViewStore.editing ? '取消' : '编辑'}
    </button>
  </>)
  return (
    <div className="space-y-4">
      {/* Type */}
      {detailsData.type && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">类型</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {detailsData.type}
          </div>
        </div>
      )}

      {/* Title */}
      {detailsData.title && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">标题</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {detailsData.title}
          </div>
        </div>
      )}

      {/* Description */}
      {detailsData.description && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
            {detailsData.description}
          </div>
        </div>
      )}

      {/* Action */}
      {!queryViewStore.editing && detailsData.action && (
        <div className="border-b border-gray-200 pb-3">
          <div className="text-sm font-semibold text-gray-700 block mb-1 py-2 cursor-pointer">操作 {runCom} {editCom}</div>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            <pre className="text-xs overflow-auto cursor-pointer" onClick={() => queryViewStore.setEditing(true)}>
              {JSON.stringify(detailsData.action, null, 2)}
            </pre>
          </div>
        </div>
      )}
      {queryViewStore.editing && (
        <div className="border-b border-gray-200 pb-3">
          <div className="text-sm font-semibold text-gray-700 block mb-1 py-2">操作 {runCom} {editCom} </div>
          <textarea
            className="text-sm text-gray-900 bg-gray-100 px-3 py-2 rounded-md w-full h-32 font-mono border-gray-600 focus:ring-2 focus:ring-gray-500 focus:outline-none scrollbar"
            value={action}
            onChange={(e) => {
              setAction(e.target.value);
            }}
          />
        </div>
      )}
      {otherFilds}

    </div>
  );
};

export const RouterInfoPanel = ({ routeInfo }: { routeInfo: RouteInfo | null }) => {
  if (!routeInfo) {
    return (
      <div className="text-sm text-gray-500 text-center py-8">
        无法获取路由信息
      </div>
    );
  }
  const _routeInfo = pick(routeInfo, ['id', 'path', 'key', 'description', 'metadata']);
  const metadata = useMemo(() => {
    if (!_routeInfo.metadata) return null;
    const _metadata = _routeInfo.metadata;
    if (_metadata.viewItem) {
      _metadata.viewItem = filterRouteInfo(_metadata.viewItem);
    }
    return _metadata;
  }, [_routeInfo.metadata]);
  return (
    <div className="space-y-4">
      {/* ID */}
      {_routeInfo.id && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">ID{_routeInfo?.id.startsWith("rand") ? ' (当前id会随机变化)' : ''}</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {_routeInfo.id}
          </div>
        </div>
      )}

      {/* Path */}
      {_routeInfo.path && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">路径</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {_routeInfo.path}
          </div>
        </div>
      )}

      {/* Key */}
      {_routeInfo.key && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">Key</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            {_routeInfo.key}
          </div>
        </div>
      )}

      {/* Description */}
      {_routeInfo.description && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">描述</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md whitespace-pre-wrap">
            {_routeInfo.description}
          </div>
        </div>
      )}

      {/* Metadata */}
      {metadata && (
        <div className="border-b border-gray-200 pb-3">
          <label className="text-sm font-semibold text-gray-700 block mb-1">Metadata</label>
          <div className="text-sm text-gray-900 bg-gray-50 px-3 py-2 rounded-md">
            <pre className="text-xs overflow-auto">
              {JSON.stringify(metadata, null, 2)}
            </pre>
          </div>
        </div>
      )}
    </div>);
}

export const DetailsDialog = () => {
  const queryViewStore = useQueryViewStore(
    useShallow((state) => ({
      showDetailsDialog: state.showDetailsDialog,
      setShowDetailsDialog: state.setShowDetailsDialog,
      detailsData: state.detailsData,
      detailsActiveTab: state.detailsActiveTab,
      setDetailsActiveTab: state.setDetailsActiveTab,
      allDetailsTabs: state.allDetailsTabs,
      setAllDetailsTabs: state.setAllDetailsTabs,
      editing: state.editing,
      setEditing: state.setEditing,
    }))
  );

  const { currentView, queryProxy } = useStudioStore(useShallow((state) => ({
    currentView: state.currentView,
    queryProxy: state.queryProxy,
  })));
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [forceViewDialogOpen, setForceViewDialogOpen] = useState(false)
  const routeInfo = useMemo(() => {
    const action = queryViewStore?.detailsData?.action;
    if (!action) return null;
    if (!queryProxy) return null;
    const router = queryProxy!.router?.findRoute?.(action)
    if (!router) return null;
    return router as RouteInfo;
  }, [queryProxy, queryViewStore.detailsData]);
  console.log('metadata', queryViewStore.detailsData?._id, queryViewStore.detailsData);
  const onChangeTab = useCallback((key) => {
    if (key !== 'response') {
      queryViewStore.setDetailsActiveTab(key);
      return;
    }
    let needCheck = true;
    const action = queryViewStore?.detailsData?.action;
    if (!action) {
      needCheck = false
      toast.error('没有操作信息，无法查看响应数据');
      return
    }

    const args = routeInfo?.metadata?.args || [];
    const keys = Object.keys(args);
    if (keys.length === 0) {
      needCheck = false;
    }
    if (!needCheck) {
      queryViewStore.setDetailsActiveTab(key);
      return;
    }
    console.log('args', args);

    const payload = getPayload(action as any);
    payload.data = {}
    const schema = fromJSONSchema<true>(args, { mergeObject: true });
    console.log('payload', payload);
    console.log('schema', schema);
    const validateResult = schema.safeParse(payload);
    console.log('validateResult', validateResult);
    if (!validateResult.success) {
      // 参数不合法，无法查看响应数据，需要提示用户强制查看还是取消，如果用户选择强制查看，则直接切换到响应标签页，如果用户选择取消，则保持在当前标签页
      setForceViewDialogOpen(true);
    } else {
      queryViewStore.setDetailsActiveTab(key);
    }

  }, [routeInfo])
  if (!queryViewStore.detailsData) return null;
  return (
    <>
      <Dialog open={forceViewDialogOpen} onOpenChange={setForceViewDialogOpen}>
        <DialogContent className="max-w-sm!">
          <DialogHeader>
            <DialogTitle>参数不合法</DialogTitle>
          </DialogHeader>
          <div className="text-sm text-gray-600 py-2">
            当前参数不合法，可能导致请求失败。是否仍要强制查看响应数据？
          </div>
          <div className="flex justify-end gap-2 mt-2">
            <button
              className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
              onClick={() => {
                setForceViewDialogOpen(false);
                queryViewStore.setEditing(true);
                queryViewStore.setDetailsActiveTab('details');
              }}
            >
              去编辑
            </button>
            <button
              className="px-4 py-2 text-sm rounded-md border border-gray-300 hover:bg-gray-50 transition-colors"
              onClick={() => setForceViewDialogOpen(false)}
            >
              取消
            </button>
            <button
              className="px-4 py-2 text-sm rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors"
              onClick={() => {
                setForceViewDialogOpen(false);
                queryViewStore.setDetailsActiveTab('response');
              }}
            >
              强制查看
            </button>
          </div>
        </DialogContent>
      </Dialog>
      <Dialog open={queryViewStore.showDetailsDialog} onOpenChange={queryViewStore.setShowDetailsDialog}>
        <DialogContent className={`flex flex-col max-h-[85vh] ${isFullscreen ? 'w-screen! h-screen! max-w-screen! max-h-screen! ' : 'max-w-4xl! '}`}>
          <DialogHeader className="flex-shrink-0">
            <DialogTitle>详情信息</DialogTitle>
          </DialogHeader>

          <div className="flex gap-2 border-b border-gray-200 flex-shrink-0">
            {queryViewStore.allDetailsTabs.map((tab) => (
              <button
                key={tab.key}
                onClick={() => onChangeTab(tab.key as DetailsTab)}
                className={`px-4 py-2 text-sm font-medium transition-colors relative ${queryViewStore.detailsActiveTab === tab.key
                  ? 'text-gray-900 border-b-2 border-gray-900'
                  : 'text-gray-500 hover:text-gray-700'
                  }`}
              >
                {tab.label}
              </button>
            ))}
          </div>

          <div className="flex-1 overflow-auto scrollbar px-2 min-h-0">
            {/* 第一个标签页：详情信息 */}
            {queryViewStore.detailsActiveTab === 'details' && (
              <DetailsInfoPanel detailsData={queryViewStore.detailsData} />
            )}

            {/* 第二个标签页：当前视图 */}
            {queryViewStore.detailsActiveTab === 'view' && (
              <ViewInfoTable currentView={currentView} />
            )}

            {/* 第三个标签页：路由信息 */}
            {queryViewStore.detailsActiveTab === 'router' && (
              <RouterInfoPanel routeInfo={routeInfo} />
            )}

            {/* 第四个标签页：响应 */}
            {queryViewStore.detailsActiveTab === 'response' && (
              <div className="space-y-4 h-full">
                <QueryView viewData={queryViewStore.detailsData} type={'message'} setIsFullscreen={setIsFullscreen} />
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog >
    </>
  );
};