import * as React from "react"
import { Link } from "react-router-dom"
import { Building2, House, LineChart, Wrench } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checklist } from "@/components/gebos/checklist"
import { Container, Section, SectionHeading } from "@/components/gebos/section"
import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/gebos/site-assets"

type AudienceKey =
  | "hauseigentuemer"
  | "hausverwaltung"
  | "messdienstleister"
  | "installateur"

const AUDIENCES: Record<
  AudienceKey,
  {
    select: string
    tab: string
    tabIcon: React.ReactNode
    headline: string
    text: string
    bullets: string[]
    cta: string
    href: string
  }
> = {
  hauseigentuemer: {
    select: "Hauseigentümer",
    tab: "Hauseigentümer",
    tabIcon: <House />,
    headline: "Messdienstleistungen für Ihr Mehrfamilienhaus",
    text: "Installieren Sie vorkonfigurierte Technik selbst beziehungsweise mit Ihrem bestehenden Fachbetrieb – oder überlassen Sie GebOS die komplette Umsetzung.",
    bullets: [
      "einfache Installation",
      "transparente Kosten",
      "zuverlässiger laufender Betrieb",
      "eigene Fachbetriebe weiter nutzen",
      "wahlweise Selbstinstallation oder Komplettlösung",
    ],
    cta: "GebOS für Hauseigentümer",
    href: "/fuer-wen/hauseigentuemer",
  },
  hausverwaltung: {
    select: "Hausverwaltung",
    tab: "Hausverwaltungen",
    tabIcon: <Building2 />,
    headline: "Viele Gebäude. Ein einfacher Rollout.",
    text: "Erfassen Sie Ihre Objekte einmal, erhalten Sie vorkonfigurierte Hardware und nutzen Sie bestehende Mitarbeiter oder Installationspartner für die Montage.",
    bullets: [
      "standardisierter Rollout",
      "vorkonfigurierte Geräte",
      "wenig Softwarearbeit vor Ort",
      "zentrale Portfolioverwaltung",
      "geringer administrativer Aufwand",
      "schnelle Erweiterung um weitere Gebäude",
    ],
    cta: "GebOS für Hausverwaltungen",
    href: "/fuer-wen/hausverwaltungen",
  },
  messdienstleister: {
    select: "Messdienstleister",
    tab: "Messdienstleister",
    tabIcon: <LineChart />,
    headline: "Ihre Messdienstleistung. Unsere Infrastruktur.",
    text: "Nutzen Sie GebOS als technische Grundlage für Ihre eigenen Dienstleistungen – mit Hardware, Plattform, Gerätemanagement und optionalem White Label.",
    bullets: [
      "technische Plattform",
      "Gerätekompatibilität",
      "Skalierbarkeit",
      "APIs und Integrationen",
      "White Label",
      "individuelles Geschäftsmodell",
    ],
    cta: "GebOS für Messdienstleister",
    href: "/fuer-wen/messdienstleister",
  },
  installateur: {
    select: "Installateur & Heizungsbauer",
    tab: "Installateure",
    tabIcon: <Wrench />,
    headline: "Bestellen. Montieren. Fertig.",
    text: "Setzen Sie GebOS bei Ihren bestehenden Kunden ein, ohne zunächst ein Partnerprogramm durchlaufen zu müssen.",
    bullets: [
      "kein verpflichtender Partnerstatus",
      "keine Mindestabnahme",
      "vorkonfigurierte Hardware",
      "keine aufwendige Softwarekonfiguration",
      "bestehende Kundenbeziehung bleibt erhalten",
    ],
    cta: "GebOS für Installateure",
    href: "/fuer-wen/installateure",
  },
}

const AUDIENCE_KEYS = Object.keys(AUDIENCES) as AudienceKey[]

/**
 * Page-local hero composition (04-for-whom kit):
 * building portfolio render, teal growth bars behind right,
 * consumption ring in front at the lower left.
 */
function ForWhomArt() {
  return (
    <div className="relative mx-auto aspect-[1.28] w-full max-w-[560px]">
      <img
        src={vectors.tealBars}
        alt=""
        className="absolute top-[16%] right-0 w-[38%]"
      />
      <AssetRender
        render={renders.building}
        className="absolute inset-x-[6%] top-[6%]"
        imgClassName="w-full"
        loading="eager"
      />
      <img
        src={vectors.consumptionRing}
        alt=""
        className="absolute bottom-[2%] left-[2%] w-[30%] drop-shadow-lg"
      />
    </div>
  )
}

export default function ForWhomPage() {
  const [audience, setAudience] = React.useState<AudienceKey>("hausverwaltung")
  const active = AUDIENCES[audience]

  return (
    <div className="bg-hero-glow">
      <Container>
        <Section className="pt-6 sm:pt-7 lg:pt-8">
          <PageBreadcrumb
            className="mb-4"
            items={[
              { label: "Startseite", to: "/" },
              { label: "Für wen?" },
            ]}
          />
          <SectionHeading
            eyebrow="Finden Sie die passende Lösung"
            title="Für wen ist GebOS?"
            lead="GebOS wird von unterschiedlichen Kundengruppen eingesetzt. Wählen Sie aus, was am besten zu Ihnen passt."
          />

          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Label htmlFor="audience-select" className="text-muted-foreground">
              Ich bin …
            </Label>
            <Select
              value={audience}
              onValueChange={(value) => setAudience(value as AudienceKey)}
            >
              <SelectTrigger id="audience-select" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {AUDIENCE_KEYS.map((key) => (
                  <SelectItem key={key} value={key}>
                    {AUDIENCES[key].select}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="mt-6 grid items-center gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-6">
            <Card className="max-w-xl gap-0 p-7">
              <h2 className="text-xl font-extrabold tracking-tight text-balance text-navy sm:text-2xl">
                {active.headline}
              </h2>
              <p className="mt-3 text-sm leading-relaxed text-pretty text-muted-foreground">
                {active.text}
              </p>
              <p className="mt-5 text-sm font-bold text-navy">
                Besonders wichtig für Sie:
              </p>
              <Checklist items={active.bullets} className="mt-3" />
              <div className="mt-6">
                <Button asChild>
                  <Link to={active.href}>{active.cta}</Link>
                </Button>
              </div>
            </Card>
            <ForWhomArt />
          </div>

          <Tabs
            value={audience}
            onValueChange={(value) => setAudience(value as AudienceKey)}
            className="mt-12"
          >
            <TabsList>
              {AUDIENCE_KEYS.map((key) => (
                <TabsTrigger key={key} value={key}>
                  {AUDIENCES[key].tabIcon}
                  {AUDIENCES[key].tab}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>
        </Section>
      </Container>
    </div>
  )
}