import { useState } from 'react';
import {
  Table,
  Switch,
  Button,
  Space,
  Typography,
  Form,
  Input,
} from 'antd';
import { EditOutlined } from '@ant-design/icons';
import {
  listLanguages,
  updateLanguage,
  type LanguageInfo,
} from '../../api/languages';
import { useListData } from '../../hooks/useListData';
import { DrawerForm } from '../../components/DrawerForm';
import { useApiRequest } from '../../hooks/useApiRequest';

export default function LanguageManager() {
  const { data: languages, loading, refresh } = useListData<LanguageInfo>(listLanguages);
  const { execute } = useApiRequest();

  // LanguageInfo 没有 version/id 字段，手动管理 drawer 状态
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editingLang, setEditingLang] = useState<LanguageInfo | null>(null);

  const handleToggle = async (record: LanguageInfo, checked: boolean) => {
    await execute(() => updateLanguage(record.code, { is_active: checked, name: record.name }), checked ? '已启用' : '已禁用');
    refresh();
  };

  const openEdit = (lang: LanguageInfo) => {
    setEditingLang(lang);
    setDrawerOpen(true);
  };

  const handleEditSubmit = async (values: Record<string, unknown>) => {
    if (!editingLang) return;
    await execute(
      () => updateLanguage(editingLang.code, { is_active: editingLang.is_active, name: values.name as string }),
      '语言更新成功',
    );
    setDrawerOpen(false);
    setEditingLang(null);
    refresh();
  };

  const columns = [
    { title: '语言代码', dataIndex: 'code', key: 'code', width: 160 },
    { title: '语言名称', dataIndex: 'name', key: 'name', width: 200 },
    {
      title: '状态', dataIndex: 'is_active', key: 'is_active', width: 120,
      render: (is_active: boolean, record: LanguageInfo) => (
        <Switch checked={is_active} onChange={(checked) => handleToggle(record, checked)} />
      ),
    },
    {
      title: '操作', key: 'actions',
      render: (_: unknown, record: LanguageInfo) => (
        <Space>
          <Button size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>编辑</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Typography.Title level={5} style={{ marginBottom: 16 }}>语言管理</Typography.Title>

      <Table
        columns={columns}
        dataSource={languages}
        rowKey="code"
        loading={loading}
        pagination={false}
      />

      <DrawerForm
        title={`编辑语言 - ${editingLang?.code ?? ''}`}
        open={drawerOpen}
        onClose={() => { setDrawerOpen(false); setEditingLang(null); }}
        onSubmit={handleEditSubmit}
        initialValues={editingLang ? { name: editingLang.name } : undefined}
        loading={false}
        width={480}
        columns={1}
      >
        <Form.Item label="语言代码">
          <Input value={editingLang?.code} disabled />
        </Form.Item>
        <Form.Item label="语言名称" name="name" rules={[{ required: true, message: '请输入语言名称' }]}>
          <Input placeholder="例如：简体中文" maxLength={100} />
        </Form.Item>
      </DrawerForm>
    </div>
  );
}
