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

const { Title } = Typography;

interface LastWeekCardsProps {
  data: LastWeekData;
  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 LastWeekCards: React.FC<LastWeekCardsProps> = ({ data, showBusiness = true }) => {
  const { summary, weekLabel } = data;
  const hasBusiness = showBusiness && summary.business !== undefined;
  const cardCount = hasBusiness ? 8 : 5;
  const cardColSpan = Math.floor(24 / cardCount);

  return (
    <div className="last-week-section mb-6">
      <Title level={4} className="mb-4">
        Last Week Performance ({weekLabel})
      </Title>
      <Row gutter={[16, 16]}>
        <Col xs={12} sm={12} md={cardColSpan}>
          <Card className="dashboard-card blue-card small h-100">
            <h3>{summary.visitsUnique ?? summary.visits}</h3>
            <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>Visits</span>
          </Card>
        </Col>
        <Col xs={12} sm={12} md={cardColSpan}>
          <Card className="dashboard-card yellow-card small h-100">
            <h3>{summary.tokens}</h3>
            <span>Tokens</span>
          </Card>
        </Col>
        <Col xs={12} sm={12} md={cardColSpan}>
          <Card className="dashboard-card cyan-card small h-100">
            <h3>{summary.bookings}</h3>
            <span>Bookings</span>
          </Card>
        </Col>
        <Col xs={12} sm={12} md={cardColSpan}>
          <Card className="dashboard-card red-card small h-100">
            <h3>{summary.cancellations}</h3>
            <span>Cancellations</span>
          </Card>
        </Col>
        <Col xs={12} sm={12} md={cardColSpan}>
          <Card className="dashboard-card purple-card small h-100">
            <h3>{summary.netBookings}</h3>
            <span>Net Bookings</span>
          </Card>
        </Col>
        {hasBusiness && (
          <>
            <Col xs={12} sm={12} md={cardColSpan}>
              <Card className="dashboard-card green-card small h-100">
                <h3>{convertToShorthand(summary.business!)}</h3>
                <span>Business</span>
              </Card>
            </Col>
            <Col xs={12} sm={12} md={cardColSpan}>
              <Card className="dashboard-card red-card small h-100">
                <h3>{convertToShorthand(summary.cancelledBusiness ?? 0)}</h3>
                <span>Cancelled Business</span>
              </Card>
            </Col>
            <Col xs={12} sm={12} md={cardColSpan}>
              <Card className="dashboard-card yellow-card small h-100">
                <h3>{convertToShorthand(summary.netBusiness ?? 0)}</h3>
                <span>Net Business</span>
              </Card>
            </Col>
          </>
        )}
      </Row>
    </div>
  );
};

export default LastWeekCards;