"use client";

import { useState } from "react";
import { useTranslation } from "@turbostarter/i18n";
import { cn } from "@turbostarter/ui";

import { CtaButton } from "~/modules/marketing/layout/cta-button";
import {
  Section,
  SectionBadge,
  SectionDescription,
  SectionHeader,
  SectionTitle,
} from "~/modules/marketing/layout/section";

// ---------------------------------------------------------------------------
// Demo data (hardcoded for "Bistro El Sol")
// ---------------------------------------------------------------------------

const SCORE = 83;
const SCORE_COLOR = "#22c55e";

const PILLARS = [
  { key: "ratingQuality", value: 88, color: "#4285F4" },
  { key: "sentimentDepth", value: 76, color: "#8b5cf6" },
  { key: "volume", value: 91, color: "#22c55e" },
  { key: "momentum", value: 72, color: "#f59e0b" },
  { key: "intensity", value: 85, color: "#3b82f6" },
] as const;

const DOMAINS = [
  { key: "operations", color: "#3b82f6", value: 78 },
  { key: "product", color: "#22c55e", value: 85 },
  { key: "journey", color: "#f59e0b", value: 62 },
  { key: "environment", color: "#8b5cf6", value: 71 },
  { key: "value", color: "#f43f5e", value: 68 },
  { key: "management", color: "#6b7280", value: 74 },
] as const;

const SEVERITY_COLORS: Record<string, string> = {
  Critical: "#ef4444",
  High: "#f97316",
  Medium: "#f59e0b",
};

const EFFORT_COLORS: Record<string, string> = {
  Low: "#22c55e",
  Medium: "#f59e0b",
  High: "#ef4444",
};
const IMPACT_COLORS: Record<string, string> = {
  Low: "#6b7280",
  Medium: "#f59e0b",
  High: "#22c55e",
};

const DOMAIN_COLORS: Record<string, string> = {
  Operations: "#3b82f6",
  Product: "#22c55e",
  Environment: "#8b5cf6",
};

const TABS = ["score", "domains", "issues", "actions"] as const;
type Tab = (typeof TABS)[number];

// ---------------------------------------------------------------------------
// Score Tab
// ---------------------------------------------------------------------------

