import { ApiOutlined, PlusOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import type { LLMProvider } from '../../../api';

export default function ProvidersHero(props: { list: LLMProvider[]; onAdd: () => void }) {
  const { list, onAdd } = props;

  return (
    <div
      style={{
        borderRadius: 24,
        padding: '30px 30px 26px',
        background:
          'linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 42%, rgba(239,246,255,0.96) 100%)',
        border: '1px solid rgba(8, 145, 178, 0.12)',
        boxShadow: '0 20px 48px rgba(15, 23, 42, 0.06)',
        marginBottom: 24
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          gap: 20,
          flexWrap: 'wrap',
          marginBottom: 20
        }}
      >
        <div style={{ maxWidth: 620 }}>
          <div
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
              padding: '6px 12px',
              borderRadius: 999,
              background: 'rgba(255,255,255,0.78)',
              border: '1px solid rgba(8, 145, 178, 0.10)',
              color: 'var(--color-text-secondary)',
              fontSize: 12,
              fontWeight: 600,
              marginBottom: 16
            }}
          >
            <ApiOutlined style={{ color: 'var(--color-brand)' }} />
            模型接入中心
          </div>
          <h1 className="page-title" style={{ marginBottom: 10 }}>
            LLM 提供商
          </h1>
          <div className="page-subtitle" style={{ marginTop: 0, fontSize: 15, lineHeight: 1.75 }}>
            把不同的模型能力接入到同一个工作台里。这里不只是存放接口配置，更是管理默认模型、候选模型与稳定连接状态的地方。
          </div>
        </div>
        <Button
          type="primary"
          size="large"
          icon={<PlusOutlined />}
          onClick={onAdd}
          style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}
        >
          添加提供商
        </Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 14 }}>
        {[
          { label: '已接入提供商', value: list.length, tone: 'rgba(8, 145, 178, 0.10)', color: 'var(--color-brand)' },
          { label: '可用连接数', value: list.filter((item) => item.enabled).length, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' },
          { label: '默认模型源', value: list.filter((item) => item.isDefault).length, tone: 'rgba(249, 115, 22, 0.10)', color: 'var(--color-warning)' }
        ].map((item) => (
          <div
            key={item.label}
            style={{
              borderRadius: 18,
              padding: '16px 18px',
              background: 'rgba(255,255,255,0.72)',
              border: '1px solid rgba(255,255,255,0.7)'
            }}
          >
            <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginBottom: 10 }}>{item.label}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontSize: 30, fontWeight: 700, color: 'var(--color-text)' }}>{item.value}</span>
              <span
                style={{
                  borderRadius: 999,
                  padding: '4px 8px',
                  background: item.tone,
                  color: item.color,
                  fontSize: 12,
                  fontWeight: 600
                }}
              >
                实时状态
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

