import React from "react";
import { Card, Row, Col, Button } from "react-bootstrap";
import {
  CAMPAIGN_RANK_BLOCKS,
  getCampaignCardGradientStyle,
  getCampaignRankBlockAppearance,
  getCampaignRankIconStyle,
  getCampaignRankIconTag,
  readCampaignField,
  readCampaignRankDisplay,
} from "../../util/campaignHelpers";
import CustomImage from "../UI/CustomImage/CustomImage";
import SectionHeading from "../UI/SectionHeading/SectionHeading";
import CustomIcon from "../CustomIcon/CustomIcon";
import "./DashboardCampaignsCard.css";

function getCampaignImage(campaign) {
  const icon = campaign?.icon ?? campaign?.image;
  if (icon != null && String(icon).trim() !== "") return icon;
  return "/img/campaign-logo2.png";
}

/**
 * Shared campaign header + rank tiles (dashboard swiper and campaign details).
 */
function CampaignSummaryCard({
  campaign,
  onHeaderClick,
  onRankClick,
  showNavigateButton = false,
  className = "",
}) {
  const campaignImage = getCampaignImage(campaign);
  const campaignName = campaign?.name || campaign?.title || "Campaign";
  const cardBackgroundStyle = getCampaignCardGradientStyle(campaign);

  const totalPoints = readCampaignField(
    campaign,
    ["total_points", "totalPoints", "overall_points", "overallPoints", "points"],
    "-"
  );

  const campaignMessage = campaign?.message && campaign?.message !== "" ? campaign?.message : "";

  return (
    <Card
      className={`card-theme dashboard-campaigns-card border-0 shadow-sm p- rounded-4 ${className}`.trim()}
      // style={cardBackgroundStyle}
      style={{background: "linear-gradient(153deg, rgb(34 92 243 / 84%) 0%, rgb(52 30 112 / 87%) 100%)"}}
    >
      <Card.Header
        className="pt- px-1 pb-3 position-relative w-100"
        onClick={onHeaderClick}
        role={onHeaderClick ? "button" : undefined}
        style={onHeaderClick ? { cursor: "pointer" } : undefined}
      >
        <div className="d-flex align-items-center">
          <div className="flex-shrink-0 campaign-icon-wrapper rounded-circl rounded-3 overflow-hidden" style={{ width: 90, height: 90, outline: "8px solid rgba(255,255,255,0.12)" }}>
            <CustomImage
              src={campaignImage}
              alt={campaignName}
              wrapperClassName="card-img"
            />
          </div>
          <div className="ms-4 flex-grow-1">
            <SectionHeading size="" className="font-17 fw-b mb-3 text-white line-clamp">
              {campaignName}
            </SectionHeading>
            <div className="d-flex justify-content-start align-items-center">
              <div className="me-2 pe-1">
                <div style={{ width: 32, height: 32, background: "linear-gradient(140deg, rgb(102 152 234), rgb(40 111 198))" }} className="rounded-circle d-flex justify-content-center align-items-center">
                  <CustomIcon tag="star2" className="font-15 text-white" />
                </div>
              </div>
              <SectionHeading size="sm" className="fw-n text-white">
                <div className="fw-n font-11" style={{ color: "#bbd6ff" }}>Total Points</div>
                <span className="fw-sb font-18 lh-1">{totalPoints}</span>
              </SectionHeading>
              {/* {showNavigateButton ? (
                <Button
                  type="button"
                  className="btn-theme btn-s btn-lin btn-gray stretched-link rounded-circle fw-sb mt-0 position-absolute"
                  style={{
                    color: "#333",
                    textDecoration: "none",
                    background: "rgba(255,255,255,0.5)",
                    backdropFilter: "blur(5px)",
                    top: '-2px',
                    right: '-2px'
                  }}
                  tabIndex={-1}
                  aria-hidden
                >
                  <CustomIcon tag="arrow-right3" className="font-14" />
                </Button>
              ) : null} */}
            </div>
            
            
          </div>
        </div>
      </Card.Header>

      <Card.Footer className="border- w-100 px-0 p-0 overflow-hidden">
        <Row xs={3} className="pt-0 g-0">
          {CAMPAIGN_RANK_BLOCKS.map((block) => {
            const { className: rankClassName, style } = getCampaignRankBlockAppearance(
              campaign,
              block
            );
            const iconWrapperStyle = getCampaignRankIconStyle(block);
            return (
              <Col key={block.rankType}>
                <button
                  type="button"
                  className={`${rankClassName} dashboard-campaign-rank-hit rounded- p-2 pt-4 pb-3 text-center h-100 w-100${style?.border ? "" : " border-0"}`}
                  style={style}
                  onClick={(e) => {
                    e.stopPropagation();
                    onRankClick?.(block.rankType);
                  }}
                  disabled={!onRankClick}
                  aria-label={`View ${block.label} leaderboard`}
                >
                  <div
                    style={iconWrapperStyle ?? undefined}
                    className="rounded-3 d-flex justify-content-center align-items-center campaign-rank-icon-wrap"
                  >
                    <CustomIcon
                      tag={getCampaignRankIconTag(block)}
                      className="font-14 text-white"
                    />
                  </div>
                  <div className="extra-info-card-count mb-1">
                    {readCampaignRankDisplay(campaign, block)}
                  </div>
                  <div className="extra-info-card-title mb-0">{block.label}</div>
                </button>
              </Col>
            );
          })}
          {/* Keep up the amazing work! */}
          {campaignMessage && (
            <Col xs={12} className="text-center p-1 py-2" style={{ backdropFilter: "blur(5px)" }}><SectionHeading size="" className="fw-n font-10"><CustomIcon tag="insights7" className="font-13 text-white me-1"/> <span style={{ color: "rgb(255 254 246)" }}>{campaignMessage}</span></SectionHeading></Col>
          )}
        </Row>
      </Card.Footer>
    </Card>
  );
}

export default CampaignSummaryCard;