/* eslint-disable spellcheck/spell-checker */
import React from 'react';
import { Card, Row, Col, Typography, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { FYSummaryData } from '../interface';
import { convertToShorthand } from '@/utills/helper';

const { Title } = Typography;

interface FYSummaryCardsProps {
  data: FYSummaryData;
  showBusiness?: boolean;
}

const VISITED_DUPLICATE_TOOLTIP = 'DNAL (Duplicate Number Across Launches): the same WhatsApp number visited via leads in different launches, counted once here. RV (Repeated Visits): the same WhatsApp number visited more than once (e.g. Site Visit + VC + OBM), counted once here. The big number above is the count of physically distinct customers visited, after removing both.';

const FYSummaryCards: React.FC<FYSummaryCardsProps> = ({ data, showBusiness = true }) => {
  const { summary, financialYear, dateRange } = data;

  const cards: { label: string; value: number; duplicate?: number; colorClass: string; isVisits?: boolean }[] = [
    { label: 'Visits', value: summary.visitsUnique ?? 0, duplicate: summary.visitsDuplicate, colorClass: 'blue-card', isVisits: true },
    { label: 'Tokens', value: summary.tokensUnique ?? 0, duplicate: summary.tokensDuplicate, colorClass: 'yellow-card' },
    { label: 'Bookings', value: summary.bookings, colorClass: 'cyan-card' },
    { label: 'Cancellations', value: summary.cancellations, colorClass: 'red-card' },
    { label: 'Net Bookings', value: summary.netBookings, duplicate: summary.netBookingsDuplicate, colorClass: 'purple-card' },
  ];

  if (showBusiness && summary.business !== undefined) {
    cards.push(
      { label: 'Business', value: summary.business, colorClass: 'green-card' },
      { label: 'Cancelled Business', value: summary.cancelledBusiness ?? 0, colorClass: 'red-card' },
      { label: 'Net Business', value: summary.netBusiness ?? 0, colorClass: 'yellow-card' },
    );
  }

  const colSpan = showBusiness && summary.business !== undefined ? 3 : Math.floor(24 / cards.length);

  return (
    <div className="fy-summary-section mb-6 mt-6">
      <Title level={4} className="mb-4">
        FY {financialYear} Summary ({dateRange.start} to {dateRange.end})
      </Title>
      <Row gutter={[16, 16]}>
        {cards.map((card) => (
          <Col xs={12} sm={8} md={colSpan} key={card.label}>
            <Card className={`dashboard-card ${card.colorClass} small h-100`}>
              <h3>
                {['Business', 'Cancelled Business', 'Net Business'].includes(card.label)
                  ? convertToShorthand(card.value)
                  : card.value}
                {!card.isVisits && card.duplicate != null && card.duplicate > 0 && (
                  <span style={{ fontSize: '12px', color: '#888', fontWeight: 400 }}>{`(${card.duplicate})`}</span>
                )}
              </h3>
              {card.isVisits && (
                <span style={{ fontSize: '12px', color: '#888', fontWeight: 400, display: 'block' }}>
                  {`DNAL: ${summary.visitsDuplicate ?? 0}, RV: ${summary.visitsRepeatVisit ?? 0}`}
                  <Tooltip title={VISITED_DUPLICATE_TOOLTIP}>
                    <InfoCircleOutlined style={{ fontSize: '12px', color: '#888', marginLeft: 4, cursor: 'pointer' }} />
                  </Tooltip>
                </span>
              )}
              <span>{card.label}</span>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default FYSummaryCards;