"use client";

import { useTranslation } from "@turbostarter/i18n";

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

// ---------------------------------------------------------------------------
// Valence & domain color maps (from report engine)
// ---------------------------------------------------------------------------

const VALENCE = {
  "+": { bg: "#DCFCE7", text: "#166534", border: "#22c55e" },
  "-": { bg: "#FEE2E2", text: "#991B1B", border: "#ef4444" },
  "±": { bg: "#FEF3C7", text: "#92400E", border: "#f59e0b" },
  "0": { bg: "#F3F4F6", text: "#6B7280", border: "#9ca3af" },
} as const;

const DOMAIN_COLORS: Record<string, string> = {
  Operations: "#3b82f6",
  Product: "#22c55e",
  Journey: "#f59e0b",
  Environment: "#8b5cf6",
  Value: "#f43f5e",
  Management: "#6b7280",
};

// ---------------------------------------------------------------------------
// Demo review data — hardcoded annotated reviews for "Bistro El Sol"
// ---------------------------------------------------------------------------

type Valence = "+" | "-" | "±" | "0";

type Segment =
  | { type: "text"; content: string }
  | { type: "hl"; content: string; primitive: string; domain: string; valence: Valence };

interface DemoReview {
  author: string;
  rating: number;
  date: string;
  segments: Segment[];
}

const REVIEWS: DemoReview[] = [
  {
    author: "Elena R.",
    rating: 5,
    date: "Jan 2025",
    segments: [
      { type: "text", content: "The " },
      { type: "hl", content: "paella was absolutely incredible", primitive: "Food Quality", domain: "Product", valence: "+" },
      { type: "text", content: " — " },
      { type: "hl", content: "perfectly seasoned", primitive: "Taste", domain: "Product", valence: "+" },
      { type: "text", content: " and " },
      { type: "hl", content: "generous portions", primitive: "Portion Size", domain: "Value", valence: "+" },
      { type: "text", content: ". Our waiter " },
      { type: "hl", content: "Miguel was attentive", primitive: "Staff Attentiveness", domain: "Operations", valence: "+" },
      { type: "text", content: " and " },
      { type: "hl", content: "recommended the perfect wine pairing", primitive: "Recommendations", domain: "Operations", valence: "+" },
      { type: "text", content: ". Only downside was the " },
      { type: "hl", content: "25-minute wait for a table", primitive: "Wait Time", domain: "Journey", valence: "-" },
      { type: "text", content: " on a Friday night." },
    ],
  },
  {
    author: "James K.",
    rating: 3,
    date: "Dec 2024",
    segments: [
      { type: "hl", content: "Food quality is usually great", primitive: "Consistency", domain: "Product", valence: "±" },
      { type: "text", content: " but tonight the " },
      { type: "hl", content: "steak was overcooked", primitive: "Food Quality", domain: "Product", valence: "-" },
      { type: "text", content: " and the " },
      { type: "hl", content: "fries were cold", primitive: "Temperature", domain: "Product", valence: "-" },
      { type: "text", content: ". The " },
      { type: "hl", content: "terrace ambiance is lovely", primitive: "Ambiance", domain: "Environment", valence: "+" },
      { type: "text", content: " though, and " },
      { type: "hl", content: "prices are fair for the area", primitive: "Pricing", domain: "Value", valence: "+" },
      { type: "text", content: ". Would come back but hope for " },
      { type: "hl", content: "more consistency", primitive: "Consistency", domain: "Management", valence: "-" },
      { type: "text", content: "." },
    ],
  },
  {
    author: "Patricia M.",
    rating: 4,
    date: "Nov 2024",
    segments: [
      { type: "text", content: "We celebrated our anniversary here. The " },
      { type: "hl", content: "decoration is beautiful", primitive: "Decor", domain: "Environment", valence: "+" },
      { type: "text", content: " and the " },
      { type: "hl", content: "staff made us feel special", primitive: "Hospitality", domain: "Operations", valence: "+" },
      { type: "text", content: " with a complimentary dessert. " },
      { type: "hl", content: "Appetizers were outstanding", primitive: "Food Quality", domain: "Product", valence: "+" },
      { type: "text", content: " but the " },
      { type: "hl", content: "main course took 35 minutes", primitive: "Wait Time", domain: "Journey", valence: "-" },
      { type: "text", content: ". The " },
      { type: "hl", content: "bill was a bit steep", primitive: "Pricing", domain: "Value", valence: "-" },
      { type: "text", content: " for what we got. Still, a " },
      { type: "hl", content: "lovely evening overall", primitive: "Overall Experience", domain: "Management", valence: "+" },
      { type: "text", content: "." },
    ],
  },
];

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export const ReviewEvidence = () => {
  const { t } = useTranslation("marketing");

  return (
    <Section id="review-evidence">
      <SectionHeader>
        <SectionBadge>{t("reviewEvidence.label")}</SectionBadge>
        <SectionTitle>{t("reviewEvidence.title")}</SectionTitle>
        <SectionDescription>
          {t("reviewEvidence.description")}
        </SectionDescription>
      </SectionHeader>

      <div className="w-full max-w-3xl space-y-4">
        {REVIEWS.map((review) => (
          <div
            key={review.author}
            className="bg-background rounded-xl border p-5 shadow-sm sm:p-6"
          >
            {/* Header — author · stars · date */}
            <div className="mb-3 flex items-center gap-2.5">
              <span className="text-foreground text-sm font-semibold">
                {review.author}
              </span>
              <span className="text-xs tracking-wider" aria-label={`${review.rating} out of 5 stars`}>
                {Array.from({ length: 5 }, (_, i) => (
                  <span
                    key={i}
                    style={{ color: i < review.rating ? "#FBBC05" : "#D1D5DB" }}
                  >
                    ★
                  </span>
                ))}
              </span>
              <span className="text-muted-foreground text-xs">
                {review.date}
              </span>
            </div>

            {/* Highlighted review text */}
            <p className="text-[15px] leading-[1.75]">
              {review.segments.map((seg, i) =>
                seg.type === "text" ? (
                  <span key={i} className="text-muted-foreground">
                    {seg.content}
                  </span>
                ) : (
                  <span
                    key={i}
                    title={`${seg.primitive} (${seg.valence})`}
                    className="inline rounded-sm px-0.5 font-medium"
                    style={{
                      backgroundColor: VALENCE[seg.valence].bg,
                      borderBottom: `2px solid ${VALENCE[seg.valence].border}`,
                      color: VALENCE[seg.valence].text,
                    }}
                  >
                    {seg.content}
                  </span>
                ),
              )}
            </p>

            {/* Classification tags */}
            <div className="mt-3 flex flex-wrap gap-1.5">
              {review.segments
                .filter((s): s is Extract<Segment, { type: "hl" }> => s.type === "hl")
                .map((seg, i) => (
                  <span
                    key={i}
                    className="inline-flex items-center gap-1 rounded py-0.5 pr-2 pl-1.5 text-[10px] font-medium sm:text-[11px]"
                    style={{
                      backgroundColor: VALENCE[seg.valence].bg,
                      color: VALENCE[seg.valence].text,
                      borderLeft: `3px solid ${DOMAIN_COLORS[seg.domain] ?? "#6b7280"}`,
                    }}
                  >
                    {seg.primitive}
                    <span className="font-bold">{seg.valence}</span>
                  </span>
                ))}
            </div>
          </div>
        ))}
      </div>

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