import { CheckCircleOutlined, LockOutlined, RocketOutlined, StarFilled } from '@ant-design/icons';
import { Button, Popconfirm, Space, Tag, Tooltip } from 'antd';
import type { LLMProvider } from '../../../api';

export default function ProviderCard(props: {
  provider: LLMProvider;
  testing: boolean;
  onTest: () => void;
  onSetDefault: () => void;
  onEdit: () => void;
  onDelete: () => void;
}) {
  const { provider: p, testing, onTest, onSetDefault, onEdit, onDelete } = props;

  return (
    <div
      style={{
        borderRadius: 20,
        border: '1px solid var(--color-border)',
        background: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%)',
        boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)',
        padding: 20,
        minHeight: 310,
        display: 'flex',
        flexDirection: 'column'
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 6 }}>
            <span style={{ fontWeight: 700, fontSize: 18, color: 'var(--color-text)' }}>{p.name}</span>
            {p.isDefault && (
              <Tag
                bordered={false}
                icon={<StarFilled />}
                style={{ background: 'var(--color-success-soft)', color: 'var(--color-success)', borderRadius: 999, margin: 0 }}
              >
                默认
              </Tag>
            )}
            {!p.enabled && (
              <Tag bordered={false} style={{ background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999, margin: 0 }}>
                已禁用
              </Tag>
            )}
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--color-text-tertiary)' }}>{p.baseUrl}</div>
        </div>

        <Space size={4}>
          <Tooltip title="测试连通性（会发一条 ping 消息）">
            <Button size="small" loading={testing} onClick={onTest} style={{ borderRadius: 10 }}>
              测试
            </Button>
          </Tooltip>
          {!p.isDefault && (
            <Tooltip title="设为我的默认 provider">
              <Button size="small" onClick={onSetDefault} style={{ borderRadius: 10 }}>
                设为默认
              </Button>
            </Tooltip>
          )}
        </Space>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12, marginBottom: 16 }}>
        <div
          style={{
            borderRadius: 16,
            padding: '14px 14px 12px',
            background: 'rgba(8, 145, 178, 0.06)',
            border: '1px solid rgba(8, 145, 178, 0.10)'
          }}
        >
          <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 8 }}>接入类型</div>
          <Tag bordered={false} style={{ background: 'var(--color-brand-soft)', color: 'var(--color-brand)', borderRadius: 999, margin: 0 }}>
            {p.kind}
          </Tag>
        </div>
        <div
          style={{
            borderRadius: 16,
            padding: '14px 14px 12px',
            background: 'rgba(34, 197, 94, 0.06)',
            border: '1px solid rgba(34, 197, 94, 0.10)'
          }}
        >
          <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 8 }}>默认模型</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)' }}>{p.defaultModel || '未设置'}</div>
        </div>
      </div>

      <div
        style={{
          borderRadius: 16,
          padding: '16px 16px 14px',
          background: 'linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(255,255,255,0.95) 100%)',
          border: '1px solid rgba(148, 163, 184, 0.14)',
          marginBottom: 16
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 10 }}>
          <LockOutlined />
          密钥状态
        </div>
        <div style={{ fontSize: 13.5, color: 'var(--color-text)' }}>
          {p.hasApiKey ? (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <CheckCircleOutlined style={{ color: 'var(--color-success)' }} />
              已配置 {p.apiKeyMasked}
            </span>
          ) : (
            <span style={{ color: 'var(--color-danger)' }}>尚未配置 API Key</span>
          )}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--color-text-tertiary)', marginTop: 8, wordBreak: 'break-all' }}>{p.baseUrl}</div>
      </div>

      {p.models?.length > 0 && (
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 10 }}>候选模型</div>
          <Space size={6} wrap>
            {p.models.map((m) => (
              <Tag key={m} bordered={false} style={{ margin: 0, background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999 }}>
                {m}
              </Tag>
            ))}
          </Space>
        </div>
      )}

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          marginTop: 'auto',
          paddingTop: 16,
          borderTop: '1px solid var(--color-border)'
        }}
      >
        <RocketOutlined style={{ color: 'var(--color-brand)' }} />
        <span style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', flex: 1 }}>{p.enabled ? '可用于聊天、工作流和测试连接' : '当前已暂停使用，需要重新启用'}</span>
        <Space size={4}>
          <Button size="small" type="text" onClick={onEdit} style={{ borderRadius: 10 }}>
            编辑
          </Button>
          <Popconfirm title={`删除 ${p.name}？`} onConfirm={onDelete}>
            <Button size="small" type="text" danger style={{ borderRadius: 10 }}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </div>
    </div>
  );
}