function ScoreTab() {
  const { t } = useTranslation("marketing");
  const radius = 80;
  const stroke = 12;
  const cx = 100;
  const cy = 100;
  const circumference = Math.PI * radius;
  const offset = circumference - (SCORE / 100) * circumference;

  return (
    <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-10">
      {/* Left: Gauge + band */}
      <div className="flex shrink-0 flex-col items-center gap-2">
        <span className="text-muted-foreground text-xs tracking-wide uppercase">
          {t("reportPreview.demo.businessName")}
        </span>

        <div className="relative" style={{ width: 200, height: 120 }}>
          <svg
            width="200"
            height="120"
            viewBox="0 0 200 120"
            className="overflow-visible"
          >
            <circle
              cx={cx}
              cy={cy}
              r={radius}
              fill="none"
              stroke="currentColor"
              className="text-muted/20"
              strokeWidth={stroke}
              strokeDasharray={`${circumference} ${circumference}`}
              strokeDashoffset={0}
              strokeLinecap="round"
              transform={`rotate(180 ${cx} ${cy})`}
            />
            <circle
              cx={cx}
              cy={cy}
              r={radius}
              fill="none"
              stroke={SCORE_COLOR}
              strokeWidth={stroke}
              strokeDasharray={`${circumference} ${circumference}`}
              strokeDashoffset={offset}
              strokeLinecap="round"
              transform={`rotate(180 ${cx} ${cy})`}
              className="transition-all duration-1000 ease-out"
            />
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
            <span
              className="text-6xl font-bold tabular-nums"
              style={{ color: SCORE_COLOR }}
            >
              {SCORE}
            </span>
            <span className="text-muted-foreground text-xs tracking-wide">
              {t("reportPreview.demo.scoreLabel")}
            </span>
          </div>
        </div>

        <div className="w-48">
          <div className="flex h-2 overflow-hidden rounded-full">
            <div style={{ width: "10%", backgroundColor: "#ef4444" }} />
            <div style={{ width: "15%", backgroundColor: "#f97316" }} />
            <div style={{ width: "15%", backgroundColor: "#f59e0b" }} />
            <div style={{ width: "20%", backgroundColor: "#22c55e" }} />
            <div style={{ width: "40%", backgroundColor: "#059669" }} />
          </div>
          <div className="relative h-2.5">
            <div
              className="absolute top-0"
              style={{
                left: `${SCORE}%`,
                transform: "translateX(-50%)",
                width: 0,
                height: 0,
                borderLeft: "5px solid transparent",
                borderRight: "5px solid transparent",
                borderBottom: `6px solid ${SCORE_COLOR}`,
              }}
            />
          </div>
        </div>
      </div>

      {/* Right: Pillar bars */}
      <div className="flex w-full flex-1 flex-col gap-3">
        {PILLARS.map((p) => (
          <div key={p.key} className="flex items-center gap-3">
            <span className="text-muted-foreground w-24 shrink-0 text-right text-xs sm:w-32 sm:text-sm">
              {t(`reportPreview.demo.pillars.${p.key}` as const)}
            </span>
            <div className="bg-muted/30 relative h-2.5 flex-1 overflow-hidden rounded-full">
              <div
                className="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out"
                style={{
                  width: `${p.value}%`,
                  backgroundColor: p.color,
                }}
              />
            </div>
            <span className="w-10 text-right text-sm font-semibold tabular-nums">
              {p.value}%
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Domains Tab
// ---------------------------------------------------------------------------

function DomainsTab() {
  const { t } = useTranslation("marketing");

  return (
    <div className="flex flex-col gap-3.5">
      {DOMAINS.map((d) => (
        <div key={d.key} className="flex items-center gap-3">
          <span
            className="size-2.5 shrink-0 rounded-full"
            style={{ backgroundColor: d.color }}
          />
          <span className="text-foreground w-32 shrink-0 text-sm">
            {t(`reportPreview.demo.domains.${d.key}` as const)}
          </span>
          <div className="bg-muted/30 relative h-2.5 flex-1 overflow-hidden rounded-full">
            <div
              className="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out"
              style={{ width: `${d.value}%`, backgroundColor: d.color }}
            />
          </div>
          <span
            className="w-9 text-right text-sm font-semibold tabular-nums"
            style={{ color: d.color }}
          >
            {d.value}%
          </span>
        </div>
      ))}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Issues Tab
// ---------------------------------------------------------------------------

function IssuesTab() {
  const { t } = useTranslation("marketing");

  const issues = [
    { key: "issue1" as const, idx: 0 },
    { key: "issue2" as const, idx: 1 },
    { key: "issue3" as const, idx: 2 },
  ];

  return (
    <div className="flex flex-col gap-4">
      {issues.map(({ key: issueKey, idx }) => {
        const severity = t(`reportPreview.demo.issues.${issueKey}.severity` as const);
        const severityColor = SEVERITY_COLORS[severity] ?? "#f59e0b";
        const domain = t(`reportPreview.demo.issues.${issueKey}.domain` as const);
        const domainColor = DOMAIN_COLORS[domain] ?? "#6b7280";

        return (
          <div
            key={issueKey}
            className="bg-muted/20 flex gap-3 rounded-lg border p-3"
          >
            <div
              className="flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
              style={{ backgroundColor: severityColor }}
            >
              {idx + 1}
            </div>

            <div className="min-w-0 flex-1">
              <p className="text-foreground text-sm font-semibold leading-tight">
                {t(`reportPreview.demo.issues.${issueKey}.title` as const)}
              </p>

              <div className="mt-1.5 flex flex-wrap items-center gap-2">
                <span className="inline-flex items-center gap-1 text-xs">
                  <span
                    className="inline-block size-2 rounded-full"
                    style={{ backgroundColor: domainColor }}
                  />
                  <span className="text-muted-foreground">{domain}</span>
                </span>
                <span className="text-muted-foreground text-xs">
                  {t(`reportPreview.demo.issues.${issueKey}.complaints` as const)}
                </span>
                <span
                  className="rounded px-1.5 py-0.5 text-[10px] font-semibold text-white"
                  style={{ backgroundColor: severityColor }}
                >
                  {severity}
                </span>
              </div>

              <div
                className="mt-2 border-l-2 pl-3"
                style={{ borderColor: severityColor }}
              >
                <p className="text-muted-foreground text-xs italic leading-relaxed">
                  {t(`reportPreview.demo.issues.${issueKey}.quote` as const)}
                </p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Actions Tab
// ---------------------------------------------------------------------------

function ActionsTab() {
  const { t } = useTranslation("marketing");

  const actions = [
    { key: "action1" as const, idx: 0 },
    { key: "action2" as const, idx: 1 },
    { key: "action3" as const, idx: 2 },
  ];

  return (
    <div className="flex flex-col gap-4">
      {actions.map(({ key: actionKey, idx }) => {
        const effort = t(`reportPreview.demo.actions.${actionKey}.effort` as const);
        const impact = t(`reportPreview.demo.actions.${actionKey}.impact` as const);

        return (
          <div
            key={actionKey}
            className="bg-muted/20 flex gap-3 rounded-lg border p-3"
          >
            <div className="bg-primary/10 text-primary flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-bold">
              {idx + 1}
            </div>

            <div className="min-w-0 flex-1">
              <p className="text-foreground text-sm font-semibold leading-tight">
                {t(`reportPreview.demo.actions.${actionKey}.title` as const)}
              </p>

              <div className="mt-2 flex flex-wrap gap-2">
                <span
                  className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold"
                  style={{
                    backgroundColor: `${EFFORT_COLORS[effort] ?? "#f59e0b"}18`,
                    color: EFFORT_COLORS[effort] ?? "#f59e0b",
                  }}
                >
                  {effort} effort
                </span>
                <span
                  className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold"
                  style={{
                    backgroundColor: `${IMPACT_COLORS[impact] ?? "#f59e0b"}18`,
                    color: IMPACT_COLORS[impact] ?? "#f59e0b",
                  }}
                >
                  {impact} impact
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main component
// ---------------------------------------------------------------------------

export const ReportPreview = () => {
  const [activeTab, setActiveTab] = useState<Tab>("score");
  const { t } = useTranslation("marketing");

  return (
    <Section id="report-preview">
      <SectionHeader>
        <SectionBadge>{t("reportPreview.label")}</SectionBadge>
        <SectionTitle>{t("reportPreview.title")}</SectionTitle>
        <SectionDescription>
          {t("reportPreview.description")}
        </SectionDescription>
      </SectionHeader>

      <div className="relative w-full max-w-3xl">
        {/* Ambient glow */}
        <div className="pointer-events-none absolute inset-0 -inset-x-20 -bottom-10">
          <div className="absolute top-1/2 left-1/2 h-[400px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
          <div className="absolute top-1/3 left-1/3 h-[250px] w-[250px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
        </div>

        {/* Card */}
        <div className="bg-background relative overflow-hidden rounded-2xl border shadow-sm">
          {/* Tab bar */}
          <div className="flex border-b">
            {TABS.map((tab) => (
              <button
                key={tab}
                type="button"
                onClick={() => setActiveTab(tab)}
                className={cn(
                  "text-muted-foreground hover:text-foreground relative flex-1 px-2 py-3 text-xs font-medium transition-colors sm:px-4 sm:text-sm",
                  activeTab === tab && "text-foreground",
                )}
              >
                {t(`reportPreview.tabs.${tab}` as const)}
                {activeTab === tab && (
                  <span
                    className="absolute inset-x-0 bottom-0 h-0.5"
                    style={{ backgroundColor: "#4285F4" }}
                  />
                )}
              </button>
            ))}
          </div>

          {/* Tab content */}
          <div className="p-6 sm:p-8">
            {activeTab === "score" && <ScoreTab />}
            {activeTab === "domains" && <DomainsTab />}
            {activeTab === "issues" && <IssuesTab />}
            {activeTab === "actions" && <ActionsTab />}
          </div>
        </div>
      </div>

      <CtaButton>{t("reportPreview.cta")}</CtaButton>
    </Section>
  );
};
