import { ClockCircleOutlined, CopyOutlined, EditOutlined, GlobalOutlined, LockOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Space, Tag, Tooltip } from 'antd';
import type { PromptTemplate } from '../../../api';
import { CATEGORY_STYLES } from '../constants';

export default function PromptTemplateCard(props: {
  template: PromptTemplate;
  hasOnSelect: boolean;
  onUse: () => void;
  onEdit: () => void;
  onDelete: () => void;
  formatDate: (ts: number) => string;
}) {
  const { template: t, hasOnSelect, onUse, onEdit, onDelete, formatDate } = props;
  const tone = CATEGORY_STYLES[t.category || '其他'] || CATEGORY_STYLES['其他'];

  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 10px 30px rgba(15, 23, 42, 0.045)',
        padding: 20,
        display: 'flex',
        flexDirection: 'column',
        minHeight: 286
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <Tag
            bordered={false}
            style={{
              margin: 0,
              borderRadius: 999,
              paddingInline: 10,
              height: 28,
              lineHeight: '28px',
              fontSize: 12,
              fontWeight: 600,
              background: tone.bg,
              color: tone.text
            }}
          >
            {t.category || '其他'}
          </Tag>
          <Tag
            bordered={false}
            icon={t.visibility === 'public' ? <GlobalOutlined /> : <LockOutlined />}
            style={{
              margin: 0,
              borderRadius: 999,
              paddingInline: 10,
              height: 28,
              lineHeight: '28px',
              fontSize: 12,
              background: 'var(--color-surface-2)',
              color: 'var(--color-text-secondary)'
            }}
          >
            {t.visibility === 'public' ? '公开灵感' : '仅自己可见'}
          </Tag>
        </div>

        <Tooltip title={hasOnSelect ? '插入到当前对话' : '复制到剪贴板'}>
          <Button type="primary" icon={<CopyOutlined />} onClick={onUse} style={{ borderRadius: 12, height: 38, fontWeight: 600 }}>
            {hasOnSelect ? '使用' : '复制'}
          </Button>
        </Tooltip>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start', marginBottom: 14 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 19, fontWeight: 700, color: 'var(--color-text)', letterSpacing: '-0.02em', marginBottom: 6 }}>{t.title}</div>
          <div style={{ fontSize: 12.5, color: 'var(--color-text-tertiary)' }}>by {t.ownerName || '我'}</div>
        </div>

        <div
          style={{
            flexShrink: 0,
            padding: '6px 10px',
            borderRadius: 12,
            background: 'rgba(15, 23, 42, 0.03)',
            color: 'var(--color-text-secondary)',
            fontSize: 12,
            fontWeight: 600
          }}
        >
          使用 {t.useCount}
        </div>
      </div>

      <div
        style={{
          position: 'relative',
          borderRadius: 16,
          background: 'linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(255,255,255,0.92) 100%)',
          border: '1px solid rgba(148, 163, 184, 0.14)',
          padding: '16px 16px 18px',
          minHeight: 132,
          overflow: 'hidden'
        }}
      >
        <div style={{ position: 'absolute', inset: '0 auto 0 0', width: 4, background: tone.text, opacity: 0.18 }} />
        <div
          style={{
            whiteSpace: 'pre-wrap',
            fontSize: 13.5,
            color: 'var(--color-text-secondary)',
            lineHeight: 1.8,
            minHeight: 96,
            maxHeight: 130,
            overflow: 'hidden'
          }}
        >
          {t.body.slice(0, 220)}
          {t.body.length > 220 ? '…' : ''}
        </div>
      </div>

      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 10,
          marginTop: 'auto',
          paddingTop: 16,
          borderTop: '1px solid var(--color-border)',
          fontSize: 12.5,
          color: 'var(--color-text-tertiary)'
        }}
      >
        <ClockCircleOutlined />
        <span>最近更新于 {formatDate(t.updatedAt)}</span>
        <span style={{ flex: 1 }} />
        <Space size={2}>
          <Button size="small" type="text" icon={<EditOutlined />} onClick={onEdit} style={{ borderRadius: 10 }}>
            编辑
          </Button>
          <Popconfirm title="删除此模板？" onConfirm={onDelete}>
            <Button size="small" type="text" danger style={{ borderRadius: 10 }}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </div>
    </div>
  );
}

