import { MetaFunction, json, type LoaderFunctionArgs } from "@remix-run/node";
import { useSearchParams, useNavigate, useLoaderData } from "@remix-run/react";
import { useState } from "react";
import indexStyles from "~/styles/pages/prompts_index.css?url";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
import { Table } from "~/components/ui/Table";
import { Pagination } from "~/components/ui/Pagination";
import { getPromptTemplates, deletePromptTemplate, type PromptTemplateUI } from "~/api/prompts/prompts";

// 定义提示词模板类型
export interface PromptTemplate {
  id: string;
  template_name: string;
  template_type: 'Common' | 'Extraction' | 'Evaluation' | 'Summary';
  description: string;
  version: string;
  status: 'active' | 'inactive' | 'system';
  created_by: string;
  template_content: string;
  variables: string; // JSON字符串
}

// 样式链接
export function links() {
  return [{ rel: "stylesheet", href: indexStyles }];
}

// 页面元数据
export const meta: MetaFunction = () => {
  return [
    { title: "提示词模板管理 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "管理提示词模板，包括创建、编辑和删除提示词模板" },
  ];
};

// 定义加载器返回数据类型
interface LoaderData {
  templates: PromptTemplateUI[];
  total: number;
  pageSize: number;
  currentPage: number;
  error?: string;
}

// 数据加载器
export async function loader({ request }: LoaderFunctionArgs) {
  try {
    const url = new URL(request.url);
    const name = url.searchParams.get('name') || undefined;
    const type = url.searchParams.get('type') || undefined;
    const status = url.searchParams.get('status') || undefined;
    const page = parseInt(url.searchParams.get('page') || '1', 10);
    const pageSize = parseInt(url.searchParams.get('pageSize') || '10', 10);
    
    console.log('加载提示词模板参数:', { name, type, status, page, pageSize });
    
    // 从 API 获取数据
    const result = await getPromptTemplates({
      name,
      type,
      status,
      page,
      pageSize
    });
    
    if (result.error) {
      console.error('获取提示词模板失败:', result.error);
      return Response.json(
        { 
          templates: [],
          total: 0,
          pageSize,
          currentPage: page,
          error: result.error
        },
        { status: result.status || 500 }
      );
    }
    
    console.log(`成功加载${result.data?.templates.length || 0}条提示词模板数据`);
    
    return Response.json({ 
      templates: result.data?.templates || [],
      total: result.data?.total || 0,
      pageSize,
      currentPage: page
    });
  } catch (error) {
    console.error("加载提示词模板失败:", error);
    return Response.json(
      { 
        templates: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        error: "加载提示词模板失败" 
      },
      { status: 500 }
    );
  }
}

// 页面组件
export default function PromptsIndex() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const { templates, total, currentPage, pageSize, error } = useLoaderData<typeof loader>();
  const [isLoading, setIsLoading] = useState(false);
  
  // 处理搜索名称
  const handleNameSearch = (value: string) => {
    const newParams = new URLSearchParams(searchParams);
    if (value) {
      newParams.set('name', value);
    } else {
      newParams.delete('name');
    }
    newParams.set('page', '1');
    setSearchParams(newParams);
  };

  // 处理类型筛选变更
  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const { value } = e.target;
    const newParams = new URLSearchParams(searchParams);
    if (value) {
      newParams.set('type', value);
    } else {
      newParams.delete('type');
    }
    newParams.set('page', '1');
    setSearchParams(newParams);
  };

  // 处理状态筛选变更
  const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const { value } = e.target;
    const newParams = new URLSearchParams(searchParams);
    if (value) {
      newParams.set('status', value);
    } else {
      newParams.delete('status');
    }
    newParams.set('page', '1');
    setSearchParams(newParams);
  };

  // 处理重置筛选
  const handleReset = () => {
    setSearchParams(new URLSearchParams());
  };
  
  // 处理搜索按钮点击
  // const handleSearch = () => {
  //   // 搜索已经由 URL 参数变化触发，这里不需要额外操作
  //   console.log('搜索参数:', Object.fromEntries(searchParams.entries()));
  // };
  
  // 查看模板详情
  const handleViewTemplate = (id: string) => {
    navigate(`/prompts/new?id=${id}&mode=view`);
  };
  
  // 复制模板
  const handleCloneTemplate = (id: string) => {
    if (confirm('确定要复制该模板创建新模板吗？')) {
      navigate(`/prompts/new?id=${id}&mode=clone`);
    }
  };
  
  // 编辑模板
  const handleEditTemplate = (id: string) => {
    navigate(`/prompts/new?id=${id}&mode=edit`);
  };
  
  // 删除模板
  const handleDeleteTemplate = async (id: string) => {
    if (confirm('确定要删除该模板吗？删除后无法恢复。')) {
      setIsLoading(true);
      try {
        const result = await deletePromptTemplate(id);
        if (result.error) {
          alert(`删除失败: ${result.error}`);
        } else {
          alert('删除成功！');
          // 刷新页面
          window.location.reload();
        }
      } catch (error) {
        alert(`删除失败: ${error instanceof Error ? error.message : '未知错误'}`);
      } finally {
        setIsLoading(false);
      }
    }
  };

  // 处理分页
  const handlePageChange = (page: number) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('page', page.toString());
    setSearchParams(newParams);
  };

  // 处理每页条数变更
  const handlePageSizeChange = (size: number) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('pageSize', size.toString());
    newParams.set('page', '1'); // 更改每页条数时，重置到第一页
    setSearchParams(newParams);
  };

  // 定义表格列配置
  const columns = [
    {
      title: "模板名称",
      key: "template_name",
      width: "300px",
      render: (_: unknown, record: PromptTemplateUI) => (
        <div className="flex items-center">
          <i className="ri-file-list-line text-primary mr-2"></i>
          <span className="truncate">{record.template_name}</span>
        </div>
      )
    },
    {
      title: "类型",
      key: "template_type",
      width: "120px",
      render: (_: unknown, record: PromptTemplateUI) => {
        let typeText = '';
        let typeClass = '';
        
        switch (record.template_type) {
          case 'LLM_Extraction':
            typeText = '抽取';
            typeClass = 'type-extraction';
            break;
          case 'VLM_Extraction':
            typeText = '抽取';
            typeClass = 'type-extraction';
            break;
          case 'Evaluation':
            typeText = '评估';
            typeClass = 'type-evaluation';
            break;
          case 'Summary':
            typeText = '摘要';
            typeClass = 'type-summary';
            break;
          case 'Common':
            typeText = '通用';
            typeClass = 'type-common';
            break;
        }
        
        return <span className={`type-badge ${typeClass}`}>{typeText}</span>;
      }
    },
    {
      title: "描述",
      key: "description",
      render: (_: unknown, record: PromptTemplateUI) => (
        <div className="text-secondary text-sm max-w-xs text-wrap" title={record.description}>
          {record.description}
        </div>
      )
    },
    {
      title: "版本",
      key: "version",
      width: "80px",
      render: (_: unknown, record: PromptTemplateUI) => record.version
    },
    {
      title: "状态",
      key: "status",
      width: "100px",
      render: (_: unknown, record: PromptTemplateUI) => {
        let statusText = '';
        let statusClass = '';
        
        switch (record.status) {
          case 'active':
            statusText = '启用';
            statusClass = 'status-active';
            break;
          case 'inactive':
            statusText = '停用';
            statusClass = 'status-inactive';
            break;
          case 'system':
            statusText = '系统预设';
            statusClass = 'status-system';
            break;
        }
        
        return <span className={`status-badge ${statusClass}`}>{statusText}</span>;
      }
    },
    {
      title: "创建者",
      key: "created_by",
      width: "100px",
      render: (_: unknown, record: PromptTemplateUI) => (
        <span className="text-secondary">用户 {record.created_by}</span>
      )
    },
    {
      title: "操作",
      key: "operation",
      width: "150px",
      render: (_: unknown, record: PromptTemplateUI) => (
        <div>
          {record.status === 'system' ? (
            <>
              <button
                className="operation-btn text-primary"
                onClick={() => handleViewTemplate(record.id)}
              >
                <i className="ri-eye-line"></i> 查看
              </button>
              <button
                className="operation-btn text-primary"
                onClick={() => handleCloneTemplate(record.id)}
              >
                <i className="ri-file-copy-line"></i> 复制
              </button>
            </>
          ) : (
            <>
              <button
                className="operation-btn text-primary"
                onClick={() => handleEditTemplate(record.id)}
              >
                <i className="ri-edit-line"></i> 编辑
              </button>
              <button
                className="operation-btn text-error"
                onClick={() => handleDeleteTemplate(record.id)}
                disabled={isLoading}
              >
                <i className="ri-delete-bin-line"></i> 删除
              </button>
            </>
          )}
        </div>
      )
    }
  ];

  return (
    <div className="prompt-page">
      {/* 页面头部 */}
      <div className="page-header">
        <h2 className="page-title">提示词模板管理</h2>
        <div>
          <Button
            type="primary"
            icon="ri-add-line"
            onClick={() => navigate("/prompts/new")}
          >
            新增提示词模板
          </Button>
        </div>
      </div>
      
      {/* 搜索栏 - 使用FilterPanel */}
      <FilterPanel 
        className="mb-4" 
        actions={
          <>
            <Button 
              type="default" 
              icon="ri-refresh-line" 
              onClick={handleReset} 
              className="mr-2"
            >
              重置
            </Button>
            {/* <Button 
              type="primary" 
              icon="ri-search-line"
              onClick={handleSearch}
            >
              搜索
            </Button> */}
          </>
        }
        noActionDivider={true}
      >
        <SearchFilter
          label="模板名称"
          placeholder="请输入模板名称"
          value={searchParams.get('name') || ''}
          onSearch={handleNameSearch}
          className="flex-1 min-w-[200px]"
          instantSearch={true}
        />
        
        <FilterSelect
          label="模板类型"
          name="type"
          value={searchParams.get('type') || ''}
          options={[
            { value: "LLM_Extraction", label: "LLM抽取(LLM_Extraction)" },
            { value: "VLM_Extraction", label: "VLM抽取(VLM_Extraction)" },
            { value: "Evaluation", label: "评估(Evaluation)" },
            { value: "Summary", label: "摘要(Summary)" },
            { value: "Common", label: "通用(Common)" }
          ]}
          onChange={handleTypeChange}
          className="flex-1 min-w-[200px]"
        />
        
        <FilterSelect
          label="状态"
          name="status"
          value={searchParams.get('status') || ''}
          options={[
            { value: "active", label: "启用" },
            { value: "inactive", label: "停用" },
            { value: "system", label: "系统预设" }
          ]}
          onChange={handleStatusChange}
          className="flex-1 min-w-[200px]"
        />
      </FilterPanel>
      
      {/* 错误信息 */}
      {error && (
        <div className="error-alert mb-4 p-4 bg-red-50 text-red-700 rounded-md">
          <i className="ri-error-warning-line mr-2"></i> {error}
        </div>
      )}
      
      {/* 数据表格 */}
      <Card bodyClassName="px-4 py-4">
        <Table
          columns={columns}
          dataSource={templates}
          rowKey="id"
          emptyText="暂无提示词模板数据"
          loading={isLoading}
        />
        
        {/* 分页 */}
        <Pagination
            currentPage={currentPage}
            total={total}
            pageSize={pageSize}
            onChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            showTotal={true}
            showPageSizeChanger={true}
            pageSizeOptions={[10, 20, 30, 50]}
          />
      </Card>
    </div>
  );
} 