import { useEffect, useState } from 'react';
import {
  CopyOutlined,
  DeleteOutlined,
  MailOutlined,
  PlusOutlined,
  TeamOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Card, Button, List, Tag, Space, Popconfirm, App as AntApp, Modal, Form, Input, Empty } from 'antd';
import { AuthAPI, Team, TeamAPI } from '../api';

export default function TeamsPage() {
  const { message } = AntApp.useApp();
  const [list, setList] = useState<Team[]>([]);
  const [active, setActive] = useState<Team | null>(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [inviteOpen, setInviteOpen] = useState(false);
  const [lastInviteCode, setLastInviteCode] = useState<string | null>(null);

  const load = async () => {
    const l = await TeamAPI.list();
    setList(l);
    if (l.length && !active) setActive(await TeamAPI.detail(l[0].id));
  };

  useEffect(() => {
    load();
  }, []);

  const handleCreate = async (v: any) => {
    const t = await TeamAPI.create(v.name);
    setCreateOpen(false);
    message.success('已创建');
    await load();
    setActive(await TeamAPI.detail(t.id));
  };

  const handleInvite = async (v: any) => {
    if (!active) return;
    const inv = await AuthAPI.createInvite({
      teamId: active.id,
      email: v.email || undefined,
      ttlHours: Number(v.ttlHours) || 168
    });
    setLastInviteCode(inv.code);
  };

  return (
    <div className="feature-cover-container">
      <div className="page-container" style={{ maxWidth: 1080 }}>
      <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
              }}
            >
              <TeamOutlined style={{ color: 'var(--color-brand)' }} />
              协作组织空间
            </div>
            <h1 className="page-title" style={{ marginBottom: 10 }}>团队管理</h1>
            <div className="page-subtitle" style={{ marginTop: 0, fontSize: 15, lineHeight: 1.75 }}>
              团队不只是成员列表，更是共享智能体、协同运营和权限分工的组织单元。这里统一查看团队、成员和邀请状态。
            </div>
          </div>
          <Button type="primary" size="large" icon={<PlusOutlined />} onClick={() => setCreateOpen(true)} 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: active?.members?.length ?? 0, tone: 'rgba(14, 165, 233, 0.10)', color: 'var(--color-info)' },
            { label: '共享智能体', value: active?.agentCount ?? 0, tone: 'rgba(34, 197, 94, 0.10)', color: 'var(--color-success)' }
          ].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>

      <div style={{ display: 'flex', gap: 22, alignItems: 'stretch' }}>
        <div
          style={{
            width: 260,
            flexShrink: 0,
            background: 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%)',
            border: '1px solid var(--color-border)',
            borderRadius: 22,
            padding: 14,
            boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)'
          }}
        >
          <div style={{ padding: '8px 10px 14px' }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--color-text)', marginBottom: 4 }}>团队列表</div>
            <div style={{ fontSize: 12.5, color: 'var(--color-text-secondary)' }}>选择一个团队查看成员与邀请</div>
          </div>
          {list.length === 0 ? (
            <Empty description="还没有团队" />
          ) : (
            <List
              dataSource={list}
              renderItem={(item) => (
                <div
                  className={`nav-item ${active?.id === item.id ? 'active' : ''}`}
                  onClick={async () => setActive(await TeamAPI.detail(item.id))}
                  style={{
                    padding: '10px 12px',
                    borderRadius: 14,
                    cursor: 'pointer',
                    marginBottom: 6,
                    background: active?.id === item.id ? 'rgba(8, 145, 178, 0.10)' : 'transparent',
                    color: active?.id === item.id ? 'var(--color-brand)' : 'var(--color-text-secondary)',
                    fontWeight: active?.id === item.id ? 600 : 500,
                    border: active?.id === item.id ? '1px solid rgba(8, 145, 178, 0.16)' : '1px solid transparent'
                  }}
                >
                  <div style={{ fontSize: 14, marginBottom: 4 }}>{item.name}</div>
                  <div style={{ fontSize: 12, color: active?.id === item.id ? 'var(--color-brand)' : 'var(--color-text-tertiary)' }}>
                    {item.agentCount ?? 0} 个智能体
                  </div>
                </div>
              )}
            />
          )}
        </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        {active ? (
          <Card
            style={{ borderRadius: 22, boxShadow: '0 12px 28px rgba(15, 23, 42, 0.045)' }}
            bodyStyle={{ padding: 22 }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap', marginBottom: 20 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
                  <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--color-text)' }}>{active.name}</span>
                  <Tag bordered={false} style={{ background: 'var(--color-brand-soft)', color: 'var(--color-brand)', borderRadius: 999, margin: 0 }}>{active.myRole}</Tag>
                  <Tag bordered={false} style={{ background: 'var(--color-surface-2)', color: 'var(--color-text-secondary)', borderRadius: 999, margin: 0 }}>{active.agentCount ?? 0} 智能体</Tag>
                </div>
                <div style={{ fontSize: 13.5, color: 'var(--color-text-secondary)' }}>
                  管理成员权限、邀请新伙伴，并协同维护团队共享的智能体资产。
                </div>
              </div>
              <Space>
                {(active.myRole === 'owner' || active.myRole === 'admin') && (
                  <Button icon={<MailOutlined />} onClick={() => setInviteOpen(true)} style={{ borderRadius: 12 }}>
                    生成邀请码
                  </Button>
                )}
                {active.myRole === 'owner' && (
                  <Popconfirm
                    title="确定删除该团队？团队内的智能体会变成 owner 私有"
                    onConfirm={async () => {
                      await TeamAPI.remove(active.id);
                      message.success('已删除');
                      setActive(null);
                      load();
                    }}
                  >
                    <Button danger icon={<DeleteOutlined />} style={{ borderRadius: 12 }}>
                      删除团队
                    </Button>
                  </Popconfirm>
                )}
              </Space>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12, marginBottom: 20 }}>
              <div style={{ borderRadius: 16, padding: '14px 16px', 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>
                <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--color-text)' }}>{active.members?.length || 0}</div>
              </div>
              <div style={{ borderRadius: 16, padding: '14px 16px', 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: 24, fontWeight: 700, color: 'var(--color-text)' }}>{active.agentCount ?? 0}</div>
              </div>
              <div style={{ borderRadius: 16, padding: '14px 16px', background: 'rgba(249, 115, 22, 0.06)', border: '1px solid rgba(249, 115, 22, 0.10)' }}>
                <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginBottom: 8 }}>当前身份</div>
                <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--color-text)', textTransform: 'capitalize' }}>{active.myRole}</div>
              </div>
            </div>

            <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--color-text)', marginBottom: 14 }}>
              成员 ({active.members?.length || 0})
            </div>
            <List
              dataSource={active.members || []}
              renderItem={(m) => (
                <List.Item
                  style={{ padding: '14px 0' }}
                  actions={
                    (active.myRole === 'owner' || active.myRole === 'admin') && m.role !== 'owner'
                      ? [
                          <Popconfirm
                            key="kick"
                            title="移除该成员？"
                            onConfirm={async () => {
                              await TeamAPI.removeMember(active.id, m.id);
                              message.success('已移除');
                              setActive(await TeamAPI.detail(active.id));
                            }}
                          >
                            <Button size="small" danger style={{ borderRadius: 10 }}>
                              移除
                            </Button>
                          </Popconfirm>
                        ]
                      : []
                  }
                >
                  <List.Item.Meta
                    avatar={
                      <div
                        style={{
                          width: 42,
                          height: 42,
                          borderRadius: 999,
                          background: 'rgba(8, 145, 178, 0.10)',
                          color: 'var(--color-brand)',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center'
                        }}
                      >
                        <UserOutlined />
                      </div>
                    }
                    title={
                      <Space>
                        <span style={{ fontWeight: 600 }}>{m.name}</span>
                        <Tag
                          bordered={false}
                          style={{
                            background:
                              m.role === 'owner'
                                ? 'var(--color-warning-soft)'
                                : m.role === 'admin'
                                  ? 'var(--color-info-soft)'
                                  : 'var(--color-surface-2)',
                            color:
                              m.role === 'owner'
                                ? 'var(--color-warning)'
                                : m.role === 'admin'
                                  ? 'var(--color-info)'
                                  : 'var(--color-text-secondary)',
                            borderRadius: 999,
                            margin: 0
                          }}
                        >
                          {m.role}
                        </Tag>
                      </Space>
                    }
                    description={
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <span>{m.email}</span>
                        <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
                          加入时间 {new Date(m.joinedAt).toLocaleDateString('zh-CN')}
                        </span>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        ) : (
          <Empty description="选择或创建一个团队" />
        )}
      </div>
    </div>

    <Modal
        open={createOpen}
        title="新建团队"
        onCancel={() => setCreateOpen(false)}
        footer={null}
        destroyOnHidden
      >
        <Form layout="vertical" onFinish={handleCreate}>
          <Form.Item name="name" label="团队名称" rules={[{ required: true }]}>
            <Input placeholder="如：AI 实验小组" autoFocus />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            创建
          </Button>
        </Form>
      </Modal>

      <Modal
        open={inviteOpen}
        title={`📨 邀请加入 ${active?.name}`}
        onCancel={() => {
          setInviteOpen(false);
          setLastInviteCode(null);
        }}
        footer={null}
        destroyOnHidden
      >
        {lastInviteCode ? (
          <div>
            <div style={{ marginBottom: 12 }}>邀请码生成成功，请发给受邀者：</div>
            <Input.TextArea
              value={lastInviteCode}
              readOnly
              autoSize
              style={{ fontFamily: 'monospace', fontSize: 16 }}
            />
            <Button
              type="default"
              icon={<CopyOutlined />}
              style={{ marginTop: 12, borderRadius: 10 }}
              onClick={() => {
                navigator.clipboard?.writeText(lastInviteCode).then(() => message.success('邀请码已复制'));
              }}
            >
              复制邀请码
            </Button>
            <div style={{ color: 'var(--color-text-secondary)', fontSize: 12, marginTop: 8 }}>
              受邀者在注册页填入此邀请码即可加入团队
            </div>
          </div>
        ) : (
          <Form layout="vertical" onFinish={handleInvite}>
            <Form.Item name="email" label="限定邮箱（可选）">
              <Input placeholder="只允许该邮箱使用此邀请码" />
            </Form.Item>
            <Form.Item name="ttlHours" label="有效期（小时）" initialValue={168}>
              <Input type="number" placeholder="168 = 7 天" />
            </Form.Item>
            <Button type="primary" htmlType="submit" block>
              生成邀请码
            </Button>
          </Form>
        )}
      </Modal>
      </div>
      <div className="feature-cover">
        <Empty description="功能规划中，本期不支持" />
      </div>
    </div>
  );
}