import React, { useState } from "react";

type UsageStatsByType = {
  color: number;
  button: number;
  [key: string]: number | undefined;
};

type UsageStats = {
  terms_total: number;
  attribute_taxonomies_configured: number;
  products_with_overrides: number;
  by_type: UsageStatsByType;
};

export interface GettingStartedTabProps {
  attributesAdminUrl: string;
  productsAdminUrl: string;
  usageStats: UsageStats;
  heroDescription?: React.ReactNode | null;
  swatchTypeCardsExtras?: React.ReactNode;
}

type ExpandedStatsCard = "swatches" | "attributes" | "products" | null;

function StatsCard({
  title,
  value,
  description,
  accentClass,
  icon,
  expanded,
  onToggle,
  children,
}: {
  title: string;
  value: string;
  description: string;
  accentClass: string;
  icon: React.ReactNode;
  expanded: boolean;
  onToggle: () => void;
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <div className="b3-wvs-space-y-2">
      <article
        className={`b3-wvs-group b3-wvs-cursor-pointer b3-wvs-rounded-xl b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-white b3-wvs-p-4 sm:b3-wvs-p-6 b3-wvs-transition-all hover:b3-wvs-shadow-md ${accentClass}`}
        onClick={onToggle}
      >
        <div className="b3-wvs-flex b3-wvs-items-start b3-wvs-justify-between">
          <div>
            <p className="b3-wvs-text-xs b3-wvs-font-medium b3-wvs-uppercase b3-wvs-tracking-wider b3-wvs-text-slate-500">
              {title}
            </p>
            <p className="b3-wvs-mt-2 b3-wvs-text-3xl sm:b3-wvs-text-4xl b3-wvs-font-bold b3-wvs-text-slate-900">
              {value}
            </p>
          </div>
          <div className="b3-wvs-rounded-lg b3-wvs-p-3">{icon}</div>
        </div>
        <div className="b3-wvs-mt-3 b3-wvs-flex b3-wvs-items-center b3-wvs-justify-between">
          <p className="b3-wvs-text-xs b3-wvs-text-slate-500">{description}</p>
          <svg
            className={`b3-wvs-h-4 b3-wvs-w-4 b3-wvs-text-slate-400 b3-wvs-transition-transform ${expanded ? "b3-wvs-rotate-180" : ""}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 9l-7 7-7-7"
            />
          </svg>
        </div>
      </article>
      {expanded ? children : null}
    </div>
  );
}

export function GettingStartedTab({
  attributesAdminUrl,
  productsAdminUrl,
  usageStats,
  heroDescription,
  swatchTypeCardsExtras,
}: GettingStartedTabProps): React.ReactElement {
  const [expandedStatsCard, setExpandedStatsCard] =
    useState<ExpandedStatsCard>(null);
  const productOverviewUrl = "https://b3.digital/software/products/b3-swatches";
  const resolvedHeroDescription =
    heroDescription === undefined
      ? "Transform your shop with color and button swatches. Use the navigation menu to explore the settings, or jump right in with the quick actions below."
      : heroDescription;

  return (
    <div className="b3-wvs-space-y-6">
      <section className="b3-wvs-rounded-2xl b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-gradient-to-br b3-wvs-from-slate-50 b3-wvs-via-white b3-wvs-to-slate-100 b3-wvs-p-5 sm:b3-wvs-p-8">
        <div className="b3-wvs-max-w-3xl">
          <h3 className="b3-wvs-text-2xl sm:b3-wvs-text-3xl b3-wvs-font-bold b3-wvs-text-slate-900">
            Welcome to B3 Swatches
          </h3>
          {resolvedHeroDescription ? (
            <p className="b3-wvs-mt-3 b3-wvs-text-base b3-wvs-leading-7 b3-wvs-text-slate-600">
              {resolvedHeroDescription}
            </p>
          ) : null}
          <div className="b3-wvs-mt-6 b3-wvs-flex b3-wvs-flex-wrap b3-wvs-gap-3">
            <a
              href={attributesAdminUrl}
              className="b3-wvs-action-link is-primary"
            >
              Manage Attributes
            </a>
            <a href={productsAdminUrl} className="b3-wvs-action-link">
              View Products
            </a>
            <a
              href={productOverviewUrl}
              className="b3-wvs-action-link is-upsell"
              target="_blank"
              rel="noreferrer"
            >
              <svg
                className="b3-wvs-h-4 b3-wvs-w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.8}
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M7.5 16.5 16.5 7.5m0 0h-6m6 0v6"
                />
              </svg>
              More Swatch Styles
            </a>
          </div>
        </div>
      </section>

      {usageStats.terms_total > 0 ? (
        <section className="b3-wvs-space-y-4">
          <h4 className="b3-wvs-text-sm b3-wvs-font-semibold b3-wvs-uppercase b3-wvs-tracking-wide b3-wvs-text-slate-500">
            Plugin Usage
          </h4>

          <div className="b3-wvs-grid b3-wvs-gap-4 sm:b3-wvs-grid-cols-2 md:b3-wvs-grid-cols-3">
            <StatsCard
              title="Total Swatches"
              value={usageStats.terms_total.toLocaleString()}
              description="Swatches currently used across variable products"
              accentClass="hover:b3-wvs-border-indigo-300"
              expanded={expandedStatsCard === "swatches"}
              onToggle={() =>
                setExpandedStatsCard(
                  expandedStatsCard === "swatches" ? null : "swatches",
                )
              }
              icon={
                <svg
                  className="b3-wvs-h-6 b3-wvs-w-6 b3-wvs-text-indigo-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
                  />
                </svg>
              }
            >
              <div className="b3-wvs-rounded-lg b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-slate-50 b3-wvs-p-4">
                <p className="b3-wvs-text-xs b3-wvs-font-semibold b3-wvs-uppercase b3-wvs-tracking-wider b3-wvs-text-slate-600 b3-wvs-mb-3">
                  Breakdown by Type in Use
                </p>
                <div className="b3-wvs-space-y-2">
                  {usageStats.by_type.color > 0 ? (
                    <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-justify-between b3-wvs-text-sm">
                      <span className="b3-wvs-text-slate-600">
                        Color Swatches
                      </span>
                      <span className="b3-wvs-font-semibold b3-wvs-text-slate-900">
                        {usageStats.by_type.color}
                      </span>
                    </div>
                  ) : null}
                  {usageStats.by_type.button > 0 ? (
                    <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-justify-between b3-wvs-text-sm">
                      <span className="b3-wvs-text-slate-600">
                        Button Swatches
                      </span>
                      <span className="b3-wvs-font-semibold b3-wvs-text-slate-900">
                        {usageStats.by_type.button}
                      </span>
                    </div>
                  ) : null}
                </div>
              </div>
            </StatsCard>

            <StatsCard
              title="Attributes"
              value={usageStats.attribute_taxonomies_configured.toLocaleString()}
              description="Attribute taxonomies currently using swatches"
              accentClass="hover:b3-wvs-border-emerald-300"
              expanded={expandedStatsCard === "attributes"}
              onToggle={() =>
                setExpandedStatsCard(
                  expandedStatsCard === "attributes" ? null : "attributes",
                )
              }
              icon={
                <svg
                  className="b3-wvs-h-6 b3-wvs-w-6 b3-wvs-text-emerald-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 10h16M4 14h16M4 18h16"
                  />
                </svg>
              }
            >
              <div className="b3-wvs-rounded-lg b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-slate-50 b3-wvs-p-4">
                <p className="b3-wvs-text-xs b3-wvs-font-semibold b3-wvs-uppercase b3-wvs-tracking-wider b3-wvs-text-slate-600 b3-wvs-mb-3">
                  Configured Attributes
                </p>
                <div className="b3-wvs-space-y-2">
                  <p className="b3-wvs-text-sm b3-wvs-text-slate-600">
                    You have {usageStats.attribute_taxonomies_configured} global{" "}
                    {usageStats.attribute_taxonomies_configured === 1
                      ? "attribute"
                      : "attributes"}{" "}
                    currently using swatches on variable products.
                  </p>
                  <a
                    href={attributesAdminUrl}
                    className="b3-wvs-inline-flex b3-wvs-items-center b3-wvs-text-xs b3-wvs-font-medium b3-wvs-text-indigo-600 hover:b3-wvs-text-indigo-700"
                  >
                    Manage Attributes →
                  </a>
                </div>
              </div>
            </StatsCard>

            <StatsCard
              title="Products"
              value={usageStats.products_with_overrides.toLocaleString()}
              description="Products with custom overrides"
              accentClass="hover:b3-wvs-border-amber-300"
              expanded={expandedStatsCard === "products"}
              onToggle={() =>
                setExpandedStatsCard(
                  expandedStatsCard === "products" ? null : "products",
                )
              }
              icon={
                <svg
                  className="b3-wvs-h-6 b3-wvs-w-6 b3-wvs-text-amber-600"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
                  />
                </svg>
              }
            >
              <div className="b3-wvs-rounded-lg b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-slate-50 b3-wvs-p-4">
                <p className="b3-wvs-text-xs b3-wvs-font-semibold b3-wvs-uppercase b3-wvs-tracking-wider b3-wvs-text-slate-600 b3-wvs-mb-3">
                  Product Customizations
                </p>
                <div className="b3-wvs-space-y-2">
                  <p className="b3-wvs-text-sm b3-wvs-text-slate-600">
                    {usageStats.products_with_overrides}{" "}
                    {usageStats.products_with_overrides === 1
                      ? "product has"
                      : "products have"}{" "}
                    custom swatch styles that override the global defaults.
                  </p>
                  <a
                    href={productsAdminUrl}
                    className="b3-wvs-inline-flex b3-wvs-items-center b3-wvs-text-xs b3-wvs-font-medium b3-wvs-text-indigo-600 hover:b3-wvs-text-indigo-700"
                  >
                    View Products →
                  </a>
                </div>
              </div>
            </StatsCard>
          </div>

          <div className="b3-wvs-rounded-xl b3-wvs-border b3-wvs-border-slate-200 b3-wvs-bg-white b3-wvs-p-6">
            <h5 className="b3-wvs-text-sm b3-wvs-font-semibold b3-wvs-text-slate-900">
              Swatch Types
            </h5>
            <div className="b3-wvs-mt-4 b3-wvs-grid b3-wvs-gap-4 sm:b3-wvs-grid-cols-2 lg:b3-wvs-grid-cols-5">
              <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-gap-3 b3-wvs-rounded-lg b3-wvs-bg-gradient-to-br b3-wvs-from-blue-50 b3-wvs-to-blue-100/50 b3-wvs-p-4">
                <div className="b3-wvs-flex b3-wvs-h-10 b3-wvs-w-10 b3-wvs-items-center b3-wvs-justify-center b3-wvs-rounded-full b3-wvs-bg-blue-500">
                  <svg
                    className="b3-wvs-h-5 b3-wvs-w-5 b3-wvs-text-white"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
                    <circle cx="10" cy="10" r="8" />
                  </svg>
                </div>
                <div>
                  <p className="b3-wvs-text-xs b3-wvs-font-medium b3-wvs-text-slate-600">
                    Color
                  </p>
                  <p className="b3-wvs-text-lg b3-wvs-font-bold b3-wvs-text-slate-900">
                    {usageStats.by_type.color.toLocaleString()}
                  </p>
                </div>
              </div>

              <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-gap-3 b3-wvs-rounded-lg b3-wvs-bg-gradient-to-br b3-wvs-from-teal-50 b3-wvs-to-teal-100/50 b3-wvs-p-4">
                <div className="b3-wvs-flex b3-wvs-h-10 b3-wvs-w-10 b3-wvs-items-center b3-wvs-justify-center b3-wvs-rounded-full b3-wvs-bg-teal-500">
                  <svg
                    className="b3-wvs-h-5 b3-wvs-w-5 b3-wvs-text-white"
                    fill="none"
                    viewBox="0 0 20 20"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <rect x="4" y="6" width="12" height="8" rx="1" />
                  </svg>
                </div>
                <div>
                  <p className="b3-wvs-text-xs b3-wvs-font-medium b3-wvs-text-slate-600">
                    Button
                  </p>
                  <p className="b3-wvs-text-lg b3-wvs-font-bold b3-wvs-text-slate-900">
                    {usageStats.by_type.button.toLocaleString()}
                  </p>
                </div>
              </div>
              {swatchTypeCardsExtras}
            </div>
          </div>
        </section>
      ) : null}

      <section className="b3-wvs-grid b3-wvs-gap-4 sm:b3-wvs-grid-cols-2 md:b3-wvs-grid-cols-3">
        <article className="b3-wvs-step-card">
          <span className="b3-wvs-step-index">1</span>
          <h4 className="b3-wvs-step-title">Create Your Product Attributes</h4>
          <p className="b3-wvs-step-copy">
            Navigate to{" "}
            <a
              href={attributesAdminUrl}
              className="b3-wvs-font-semibold b3-wvs-text-indigo-600 hover:b3-wvs-text-indigo-700 hover:b3-wvs-underline"
            >
              Products → Attributes
            </a>{" "}
            in WordPress admin to create <strong>global attributes</strong> like
            "Color" or "Size", then add terms such as "Red", "Blue", "Small", or
            "Large". You can also use <strong>per-product attributes</strong>{" "}
            directly inside a product.
          </p>
        </article>
        <article className="b3-wvs-step-card">
          <span className="b3-wvs-step-index">2</span>
          <h4 className="b3-wvs-step-title">Configure Your Swatches</h4>
          <p className="b3-wvs-step-copy">
            Start with <strong>General</strong> for the base layout and sizing,
            use <strong>Chips</strong> to set the selected color, adjust{" "}
            <strong>Typography</strong> for font size and color, and use{" "}
            <strong>Tooltips</strong> to enable or disable hover labels. The
            live preview updates as you make changes.
          </p>
        </article>
        <article className="b3-wvs-step-card">
          <span className="b3-wvs-step-index">3</span>
          <h4 className="b3-wvs-step-title">Apply to Products & Test</h4>
          <p className="b3-wvs-step-copy">
            Edit any variable product, assign your configured attributes on the{" "}
            <strong>Attributes</strong> tab, build variations on the{" "}
            <strong>Variations</strong> tab, then save and preview the product
            page to confirm your swatches are working as expected.
          </p>
        </article>
      </section>
    </div>
  );
}
