import { useEffect, useState } from 'react';
import { Spin } from 'antd';
import { actionInboxApi, type TeamOverview, type TeamMemberOverview } from '../../../../api/health/actionInbox';

function ProgressBar({ value, color }: { value: number; color: string }) {
  return (
    <div style={{ height: 4, background: '#F1F5F9', borderRadius: 2, marginTop: 8, overflow: 'hidden' }}>
      <div style={{
        height: '100%',
        borderRadius: 2,
        width: `${Math.min(100, Math.round(value * 100))}%`,
        background: color,
        transition: 'width 0.3s',
      }} />
    </div>
  );
}

function MemberCard({ member }: { member: TeamMemberOverview }) {
  const hasOverdue = member.overdue_count > 0;
  const rate = member.completion_rate;
  const barColor = hasOverdue ? '#D97706' : rate >= 0.8 ? '#16A34A' : '#2563EB';

  return (
    <div style={{
      padding: '14px 16px',
      border: `1px solid ${hasOverdue ? '#FCA5A5' : '#E2E8F0'}`,
      borderLeft: hasOverdue ? '3px solid #DC2626' : undefined,
      borderRadius: 10,
      marginBottom: 10,
      transition: 'all 0.15s',
      cursor: 'pointer',
      background: hasOverdue ? '#FEF2F2' : 'white',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>{member.name}</div>
          <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 2 }}>
            {member.title ? `${member.title} · ` : ''}待办 {member.pending_count} 项
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{
            fontSize: 18,
            fontWeight: 700,
            color: hasOverdue ? '#DC2626' : '#16A34A',
          }}>
            {member.overdue_count}
          </div>
          <div style={{ fontSize: 10, color: '#94A3B8' }}>超时</div>
        </div>
      </div>
      <ProgressBar value={rate} color={barColor} />
      <div style={{ fontSize: 10, color: '#94A3B8', marginTop: 4 }}>
        处理率 {member.completed_count}/{member.pending_count + member.completed_count}
        {hasOverdue && ` · ${member.overdue_count} 项已升级`}
      </div>
    </div>
  );
}

const RISK_BLOCKS: { key: string; label: string; color: string; bg: string }[] = [
  { key: 'high', label: '高危', color: '#DC2626', bg: '#FEF2F2' },
  { key: 'medium', label: '中危', color: '#D97706', bg: '#FFFBEB' },
  { key: 'low', label: '低危', color: '#16A34A', bg: '#F0FDF4' },
];

export default function TeamOverviewPanel() {
  const [data, setData] = useState<TeamOverview | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    actionInboxApi
      .team()
      .then(setData)
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>;
  }

  if (!data) return null;

  return (
    <div>
      {/* 团队概览卡片 */}
      <div style={{
        background: 'var(--erp-bg-card, white)',
        borderRadius: 12,
        border: '1px solid var(--erp-border, #E2E8F0)',
        overflow: 'hidden',
        marginBottom: 16,
      }}>
        <div style={{
          padding: '16px 20px',
          borderBottom: '1px solid #F1F5F9',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>团队概览</span>
          <span style={{ fontSize: 11, color: '#94A3B8' }}>
            待处理 {data.total_pending} · 已完成 {data.total_completed}
          </span>
        </div>
        <div style={{ padding: 12 }}>
          {data.members.length === 0 ? (
            <div style={{ textAlign: 'center', padding: 24, color: '#94A3B8', fontSize: 13 }}>
              暂无团队成员数据
            </div>
          ) : (
            data.members.map((member) => (
              <MemberCard key={member.user_id} member={member} />
            ))
          )}
        </div>
      </div>

      {/* 风险分布 */}
      <div style={{
        background: 'var(--erp-bg-card, white)',
        borderRadius: 12,
        border: '1px solid var(--erp-border, #E2E8F0)',
        padding: '16px 20px',
      }}>
        <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>科室患者风险分布</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {RISK_BLOCKS.map((block) => (
            <div key={block.key} style={{
              flex: 1,
              textAlign: 'center',
              padding: 8,
              background: block.bg,
              borderRadius: 6,
            }}>
              <div style={{ fontSize: 18, fontWeight: 700, color: block.color }}>
                {data.risk_distribution[block.key as keyof typeof data.risk_distribution] ?? 0}
              </div>
              <div style={{ fontSize: 10, color: block.color }}>{block.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
