import { AppstoreOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Input } from 'antd';
import { SCOPE_OPTIONS } from '../constants';

export default function PromptLibraryHero(props: {
  scope: 'all' | 'mine' | 'public';
  q: string;
  onChangeScope: (v: 'all' | 'mine' | 'public') => void;
  onChangeQ: (v: string) => void;
  onSearch: () => void;
  onCreate: () => void;
}) {
  const { scope, q, onChangeScope, onChangeQ, onSearch, onCreate } = props;

  return (
    <div
      style={{
        borderRadius: 24,
        padding: '28px 28px 24px',
        background:
          'linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(236,253,245,0.92) 42%, rgba(240,249,255,0.96) 100%)',
        border: '1px solid rgba(8, 145, 178, 0.12)',
        boxShadow: '0 18px 50px rgba(15, 23, 42, 0.06)',
        marginBottom: 24
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20, flexWrap: 'wrap', marginBottom: 22 }}>
        <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
            }}
          >
            <AppstoreOutlined style={{ color: 'var(--color-brand)' }} />
            灵感模板中心
          </div>

          <h1 className="page-title" style={{ marginBottom: 10 }}>
            Prompt 模板库
          </h1>
          <div className="page-subtitle" style={{ marginTop: 0, fontSize: 15, lineHeight: 1.75, maxWidth: 560 }}>
            把高质量提示词沉淀成可复用模板，像挑选灵感卡片一样快速使用，而不是面对一页页生硬的配置项。
          </div>
        </div>

        <Button type="primary" size="large" icon={<PlusOutlined />} onClick={onCreate} style={{ borderRadius: 14, height: 46, padding: '0 18px', fontWeight: 600 }}>
          新建模板
        </Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.5fr) auto', gap: 14, alignItems: 'center' }}>
        <Input
          placeholder="搜索标题、分类或正文..."
          value={q}
          onChange={(e) => onChangeQ(e.target.value)}
          onPressEnter={onSearch}
          prefix={<SearchOutlined style={{ color: 'var(--color-text-tertiary)' }} />}
          suffix={
            q ? (
              <Button type="link" size="small" onClick={onSearch} style={{ padding: 0, height: 20 }}>
                搜索
              </Button>
            ) : null
          }
          style={{ height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.88)' }}
          allowClear
        />

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          {SCOPE_OPTIONS.map((item) => {
            const active = scope === item.key;
            return (
              <button
                key={item.key}
                type="button"
                onClick={() => onChangeScope(item.key)}
                style={{
                  border: '1px solid',
                  borderColor: active ? 'rgba(8, 145, 178, 0.18)' : 'var(--color-border)',
                  background: active ? 'rgba(8, 145, 178, 0.10)' : 'rgba(255,255,255,0.72)',
                  color: active ? 'var(--color-brand)' : 'var(--color-text-secondary)',
                  borderRadius: 999,
                  padding: '10px 14px',
                  fontSize: 13,
                  fontWeight: active ? 600 : 500,
                  cursor: 'pointer'
                }}
              >
                {item.label}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

