import { useEffect, useMemo, useState } from 'react';
import {
  ArrowRightOutlined,
  CompassOutlined,
  DeleteOutlined,
  EditOutlined,
  MessageOutlined,
  RobotOutlined
} from '@ant-design/icons';
import { Button, Col, Row, Empty, Popconfirm, App as AntApp, Tag, Space } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import { Agent, AgentAPI } from '../api';

export default function AgentList() {
  const [list, setList] = useState<Agent[]>([]);
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  const { message } = AntApp.useApp();

  const load = async () => {
    setLoading(true);
    try {
      setList(await AgentAPI.list());
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    load();
  }, []);

  const handleDelete = async (id: string) => {
    await AgentAPI.remove(id);
    message.success('已删除');
    load();
  };

  const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
  const publicCount = useMemo(() => list.filter((a) => a.visibility === 'public').length, [list]);
  const teamCount = useMemo(() => list.filter((a) => a.visibility === 'team').length, [list]);

  return (
    <div className="page-container">
      <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) 48%, 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: 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
              }}
            >
              <RobotOutlined style={{ color: 'var(--color-brand)' }} />
              我的 Agent 资产
            </div>

            <h2 className="page-title" style={{ marginBottom: 10 }}>
              我的智能体
            </h2>
            <div className="page-subtitle" style={{ marginTop: 0, fontSize: 15, lineHeight: 1.75 }}>
              把你的 AI 助手沉淀成一组可管理、可协作、可持续进化的能力单元。创建入口统一在智能体广场，这里负责查看、进入和运营它们。
            </div>
          </div>
          <Button
            type="primary"
            size="large"
            icon={<CompassOutlined />}
            onClick={() => navigate('/marketplace')}
            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: publicCount, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' },
            { label: '团队协作中', value: teamCount, tone: 'rgba(14, 165, 233, 0.10)', color: 'var(--color-info)' }
          ].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: 28, 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>

      {!loading && list.length === 0 ? (
        <div className="empty-state">
          <Empty description="你还没有任何智能体">
            <Button type="primary" onClick={() => navigate('/marketplace')} style={{ borderRadius: 10 }}>
              前往广场创建
            </Button>
          </Empty>
        </div>
      ) : (
        <Row gutter={[18, 18]}>
          {list.map((a) => (
            <Col xs={24} sm={12} md={8} lg={6} key={a.id}>
              <div
                className="agent-card"
                style={{
                  borderRadius: 20,
                  padding: 20,
                  minHeight: 292,
                  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)'
                }}
              >
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div
                    className="avatar"
                    style={{ background: a.avatar || 'var(--gradient-brand)', borderRadius: '50%', overflow: 'hidden', width: 54, height: 54 }}
                  >
                    {isImageUrl(a.avatar) ? (
                      <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" />
                    ) : (
                      (a.name?.charAt(0) || '?').toUpperCase()
                    )}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 17, color: 'var(--color-text)', marginBottom: 4 }}>{a.name}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--color-text-tertiary)' }}>
                      最近更新于 {dayjs(a.updated_at).format('YYYY-MM-DD')}
                    </div>
                  </div>
                </div>

                <div
                  style={{
                    marginTop: 16,
                    padding: '16px 16px 18px',
                    borderRadius: 16,
                    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)'
                  }}
                >
                  <div className="desc" style={{ minHeight: 66, fontSize: 13.5, lineHeight: 1.7 }}>
                    {a.description || '还没有填写描述，可以补充这个智能体适合解决什么问题。'}
                  </div>
                </div>

                <Space size={6} wrap style={{ marginTop: 14 }}>
                  {a.visibility === 'public' && (
                    <Tag bordered={false} style={{ background: 'var(--color-success-soft)', color: 'var(--color-success)', borderRadius: 999, margin: 0 }}>
                      公开
                    </Tag>
                  )}
                  {a.visibility === 'team' && (
                    <Tag bordered={false} style={{ background: 'var(--color-info-soft)', color: 'var(--color-info)', borderRadius: 999, margin: 0 }}>
                      团队
                    </Tag>
                  )}
                  {a.visibility === 'private' && (
                    <Tag bordered={false} style={{ background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999, margin: 0 }}>
                      私有
                    </Tag>
                  )}
                  {a.model && (
                    <Tag bordered={false} style={{ background: 'var(--color-brand-soft)', color: 'var(--color-brand)', borderRadius: 999, margin: 0, maxWidth: '100%' }}>
                      <span style={{ display: 'inline-block', maxWidth: 190, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {a.model}
                      </span>
                    </Tag>
                  )}
                  <Tag bordered={false} style={{ background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999, margin: 0 }}>
                    T={a.temperature}
                  </Tag>
                  {(a.fork_count ?? 0) > 0 && (
                    <Tag bordered={false} style={{ background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999, margin: 0 }}>
                      Fork {a.fork_count}
                    </Tag>
                  )}
                </Space>

                <div style={{ display: 'flex', gap: 8, marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--color-border)' }}>
                  <Link to={`/agents/${a.id}/chat`} style={{ flex: 1 }}>
                    <Button type="primary" block icon={<MessageOutlined />} style={{ borderRadius: 12, height: 40, fontWeight: 600 }}>
                      对话
                    </Button>
                  </Link>
                  <Link to={`/agents/${a.id}`} style={{ flex: 1 }}>
                    <Button block icon={<EditOutlined />} style={{ borderRadius: 12, height: 40 }}>
                      管理
                    </Button>
                  </Link>
                  <Popconfirm
                    title="确定删除该智能体？"
                    description="将删除其知识库与对话记录"
                    onConfirm={() => handleDelete(a.id)}
                    okText="删除"
                    cancelText="取消"
                  >
                    <Button danger icon={<DeleteOutlined />} style={{ borderRadius: 12, width: 40, height: 40 }} />
                  </Popconfirm>
                </div>
              </div>
            </Col>
          ))}
        </Row>
      )}

      {list.length > 0 && (
        <div
          style={{
            marginTop: 24,
            borderRadius: 20,
            padding: '18px 20px',
            background: 'var(--color-surface)',
            border: '1px solid var(--color-border)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 16,
            flexWrap: 'wrap'
          }}
        >
          <div>
            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--color-text)', marginBottom: 4 }}>
              想创建新的智能体入口？
            </div>
            <div style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
              统一从智能体广场进入，保证创建流程和发现体验保持一致。
            </div>
          </div>
          <Button type="text" icon={<ArrowRightOutlined />} onClick={() => navigate('/marketplace')} style={{ color: 'var(--color-brand)', fontWeight: 600 }}>
            去广场继续发现
          </Button>
        </div>
      )}
    </div>
  );
}