import { Button, Popover, Typography } from 'antd';
import { CodeOutlined, DownloadOutlined } from '@ant-design/icons';
import { useQuery } from '@tanstack/react-query';
import { api } from '../api/client';

export function LinuxDownload() {
  const q = useQuery({
    queryKey: ['linux-release-public'],
    queryFn: async () => {
      const res = await api.get('/system/app-release');
      return ((res as { data?: { linuxDebUrl?: string; linuxUrl?: string; version?: string } }).data ?? res) as {
        linuxDebUrl?: string;
        linuxUrl?: string;
        version?: string;
      };
    },
    staleTime: 60_000,
  });
  const debUrl = q.data?.linuxDebUrl || '';
  const tarUrl = q.data?.linuxUrl || '';
  const version = q.data?.version || '';
  const content = debUrl || tarUrl ? (
    <div className="client-dl-card">
      <Typography.Text type="secondary">Linux 桌面端{version ? ` v${version}` : ''}</Typography.Text>
      {debUrl ? (
        <Button type="primary" icon={<DownloadOutlined />} href={debUrl} download className="client-dl-btn">
          下载 deb 安装包
        </Button>
      ) : null}
      {tarUrl ? (
        <Button type={debUrl ? 'default' : 'primary'} icon={<DownloadOutlined />} href={tarUrl} download className="client-dl-btn">
          下载 tar.gz
        </Button>
      ) : null}
      <Typography.Text type="secondary" className="client-dl-hint">
        {debUrl
          ? 'deb 适用于 Ubuntu / Debian / Deepin 25：sudo dpkg -i fengying-oa_amd64.deb'
          : '解压 tar.gz 后运行 fengying_oa'}
      </Typography.Text>
    </div>
  ) : (
    <div className="client-dl-card">
      <Typography.Text type="secondary">Linux 桌面版暂未发布</Typography.Text>
    </div>
  );
  return (
    <Popover placement="bottomRight" trigger={['hover', 'click']} content={content} overlayClassName="mobile-dl-pop">
      <Button type="text" icon={<CodeOutlined />}>
        Linux端
      </Button>
    </Popover>
  );
}