import { json, type MetaFunction } from "@remix-run/node";
import { useLoaderData, Link, useNavigate } from "@remix-run/react";
import { useState } from "react";
import indexStyles from "~/styles/pages/rule-groups_index.css?url";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { SearchBox } from "~/components/ui/SearchBox";
import { StatusDot } from "~/components/ui/StatusDot";

// 定义数据类型
interface RuleGroup {
  id: string;
  name: string;
  code: string;
  ruleCount: number;
  subGroupCount: number;
  status: 'active' | 'inactive';
  createdAt: string;
  children?: RuleGroup[];
}

export const handle = {
  breadcrumb: "评查点分组"
};

export const meta: MetaFunction = () => {
  return [
    { title: "评查点分组 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "管理评查点分组，包括创建、编辑和删除分组" },
  ];
};

export function links() {
  return [{ rel: "stylesheet", href: indexStyles }];
}

// 模拟数据
const MOCK_GROUPS: RuleGroup[] = [
  {
    id: "1",
    name: "合同基本要素检查",
    code: "contract-base",
    ruleCount: 18,
    subGroupCount: 12,
    status: "active",
    createdAt: "2023-10-01 14:30",
    children: [
      {
        id: "2",
        name: "必备要素检查",
        code: "essential-elements",
        ruleCount: 7,
        subGroupCount: 0,
        status: "active",
        createdAt: "2023-10-02 10:15",
      },
      {
        id: "3",
        name: "合同主体检查",
        code: "contract-parties",
        ruleCount: 5,
        subGroupCount: 0,
        status: "active",
        createdAt: "2023-10-03 16:20",
      }
    ]
  },
  {
    id: "4",
    name: "销售合同专项检查",
    code: "contract-sales",
    ruleCount: 12,
    subGroupCount: 5,
    status: "active",
    createdAt: "2023-10-05 09:30",
    children: [
      {
        id: "6",
        name: "付款条件检查",
        code: "payment-terms",
        ruleCount: 5,
        subGroupCount: 0,
        status: "active",
        createdAt: "2023-10-05 14:45",
      }
    ]
  },
  {
    id: "5",
    name: "行政处罚规范性检查",
    code: "punishment",
    ruleCount: 8,
    subGroupCount: 0,
    status: "inactive",
    createdAt: "2023-10-08 11:45",
  }
];

export async function loader() {
  return json({ groups: MOCK_GROUPS });
}

export default function RuleGroupsIndex() {
  const { groups } = useLoaderData<typeof loader>();
  const navigate = useNavigate();
  const [searchText, setSearchText] = useState("");
  const [groupCode, setGroupCode] = useState("");
  const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
  
  // 处理展开/收起
  const toggleGroup = (groupId: string) => {
    setExpandedGroups(prev => 
      prev.includes(groupId) 
        ? prev.filter(id => id !== groupId)
        : [...prev, groupId]
    );
  };
  
  // 展开/收起全部
  const toggleAll = (expand: boolean) => {
    setExpandedGroups(expand ? groups.map(g => g.id) : []);
  };
  
  // 处理删除分组
  const handleDeleteGroup = (groupId: string) => {
    if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
      console.log('删除分组ID:', groupId);
      // 实际应用中，这里会调用API删除数据
    }
  };

  // 处理搜索名称
  const handleNameSearch = (value: string) => {
    setSearchText(value);
    // 实际项目中这里可能需要调用API或过滤本地数据
  };

  // 处理搜索编码
  const handleCodeSearch = (value: string) => {
    setGroupCode(value);
    // 实际项目中这里可能需要调用API或过滤本地数据
  };

  // 处理表格数据，包括父子级关系
  const processedData = groups.flatMap(group => {
    // 先添加父级分组
    const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
      { ...group, isParent: true }
    ];
    
    // 如果有子级分组并且当前已展开，则添加子级分组
    if (group.children && expandedGroups.includes(group.id)) {
      group.children.forEach(child => {
        result.push({ ...child, parentId: group.id });
      });
    }
    
    return result;
  });

  return (
    <div className="content-container rule-groups-page">
      {/* 页面头部 */}
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-medium">评查点分组管理</h2>
        <div className="flex">
          <Button
            type="default"
            icon="ri-arrow-down-s-line"
            onClick={() => toggleAll(true)}
            className="mr-2"
          >
            展开全部
          </Button>
          <Button
            type="default"
            icon="ri-arrow-up-s-line"
            onClick={() => toggleAll(false)}
            className="mr-2"
          >
            收起全部
          </Button>
          <Button
            type="primary"
            icon="ri-add-line"
            onClick={() => navigate("/rule-groups/new")}
          >
            新增分组
          </Button>
        </div>
      </div>
      
      {/* 搜索栏 */}
      <Card className="mb-4" bodyClassName="px-4 py-4">
        <div className="flex flex-wrap items-end gap-4">
          <div className="flex-1 min-w-[200px]">
            <label htmlFor="groupName" className="form-label">分组名称</label>
            <SearchBox
              placeholder="请输入分组名称"
              defaultValue={searchText}
              onSearch={handleNameSearch}
              name="groupName"
              buttonText=""
              className="form-input-only"
            />
          </div>
          <div className="flex-1 min-w-[200px]">
            <label htmlFor="groupCode" className="form-label">分组编码</label>
            <SearchBox
              placeholder="请输入分组编码"
              defaultValue={groupCode}
              onSearch={handleCodeSearch}
              name="groupCode"
              buttonText=""
              className="form-input-only"
            />
          </div>
          <div className="flex-1 min-w-[200px]">
            <label htmlFor="status" className="form-label">状态</label>
            <select id="status" className="form-select">
              <option value="">全部</option>
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
          <div className="flex items-center">
            <Button type="default" icon="ri-refresh-line" className="mr-2">
              重置
            </Button>
            <Button type="primary" icon="ri-search-line">
              搜索
            </Button>
          </div>
        </div>
      </Card>
      
      {/* 数据表格 */}
      <Card bodyClassName="px-4 py-4">
        <div className="overflow-x-auto">
          <table className="ant-table tree-table w-full">
            <thead>
              <tr>
                <th style={{ width: "400px" }}>分组名称</th>
                <th>分组编码</th>
                <th>评查点数量</th>
                <th>状态</th>
                <th>创建时间</th>
                <th style={{ width: "180px" }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {processedData.map((item) => (
                <tr key={item.id} className={`group-row ${item.isParent ? 'parent-row' : 'child-row child-of-' + item.parentId}`}>
                  <td>
                    <div className={`flex items-center ${!item.isParent ? 'ml-8' : ''}`}>
                      {item.isParent && (
                        <span 
                          className="expand-icon" 
                          onClick={() => toggleGroup(item.id)}
                          role="button"
                          tabIndex={0}
                          onKeyDown={(e) => {
                            if (e.key === 'Enter' || e.key === ' ') {
                              e.preventDefault();
                              toggleGroup(item.id);
                            }
                          }}
                        >
                          <i className={`ri-arrow-${expandedGroups.includes(item.id) ? 'down' : 'right'}-s-line`}></i>
                        </span>
                      )}
                      <Link 
                        to={`/rule-groups/${item.id}/rules`}
                        className="group-name-link flex items-center ml-1"
                      >
                        <i className={`${item.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1`}></i> {item.name}
                      </Link>
                      <span className={`group-badge ${item.isParent ? 'parent-badge' : 'child-badge'}`}>
                        {item.isParent ? '一级分组' : '二级分组'}
                      </span>
                    </div>
                  </td>
                  <td>{item.code}</td>
                  <td>
                    <Link to={`/rule-groups/${item.id}/rules`} className="badge bg-primary text-white">
                      {item.ruleCount}
                    </Link>
                    {item.subGroupCount > 0 && (
                      <span className="text-secondary text-sm ml-1">
                        | 子分组: {item.subGroupCount}
                      </span>
                    )}
                  </td>
                  <td>
                    <StatusDot status={item.status === 'active' ? 'success' : 'error'} text={item.status === 'active' ? '启用' : '禁用'} />
                  </td>
                  <td>{item.createdAt}</td>
                  <td>
                    <button 
                      className="ant-btn ant-btn-text ant-btn-sm text-primary"
                      onClick={() => navigate(`/rule-groups/${item.id}`)}
                    >
                      <i className="ri-edit-line"></i> 编辑
                    </button>
                    <button 
                      className="ant-btn ant-btn-text ant-btn-sm text-error"
                      onClick={() => handleDeleteGroup(item.id)}
                    >
                      <i className="ri-delete-bin-line"></i> 删除
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* 分页 */}
        <div className="flex justify-between items-center mt-4">
          <div className="text-sm text-secondary">
            共 {groups.length} 条记录，每页显示 10 条
          </div>
          <div className="ant-pagination">
            <button className="ant-pagination-item ant-pagination-prev" disabled>
              <i className="ri-arrow-left-s-line"></i>
            </button>
            <button className="ant-pagination-item ant-pagination-item-active">1</button>
            <button className="ant-pagination-item ant-pagination-next" disabled>
              <i className="ri-arrow-right-s-line"></i>
            </button>
          </div>
        </div>
      </Card>
    </div>
  );
}