import React, { useEffect, useMemo, useState } from 'react';
import { Button, Card, Image, Input, Select, Space, Statistic, Table, Tag, Tooltip, Typography, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { CopyOutlined, PlayCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { adminGetPrivatePortraitAssets, adminGetPrivatePortraitProjects } from '../api';
import type { PrivatePortraitAsset, PrivatePortraitProject } from '../types';
import { formatDate } from '../utils/formatDate';
import { apiUrl } from '../utils/resourceUrl';

const { Title, Text } = Typography;

const PAGE_SIZE = 20;

const LIBRARY_OPTIONS = [
  { label: '全部素材库', value: '' },
  { label: '真人认证', value: 'real_person' },
  { label: '虚拟人像', value: 'aigc_virtual' },
];

const ASSET_TYPE_OPTIONS = [
  { label: '全部类型', value: '' },
  { label: '图片', value: 'Image' },
  { label: '视频', value: 'Video' },
];

const PROJECT_STATUS_OPTIONS = [
  { label: '全部项目状态', value: '' },
  { label: '可用', value: 'active' },
  { label: '认证中', value: 'validating' },
  { label: '认证失败', value: 'validate_failed' },
  { label: '创建远端组中', value: 'creating_remote_group' },
  { label: '创建远端组失败', value: 'create_group_failed' },
  { label: '已删除', value: 'deleted' },
];

const ASSET_STATUS_OPTIONS = [
  { label: '全部素材状态', value: '' },
  { label: '创建中', value: 'creating' },
  { label: '处理中', value: 'Processing' },
  { label: '可用', value: 'Active' },
  { label: '失败', value: 'Failed' },
  { label: '本地已删', value: 'local_deleted' },
  { label: '远端已删', value: 'remote_deleted' },
  { label: '删除失败', value: 'delete_failed' },
];

const libraryLabel = (value?: string | null) => {
  if (value === 'real_person') return '真人认证';
  if (value === 'aigc_virtual') return '虚拟人像';
  return value || '-';
};

const libraryColor = (value?: string | null) => {
  if (value === 'real_person') return 'purple';
  if (value === 'aigc_virtual') return 'cyan';
  return 'default';
};

const statusColor = (status?: string) => {
  if (status === 'Active' || status === 'active') return 'green';
  if (status === 'Processing' || status === 'creating_remote_group' || status === 'validating' || status === 'creating') return 'blue';
  if (status === 'Failed' || status === 'failed' || status === 'delete_failed' || status === 'validate_failed' || status === 'create_group_failed') return 'red';
  if (status?.includes('deleted')) return 'default';
  return 'default';
};

const assetTypeLabel = (value?: string | null) => {
  if (value === 'Image') return '图片';
  if (value === 'Video') return '视频';
  return value || '-';
};

const shortId = (value?: string | null, keep = 10) => {
  if (!value) return '-';
  if (value.length <= keep * 2 + 3) return value;
  return `${value.slice(0, keep)}...${value.slice(-keep)}`;
};

const copyText = async (value?: string | null) => {
  if (!value) return;
  await navigator.clipboard?.writeText(value);
  message.success('已复制');
};

const toPreviewUrl = (value?: string | null) => {
  if (!value) return '';
  const trimmed = String(value).trim();
  if (!trimmed || trimmed.startsWith('asset://')) return '';
  return apiUrl(trimmed);
};

const PreviewCell: React.FC<{ asset: PrivatePortraitAsset }> = ({ asset }) => {
  const url = toPreviewUrl(asset.displayUrl || asset.previewUrl || asset.remoteUrl || asset.sourceUrl);
  const cover = toPreviewUrl(asset.videoCoverUrl || asset.previewUrl || asset.displayUrl || asset.sourceUrl);
  if (asset.assetType === 'Video') {
    return (
      <div style={{ width: 72, height: 52, borderRadius: 10, overflow: 'hidden', background: '#f5f3ff', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
        {cover ? <img src={cover} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <PlayCircleOutlined style={{ fontSize: 24, color: '#8b5cf6' }} />}
        {url ? <a href={url} target="_blank" rel="noreferrer" style={{ position: 'absolute', inset: 0 }} /> : null}
        <PlayCircleOutlined style={{ position: 'absolute', color: '#fff', fontSize: 22, filter: 'drop-shadow(0 1px 3px rgba(0,0,0,.45))' }} />
      </div>
    );
  }
  if (url) return <Image width={72} height={52} src={url} style={{ objectFit: 'cover', borderRadius: 10 }} />;
  return <div style={{ width: 72, height: 52, borderRadius: 10, background: '#f5f5f5' }} />;
};

const AdminPrivatePortraitProjects: React.FC = () => {
  const [projects, setProjects] = useState<PrivatePortraitProject[]>([]);
  const [assets, setAssets] = useState<PrivatePortraitAsset[]>([]);
  const [projectTotal, setProjectTotal] = useState(0);
  const [assetTotal, setAssetTotal] = useState(0);
  const [loadingProjects, setLoadingProjects] = useState(false);
  const [loadingAssets, setLoadingAssets] = useState(false);
  const [keyword, setKeyword] = useState('');
  const [libraryType, setLibraryType] = useState('');
  const [assetType, setAssetType] = useState('');
  const [projectStatus, setProjectStatus] = useState('');
  const [assetStatus, setAssetStatus] = useState('');
  const [selectedProjectId, setSelectedProjectId] = useState<string | undefined>();
  const [projectPage, setProjectPage] = useState(1);
  const [assetPage, setAssetPage] = useState(1);

  const filters = useMemo(() => ({
    keyword: keyword.trim() || undefined,
    libraryType: libraryType || undefined,
    assetType: assetType || undefined,
    projectStatus: projectStatus || undefined,
    assetStatus: assetStatus || undefined,
  }), [keyword, libraryType, assetType, projectStatus, assetStatus]);

  const loadProjects = async () => {
    setLoadingProjects(true);
    try {
      const res = await adminGetPrivatePortraitProjects({
        keyword: filters.keyword,
        libraryType: filters.libraryType,
        status: filters.projectStatus,
        page: projectPage,
        pageSize: PAGE_SIZE,
      });
      setProjects(res.items || []);
      setProjectTotal(res.total || 0);
    } catch (err: any) {
      message.error(err?.message || '加载私域人像素材项目失败');
    } finally {
      setLoadingProjects(false);
    }
  };

  const loadAssets = async () => {
    setLoadingAssets(true);
    try {
      const res = await adminGetPrivatePortraitAssets({
        projectId: selectedProjectId,
        keyword: filters.keyword,
        libraryType: filters.libraryType,
        assetType: filters.assetType,
        status: filters.assetStatus,
        page: assetPage,
        pageSize: PAGE_SIZE,
      });
      setAssets(res.items || []);
      setAssetTotal(res.total || 0);
    } catch (err: any) {
      message.error(err?.message || '加载私域人像素材失败');
    } finally {
      setLoadingAssets(false);
    }
  };

  useEffect(() => { loadProjects(); }, [projectPage, filters.libraryType, filters.projectStatus]);
  useEffect(() => { loadAssets(); }, [selectedProjectId, assetPage, filters.libraryType, filters.assetType, filters.assetStatus]);

  const searchAll = () => {
    setProjectPage(1);
    setAssetPage(1);
    setTimeout(() => { loadProjects(); loadAssets(); }, 0);
  };

  const resetFilters = () => {
    setKeyword('');
    setLibraryType('');
    setAssetType('');
    setProjectStatus('');
    setAssetStatus('');
    setSelectedProjectId(undefined);
    setProjectPage(1);
    setAssetPage(1);
  };

  const projectSummary = useMemo(() => {
    return projects.reduce((acc, item) => {
      acc.asset += item.assetCount || 0;
      acc.image += item.imageAssetCount || 0;
      acc.video += item.videoAssetCount || 0;
      acc.active += item.activeAssetCount || 0;
      return acc;
    }, { asset: 0, image: 0, video: 0, active: 0 });
  }, [projects]);

  const projectColumns: ColumnsType<PrivatePortraitProject> = [
    { title: '项目名称', dataIndex: 'name', width: 200, fixed: 'left', render: (v, r) => <Button type="link" onClick={() => { setSelectedProjectId(r.id); setAssetPage(1); }}>{v}</Button> },
    { title: '类型', dataIndex: 'libraryType', width: 110, render: (v) => <Tag color={libraryColor(v)}>{libraryLabel(v)}</Tag> },
    { title: '用户ID', dataIndex: 'userId', width: 170, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
    { title: '状态', dataIndex: 'status', width: 130, render: (v) => <Tag color={statusColor(v)}>{v}</Tag> },
    { title: '素材', width: 170, render: (_, r) => <Space size={4}><Tag>总 {r.assetCount || 0}</Tag><Tag color="blue">图 {r.imageAssetCount || 0}</Tag><Tag color="geekblue">视 {r.videoAssetCount || 0}</Tag></Space> },
    { title: 'Active', dataIndex: 'activeAssetCount', width: 90 },
    { title: 'ProjectName', dataIndex: 'remoteProjectName', width: 180, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
    { title: '创建时间', dataIndex: 'createdAt', width: 170, render: formatDate },
    { title: '更新时间', dataIndex: 'updatedAt', width: 170, render: formatDate },
  ];

  const assetColumns: ColumnsType<PrivatePortraitAsset> = [
    { title: '预览', width: 100, fixed: 'left', render: (_, r) => <PreviewCell asset={r} /> },
    { title: '素材名称', dataIndex: 'name', width: 180, render: (v, r) => <div><Text strong>{v || '未命名素材'}</Text><br /><Text type="secondary">{assetTypeLabel(r.assetType)}</Text></div> },
    { title: '库类型', dataIndex: 'libraryType', width: 110, render: (v) => <Tag color={libraryColor(v)}>{libraryLabel(v)}</Tag> },
    { title: '用户ID', dataIndex: 'userId', width: 170, render: (v) => <Text code copyable={!!v}>{v || '-'}</Text> },
    { title: '本地项目', dataIndex: 'projectName', width: 160, render: (v) => v || '-' },
    { title: '状态', dataIndex: 'status', width: 120, render: (v) => <Tag color={statusColor(v)}>{v}</Tag> },
    { title: 'AssetId', dataIndex: 'remoteAssetId', width: 190, render: (v) => <Space><Text code>{shortId(v)}</Text>{v ? <Button size="small" type="text" icon={<CopyOutlined />} onClick={() => copyText(v)} /> : null}</Space> },
    { title: 'GroupId', dataIndex: 'remoteGroupId', width: 190, render: (v) => <Space><Text code>{shortId(v)}</Text>{v ? <Button size="small" type="text" icon={<CopyOutlined />} onClick={() => copyText(v)} /> : null}</Space> },
    { title: '轮询', width: 160, render: (_, r) => <div><Text>次数：{r.pollCount || 0}</Text><br /><Text type="secondary">下次：{formatDate((r as any).nextPollAt)}</Text></div> },
    { title: '错误', dataIndex: 'errorMessage', width: 240, ellipsis: true, render: (v) => v ? <Tooltip title={v}><Text type="danger">{v}</Text></Tooltip> : '-' },
    { title: '创建时间', dataIndex: 'createdAt', width: 170, render: formatDate },
  ];

  return (
    <div style={{ padding: 24, background: '#f7f7fb', minHeight: '100%' }}>
      <Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 16 }} align="start">
        <div>
          <Title level={3} style={{ margin: 0 }}>私域人像素材库</Title>
          <Text type="secondary">统一查看真人认证素材与虚拟人像素材，支持图片/视频资产状态排查。</Text>
        </div>
        <Space wrap>
          <Input allowClear prefix={<SearchOutlined />} placeholder="搜索项目/素材" value={keyword} onChange={(e) => setKeyword(e.target.value)} onPressEnter={searchAll} style={{ width: 240 }} />
          <Select value={libraryType} onChange={(v) => { setLibraryType(v); setProjectPage(1); setAssetPage(1); }} options={LIBRARY_OPTIONS} style={{ width: 150 }} />
          <Select value={assetType} onChange={(v) => { setAssetType(v); setAssetPage(1); }} options={ASSET_TYPE_OPTIONS} style={{ width: 130 }} />
          <Button icon={<SearchOutlined />} type="primary" onClick={searchAll}>查询</Button>
          <Button onClick={resetFilters}>重置</Button>
          <Button icon={<ReloadOutlined />} onClick={() => { loadProjects(); loadAssets(); }}>刷新</Button>
        </Space>
      </Space>

      <Space size={16} wrap style={{ marginBottom: 16 }}>
        <Card style={{ width: 180 }}><Statistic title="项目数" value={projectTotal} /></Card>
        <Card style={{ width: 180 }}><Statistic title="当前页素材" value={projectSummary.asset} /></Card>
        <Card style={{ width: 180 }}><Statistic title="图片" value={projectSummary.image} /></Card>
        <Card style={{ width: 180 }}><Statistic title="视频" value={projectSummary.video} /></Card>
        <Card style={{ width: 180 }}><Statistic title="Active" value={projectSummary.active} /></Card>
      </Space>

      <Card title="项目组" style={{ marginBottom: 16, borderRadius: 14 }} extra={<Select value={projectStatus} onChange={(v) => { setProjectStatus(v); setProjectPage(1); }} options={PROJECT_STATUS_OPTIONS} style={{ width: 180 }} />}>
        <Table rowKey="id" columns={projectColumns} dataSource={projects} loading={loadingProjects} pagination={{ current: projectPage, pageSize: PAGE_SIZE, total: projectTotal, onChange: setProjectPage }} size="small" scroll={{ x: 1350 }} />
      </Card>

      <Card title={selectedProjectId ? '项目素材明细' : '全部素材明细'} style={{ borderRadius: 14 }} extra={<Space><Select value={assetStatus} onChange={(v) => { setAssetStatus(v); setAssetPage(1); }} options={ASSET_STATUS_OPTIONS} style={{ width: 170 }} />{selectedProjectId ? <Button size="small" onClick={() => setSelectedProjectId(undefined)}>查看全部</Button> : null}</Space>}>
        <Table rowKey="id" columns={assetColumns} dataSource={assets} loading={loadingAssets} pagination={{ current: assetPage, pageSize: PAGE_SIZE, total: assetTotal, onChange: setAssetPage }} size="small" scroll={{ x: 1700 }} />
      </Card>
    </div>
  );
};

export default AdminPrivatePortraitProjects;