"use client";

import { Gauge, TrendingUp, Swords, Layers, Percent, Users, PlayCircle } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { SectionHeading } from "@/components/section-heading";
import { FadeIn } from "@/components/fade-in";
import { ScoreRing } from "@/components/score-ring";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useLanguage } from "@/lib/i18n/context";

const metricIcons: LucideIcon[] = [TrendingUp, Swords, Layers, Percent, Users, PlayCircle];

export function ProductIntelligence() {
  const { t } = useLanguage();
  const metricValues = [
    "88",
    t.competition.low,
    "32%",
    "+64%",
    "126",
    "47",
  ];

  return (
    <section id="product-intelligence" className="py-20 sm:py-28">
      <Container className="flex flex-col gap-14">
        <SectionHeading
          eyebrow={t.productIntelligence.eyebrow}
          title={t.productIntelligence.title}
          description={t.productIntelligence.description}
        />

        <FadeIn className="rounded-2xl border border-border bg-card/60 glass-panel">
          {/* Filters */}
          <div className="flex flex-wrap items-center gap-2 border-b border-border p-4">
            {t.productIntelligence.filters.map((filter) => (
              <Select key={filter.label} defaultValue={filter.options[0]}>
                <SelectTrigger
                  size="sm"
                  aria-label={filter.label}
                  className="bg-secondary/40 text-xs"
                >
                  <span className="text-muted-foreground">{filter.label}:</span>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {filter.options.map((option) => (
                    <SelectItem key={option} value={option}>
                      {option}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            ))}
          </div>

          <div className="grid gap-6 p-5 sm:p-6 lg:grid-cols-5 lg:items-center">
            {/* Opportunity score highlight */}
            <div className="flex min-h-[260px] flex-col items-center justify-center gap-4 rounded-xl border border-border bg-secondary/30 p-6 text-center lg:col-span-2">
              <div className="flex w-full justify-center">
                <ScoreRing
                  value={91}
                  size={128}
                  strokeWidth={10}
                  label={t.productIntelligence.opportunityScoreLabel}
                />
              </div>
              <p className="mx-auto max-w-xs text-center text-sm leading-6 text-muted-foreground">
                {t.productIntelligence.opportunityScoreCaption}
              </p>
            </div>

            {/* Metric grid */}
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:col-span-3">
              {t.productIntelligence.metricLabels.map((label, i) => {
                const Icon = metricIcons[i];
                return (
                  <div
                    key={label}
                    className="flex flex-col gap-2 rounded-xl border border-border bg-secondary/30 p-4"
                  >
                    <span className="flex size-8 items-center justify-center rounded-md bg-background/70 text-primary">
                      <Icon className="size-4" />
                    </span>
                    <p className="text-xl font-semibold text-foreground">
                      {metricValues[i]}
                    </p>
                    <p className="text-xs text-muted-foreground">{label}</p>
                  </div>
                );
              })}
              <div className="flex flex-col justify-center gap-1 rounded-xl border border-dashed border-border p-4 sm:col-span-3">
                <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                  <Gauge className="size-3.5" />
                  {t.productIntelligence.footnote}
                </span>
              </div>
            </div>
          </div>
        </FadeIn>
      </Container>
    </section>
  );
}