import React, { useEffect, useMemo, useState } from 'react';
import { Alert, Button, Empty, Image, Space, Typography, message } from 'antd';
import { CopyOutlined, LinkOutlined } from '@ant-design/icons';
import { copyToClipboard } from '../../../utils/clipboard';

const RAW_API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
const RESOURCE_BASE = RAW_API_BASE.replace(/\/api\/?$/i, '').replace(/\/$/, '');

export function resolveResourceUrl(url?: string | null): string {
  if (!url) return '';
  const value = String(url).trim();
  if (!value) return '';
  if (/^(https?:)?\/\//i.test(value) || /^(blob|data):/i.test(value)) return value;
  return `${RESOURCE_BASE}${value.startsWith('/') ? value : `/${value}`}`;
}

interface MediaPreviewProps {
  url?: string | null;
  type: 'image' | 'video';
  height?: number;
  emptyDescription?: string;
  errorDescription?: string;
}

const MediaPreview: React.FC<MediaPreviewProps> = ({
  url,
  type,
  height = 260,
  emptyDescription = '暂无资源',
  errorDescription = '资源加载失败，可能文件不存在、签名过期或访问权限受限。',
}) => {
  const resolvedUrl = useMemo(() => resolveResourceUrl(url), [url]);
  const [loadFailed, setLoadFailed] = useState(false);

  useEffect(() => {
    setLoadFailed(false);
  }, [resolvedUrl]);

  const copyUrl = async () => {
    if (!resolvedUrl) return;
    const ok = await copyToClipboard(resolvedUrl);
    message.success(ok ? '资源地址已复制' : '复制失败，请手动复制');
  };

  const tools = resolvedUrl ? (
    <Space wrap style={{ marginTop: 8 }}>
      <Button size="small" icon={<CopyOutlined />} onClick={copyUrl}>复制地址</Button>
      <Button size="small" icon={<LinkOutlined />} onClick={() => window.open(resolvedUrl, '_blank', 'noopener,noreferrer')}>新窗口打开</Button>
      <Typography.Text copyable={{ text: resolvedUrl }} type="secondary" style={{ maxWidth: 460 }} ellipsis>
        {resolvedUrl}
      </Typography.Text>
    </Space>
  ) : null;

  if (!resolvedUrl) {
    return (
      <div>
        <div
          style={{
            height,
            borderRadius: 12,
            border: '1px dashed #cbd5e1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            background: '#f8fafc',
          }}
        >
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyDescription} />
        </div>
      </div>
    );
  }

  return (
    <div>
      {loadFailed ? (
        <Alert
          type="warning"
          showIcon
          message="资源预览失败"
          description={errorDescription}
          style={{ marginBottom: 8 }}
        />
      ) : null}

      {type === 'image' ? (
        <Image
          src={resolvedUrl}
          onError={() => setLoadFailed(true)}
          style={{
            width: '100%',
            maxHeight: height,
            objectFit: 'contain',
            borderRadius: 12,
            background: '#f8fafc',
            border: '1px solid #f1f5f9',
          }}
          fallback=""
          preview={!loadFailed}
        />
      ) : (
        <video
          src={resolvedUrl}
          controls
          preload="metadata"
          onError={() => setLoadFailed(true)}
          style={{
            width: '100%',
            maxHeight: height,
            borderRadius: 12,
            background: '#0f172a',
            border: '1px solid #f1f5f9',
          }}
        />
      )}

      {tools}
    </div>
  );
};

export default MediaPreview;