"use client";

import type { ReactNode } from "react";
import Image from "next/image";
import { HelpCircle } from "react-feather";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Legend,
} from "recharts";

import DateRangeFilter from "@/components/DateRangeFilter";
import GlobalLoadingOverlay from "@/components/ui/GlobalLoadingOverlay";
import type {
  AnalyticsCard,
  DashboardData,
  DateRange,
} from "@/components/dashboard/types";

interface CreatorDashboardProps {
  modelTabs?: ReactNode;
  safeData: DashboardData;
  isLoading: boolean;
  isFetching: boolean;
  isError: boolean;
  dateRange: DateRange;
  onApplyDateRange: (range: DateRange) => void;
  analyticsCards: AnalyticsCard[];
  showManagedByAgency: boolean;
  agencyName?: string;
  formatCurrency: (num: number) => string;
  /** CPA tab only — tighter 4-card layout so values like "2(tentative)" fit. */
  isCpaDashboard?: boolean;
}

export default function CreatorDashboard({
  modelTabs,
  safeData,
  isLoading,
  isFetching,
  isError,
  dateRange,
  onApplyDateRange,
  analyticsCards,
  showManagedByAgency,
  agencyName,
  formatCurrency,
  isCpaDashboard = false,
}: CreatorDashboardProps) {
  const skeleton = isLoading ? "placeholder-glow" : "";
  const analyticsGridClassName = isCpaDashboard
    ? "row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-2 g-xl-3 mb-2 dashboard-analytics-cpa"
    : analyticsCards.length === 3
      ? "row row-cols-1 row-cols-md-2 row-cols-xl-3 g-lg-2 g-xl-3 mb-2"
      : "row row-cols-1 row-cols-md-2 row-cols-lg-4 g-lg-2 g-xl-3 mb-2";

  return (
    <div className="pcoded-main-container webContent">
      <GlobalLoadingOverlay show={isLoading || isFetching} />
      <div className="pcoded-content">
        {modelTabs}
        <div className="row align-items-center">
          <div className="col-md-6 col-12 text-md-start text-center mb-0">
            <h3 className="text-xl fw-500 mb-1">Dashboard</h3>
            <p className={`mb-0 text-18 ${skeleton}`}>
              {new Date().toLocaleString("en-US", {
                month: "short",
                year: "numeric",
              })}{" "}
              <span className="fw-semibold mb-0 text-18 earn-text">
                {isLoading ? (
                  <span className="placeholder col-3"></span>
                ) : (
                  formatCurrency(safeData.currentMonthRevenue || 0)
                )}
              </span>
              <button
                type="button"
                className="no-bg-btn"
                data-bs-toggle="popover"
                data-bs-placement="right"
                data-bs-content="This is your revenue for the current month."
              >
                &nbsp; <HelpCircle className="earn-info" />
              </button>
            </p>

            {isError && (
              <p className="text-danger mt-1 mb-0">
                Unable to load dashboard data. Please try again.
              </p>
            )}
          </div>
          {showManagedByAgency && (
            <div className="col-md-6 col-12">
              <div className="w-fit-content bg-gradient1 text-sm color-white rounded-pill py-2 px-3 m-0 mx-auto me-md-0">
                Managed by {agencyName || "Agency"}
              </div>
            </div>
          )}
        </div>

        <div className="bg-color-white shadow-none rounded-4 my-4 px-3 py-4">
          <div className="border-bottom pb-4 mb-4">
            <div className="row align-items-center">
              <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 text-md-start text-center mb-md-0 mb-2">
                <h3 className="thirdHeading text-capitalize mb-0">
                  Analytics overview
                </h3>
              </div>

              <div className="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 d-flex justify-content-md-end justify-content-center mb-0">
                <div id="reportrange" className="btn-first small-btn">
                  <span className="mb-0 text-white">
                    <DateRangeFilter
                      initialRange={dateRange}
                      onApply={(range) => onApplyDateRange(range)}
                    />
                  </span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="feather feather-chevron-down"
                  >
                    <polyline points="6 9 12 15 18 9" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

          <div className={analyticsGridClassName}>
            {analyticsCards.map((card, index) => (
              <div key={index} className="col d-lg-flex align-items-stretch">
                <div
                  className={`card ${card.bg} shadow-none border rounded-4 p-0 mb-3 h-100 w-100`}
                  style={{ minHeight: isCpaDashboard ? 132 : 150 }}
                >
                  <div
                    className={`card-body text-lg-start text-md-center text-center p-3 ${skeleton} d-flex flex-column h-100`}
                  >
                    <div className="row">
                      <div className="col-12">
                        <h5 className="color-content fw-normal mt-0">
                          {isLoading ? (
                            <span className="placeholder col-6"></span>
                          ) : (
                            card.title
                          )}
                        </h5>
                      </div>
                    </div>

                    <div className="row align-items-center flex-grow-1">
                      <div
                        className={
                          isCpaDashboard
                            ? "col-lg-8 col-md-12 col-12 min-w-0"
                            : "col-lg-6 col-md-12 col-12"
                        }
                      >
                        <h3
                          className={`my-2 py-1${
                            isCpaDashboard ? " dashboard-cpa-metric-value" : ""
                          }`}
                        >
                          {isLoading ? (
                            <span className="placeholder col-6"></span>
                          ) : (
                            card.value
                          )}
                        </h3>
                      </div>
                      <div
                        className={
                          isCpaDashboard
                            ? "col-lg-4 col-md-12 col-12 text-center"
                            : "col-lg-6 col-md-12 col-12 text-center"
                        }
                      >
                        <Image
                          src={card.img}
                          className="mx-auto d-block"
                          style={{
                            height: isCpaDashboard ? 44 : 56,
                            width: "auto",
                            objectFit: "contain",
                          }}
                          width={isCpaDashboard ? 80 : 96}
                          height={isCpaDashboard ? 44 : 56}
                          unoptimized
                          alt=""
                        />
                      </div>
                    </div>

                    <div className="row">
                      <div className="col-12">
                        <p className="mb-0 color-content">
                          {isLoading ? (
                            <span className="placeholder col-5"></span>
                          ) : (
                            <>
                              <span
                                className={`text-${card.changeType} me-2 fw-600`}
                              >
                                {card.icon && (
                                  <i
                                    className={`fa ${card.icon} text-${card.changeType}`}
                                  ></i>
                                )}{" "}
                                {card.percent}
                              </span>
                              <span className="text-nowrap">
                                vs previous period
                              </span>
                            </>
                          )}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <hr />

          <h3 className="text-18 fw-medium mt-0 mb-3">Product Statistics</h3>

          <div className="row mb-0">
            <div className="col-12">
              <div className="card bg-light shadow-none border rounded-4 mb-0">
                <div className="card-body">
                  <div className="row">
                    <div className="col-12">
                      {isLoading ? (
                        <div className="placeholder-glow">
                          <span
                            className="placeholder col-12"
                            style={{ height: 200 }}
                          ></span>
                        </div>
                      ) : safeData.graph && safeData.graph.length > 0 ? (
                        <div style={{ width: "100%", height: 250 }}>
                          <ResponsiveContainer>
                            <LineChart data={safeData.graph}>
                              <XAxis dataKey="date" />
                              <YAxis />
                              <Tooltip />
                              <Legend />

                              <Line
                                type="monotone"
                                dataKey="clicks"
                                name="Clicks"
                                strokeWidth={2}
                              />
                              <Line
                                type="monotone"
                                dataKey="revenue"
                                name="Revenue"
                                strokeWidth={2}
                              />
                              {/* <Line
                                type="monotone"
                                dataKey="conversions"
                                strokeWidth={2}
                              /> */}
                            </LineChart>
                          </ResponsiveContainer>
                        </div>
                      ) : (
                        <div
                          className="d-flex flex-column justify-content-center align-items-center text-center"
                          style={{ height: 250 }}
                        >
                          <p className="mb-1 fw-semibold text-muted">
                            No data available
                          </p>
                          <p
                            className="mb-0 text-muted"
                            style={{ fontSize: "14px" }}
                          >
                            Try selecting a different date range
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}