import { Card, Avatar, Typography, Row, Col, Statistic, Input, Button, App, Space } from 'antd';
import { TeamOutlined, TrophyOutlined, CalendarOutlined, CopyOutlined } from '@ant-design/icons';
import type { DashboardProfile, DashboardReferral, DashboardPoints, DashboardMyEvent } from './types';

interface ProfileCardProps {
  profile: DashboardProfile;
  referral: DashboardReferral;
  points: DashboardPoints;
  myEvents: DashboardMyEvent[];
}

function getInitials(name: string | null, email: string): string {
  if (name && name.trim()) {
    const parts = name.trim().split(/\s+/).filter(Boolean);
    if (parts.length === 0) return email.slice(0, 2).toUpperCase();
    if (parts.length === 1) return (parts[0] || '').slice(0, 2).toUpperCase();
    const first = parts[0] || '';
    const last = parts[parts.length - 1] || '';
    return ((first[0] || '') + (last[0] || '')).toUpperCase();
  }
  return email.slice(0, 2).toUpperCase();
}

export default function ProfileCard({ profile, referral, points, myEvents }: ProfileCardProps) {
  const { message } = App.useApp();
  const initials = getInitials(profile.name, profile.email);
  const displayName = profile.name || profile.email.split('@')[0];

  return (
    <Card styles={{ body: { padding: 20 } }}>
      <Row gutter={[16, 16]} align="middle">
        <Col xs={24} sm={6} style={{ textAlign: 'center' }}>
          {profile.avatar ? (
            <Avatar size={80} src={profile.avatar} />
          ) : (
            <Avatar size={80} style={{ backgroundColor: '#3498db', fontSize: 28, fontWeight: 600 }}>
              {initials}
            </Avatar>
          )}
          <Typography.Title level={4} style={{ margin: '12px 0 4px' }}>
            {displayName}
          </Typography.Title>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            {profile.email}
          </Typography.Text>
        </Col>
        <Col xs={24} sm={18}>
          <Row gutter={[16, 16]}>
            <Col xs={8}>
              <Statistic
                title="Referrals"
                value={referral.totalReferrals}
                prefix={<TeamOutlined />}
              />
            </Col>
            <Col xs={8}>
              <Statistic
                title="Points"
                value={points.total}
                prefix={<TrophyOutlined />}
              />
            </Col>
            <Col xs={8}>
              <Statistic
                title="Events"
                value={myEvents.length}
                prefix={<CalendarOutlined />}
              />
            </Col>
          </Row>
        </Col>
      </Row>
      {referral.link && (
        <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 8 }}>
            Your Referral Link
          </Typography.Text>
          <Space.Compact style={{ width: '100%' }}>
            <Input
              value={referral.link}
              readOnly
              size="small"
              onClick={(e) => (e.target as HTMLInputElement).select()}
            />
            <Button
              size="small"
              type="primary"
              icon={<CopyOutlined />}
              onClick={() => {
                navigator.clipboard.writeText(referral.link!).then(() => message.success('Link copied'));
              }}
            >
              Copy
            </Button>
          </Space.Compact>
        </div>
      )}
    </Card>
  );
}
