import { Link } from "react-router-dom"
import {
  ArrowRight,
  ChevronRight,
  Droplets,
  Flame,
  Gauge,
  Lock,
  Puzzle,
  RadioTower,
  Router,
  Users,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checklist } from "@/components/solenos/checklist"
import { CtaBanner } from "@/components/solenos/cta-banner"
import { FaqAccordion, type FaqItem } from "@/components/solenos/faq-accordion"
import {
  GermanyIcon,
  PreconfiguredIcon,
} from "@/components/solenos/line-icons"
import { NoticeArt, NoticeBanner } from "@/components/solenos/notice-banner"
import { StepFlow } from "@/components/solenos/process-steps"
import { Section, SectionHeading } from "@/components/solenos/section"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/solenos/site-assets"
import { TopicCards, type Topic } from "@/components/solenos/topic-cards"
import { TrustPanel, TrustShieldArt } from "@/components/solenos/trust-panel"
import { heizkostenv } from "@/lib/legal"
import { ProductCrossLinks, ProductPage } from "@/pages/products/product-page"

const MESSEV_ANLAGE_7 =
  "https://www.gesetze-im-internet.de/messev/anlage_7.html"

/**
 * Hero art: the gateway as the subject – the piece that ties the building
 * together – with the heat meter beside it and the wireless orb as the accent
 * for the radio link between them. Decorative; the copy carries the meaning.
 */
function InfrastructureHeroArt() {
  return (
    <div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
      <img
        src={vectors.wirelessOrb}
        alt=""
        className="absolute top-[2%] right-[6%] w-[22%]"
      />
      <AssetRender
        render={renders.gateway}
        className="mx-auto w-[62%]"
        loading="eager"
      />
      <AssetRender
        render={renders.heatMeter}
        className="absolute bottom-0 left-0 w-[34%]"
      />
    </div>
  )
}

const COMPONENTS: Topic[] = [
  {
    icon: <Flame />,
    title: "Heizkostenverteiler",
    body: "Elektronische Heizkostenverteiler erfassen an jedem Heizkörper den anteiligen Wärmeverbrauch. Sie sind keine Messgeräte im Sinne des Eichrechts und daher nicht eichpflichtig; getauscht werden sie nach Ablauf ihrer Nutzungsdauer.",
    source: { cite: "§ 5 HeizkostenV", href: heizkostenv("5") },
  },
  {
    icon: <Gauge />,
    title: "Wärmezähler",
    body: "Wo die Wärme je Einheit direkt gemessen wird – etwa bei Fußbodenheizung oder Wohnungsstationen – erfassen Wärmezähler die Wärmemenge in Kilowattstunden. Ihre Eichfrist beträgt sechs Jahre.",
    source: { cite: "Anlage 7 MessEV", href: MESSEV_ANLAGE_7 },
  },
  {
    icon: <Droplets />,
    title: "Kalt- und Warmwasserzähler",
    body: "Warmwasserzähler sind für die verbrauchsabhängige Abrechnung erforderlich, Kaltwasserzähler ergänzen die Erfassung. Für beide gilt eine Eichfrist von sechs Jahren.",
    source: { cite: "Anlage 7 MessEV", href: MESSEV_ANLAGE_7 },
  },
  {
    icon: <Router />,
    title: "Gateway und Datenübertragung",
    body: "Das Gateway empfängt die Funkdaten der Geräte im Gebäude, puffert sie und überträgt sie an SolenOS. Ein Zugang zu den einzelnen Wohnungen ist dafür nicht erforderlich.",
  },
]

const DATA_PATH = [
  {
    media: <AssetRender render={renders.heatMeter} imgClassName="w-28" />,
    title: "Gerät misst und funkt",
    description:
      "Zähler und Heizkostenverteiler senden ihre Werte per Funk; die Nutzdaten sind dabei AES-geschützt.",
  },
  {
    media: <AssetRender render={renders.gateway} imgClassName="w-28" />,
    title: "Gateway sammelt",
    description:
      "Die erforderliche Gateway-Infrastruktur empfängt die Funkpakete der angebundenen Geräte und wird von SolenOS passend zum Objekt bestimmt.",
  },
  {
    media: (
      <AssetRender render={renders.refreshLoopCloud} imgClassName="w-28" />
    ),
    title: "Übertragung an SolenOS",
    description:
      "Die Daten werden TLS-verschlüsselt an die Plattform übertragen und dort verarbeitet.",
  },
  {
    media: (
      <AssetRender render={renders.laptopDashboard} imgClassName="w-40" />
    ),
    title: "Nutzung im Portal",
    description:
      "Aus denselben Werten entstehen Geräteüberwachung, monatliche UVI und Jahresabrechnung.",
  },
]

const LIFECYCLE = [
  {
    device: "Wärmezähler",
    interval: "Eichfrist 6 Jahre",
    note: "Austausch oder Nacheichung vor Ablauf der Eichfrist",
  },
  {
    device: "Kalt- und Warmwasserzähler",
    interval: "Eichfrist 6 Jahre",
    note: "seit der Novelle der MessEV einheitlich sechs Jahre",
  },
  {
    device: "Elektronische Heizkostenverteiler",
    interval: "nicht eichpflichtig",
    note: "Austausch nach Ablauf der Nutzungsdauer des Geräts",
  },
  {
    device: "Rauchwarnmelder",
    interval: "Austausch nach 10 Jahren",
    note: "jährliche Inspektion nach DIN 14676-1, per Ferninspektion möglich",
  },
]

const REUSE_POSSIBLE = [
  "Geräte sind fernablesbar, also ohne Zugang zur Wohnung auslesbar",
  "die Funkschnittstelle folgt einem offenen Standard (OMS)",
  "das Schlüsselmaterial der Geräte liegt vor",
  "die Eichfrist der betroffenen Zähler ist nicht abgelaufen",
]

const REUSE_IMPOSSIBLE = [
  "nicht fernablesbare Verbrauchserfassung",
  "herstellergebundene Funkprotokolle ohne verfügbares Schlüsselmaterial",
  "Zähler mit abgelaufener Eichfrist",
]

const TRUST_PROPERTIES = [
  { icon: <GermanyIcon />, label: "Hosting in Deutschland" },
  { icon: <Lock />, label: "AES-geschützte Funkdaten" },
  { icon: <RadioTower />, label: "TLS-Übertragung ab Gateway" },
  { icon: <Users />, label: "Rollenbasierte Zugriffsrechte" },
]

const FAQS: FaqItem[] = [
  {
    question: "Was kostet die Messtechnik?",
    answer:
      "SolenOS bestimmt die benötigten Sensoren und die erforderliche Gateway-Infrastruktur aus der vollständigen Gebäudekonfiguration. Beides wird im geprüften Gesamtangebot gemeinsam mit den gewählten Leistungen ausgewiesen; ungeprüfte Einzelpreise veröffentlichen wir nicht.",
  },
  {
    question: "Kann ich vorhandene Zähler weiterverwenden?",
    answer:
      "Das hängt von den Geräten ab. Voraussetzung ist, dass sie fernablesbar sind, auf offenen Standards basieren und das Schlüsselmaterial vorliegt. Vorhandene Messtechnik wird deshalb bei der vollständigen Konfiguration je Gebäude und Einheit erfasst und geprüft.",
  },
  {
    question: "Was bedeutet Interoperabilität konkret?",
    answer:
      "Nach § 5 Absatz 5 HeizkostenV dürfen seit dem 1. Dezember 2022 nur noch fernauslesbare Ausstattungen installiert werden, die mit Geräten gleicher Art anderer Hersteller interoperabel sind – ein anderer Dienstleister muss sie also selbst fernablesen können. Das Schlüsselmaterial ist dem Gebäudeeigentümer kostenfrei zur Verfügung zu stellen.",
  },
  {
    question: "Braucht das Gateway einen Internetanschluss im Gebäude?",
    answer:
      "Nein. Das Gateway überträgt die gesammelten Daten über Mobilfunk, sodass kein Anschluss im Haus und keine Mitnutzung eines fremden Netzes erforderlich ist.",
  },
  {
    question: "Wird gemeldet, wenn ein Gerät ausfällt?",
    answer:
      "Ja. Ausbleibende Werte, Batteriewarnungen und Manipulationsmeldungen laufen im Portal auf, sodass ein Gerät vor der nächsten Abrechnung geprüft werden kann – nicht erst am Jahresende.",
  },
]

export default function MesstechnikProductPage() {
  return (
    <ProductPage
      breadcrumb="Messtechnik und Infrastruktur"
      eyebrow="Produkt"
      title={
        <span className="block text-[2.25rem] text-pretty sm:text-[2.75rem]">
          Messtechnik und Infrastruktur
        </span>
      }
      tagline="Die Grundlage für alles andere."
      lead="Zähler, Heizkostenverteiler und Gateway erfassen und übertragen die Werte, aus denen monatliche Verbrauchsinformation (UVI) und Heizkostenabrechnung entstehen – fernablesbar, interoperabel und objektbezogen vorkonfiguriert geliefert."
      actions={
        <>
          <Button asChild size="lg">
            <Link to="/konfigurator">Ausstattung ermitteln</Link>
          </Button>
          <Button asChild variant="outline" size="lg">
            <Link to="/wissen/datenschutz-sicherheit">
              Datenschutz & Sicherheit
            </Link>
          </Button>
        </>
      }
      note="Wenige Angaben · vollständige Prüfung im Folgeprozess"
      visual={<InfrastructureHeroArt />}
      features={[
        {
          icon: <RadioTower strokeWidth={1.6} />,
          title: "Fernablesbar",
          sub: "Ablesung ohne Zugang zu den einzelnen Wohnungen.",
        },
        {
          icon: <Puzzle strokeWidth={1.6} />,
          title: "Interoperabel",
          sub: "Offene Funkstandards, Schlüsselmaterial bleibt verfügbar.",
        },
        {
          icon: <PreconfiguredIcon />,
          title: "Vorkonfiguriert",
          sub: "Geräte kommen Gebäude und Einheit zugeordnet an.",
        },
        {
          icon: <GermanyIcon />,
          title: "Daten in Deutschland",
          sub: "Verschlüsselte Übertragung, Hosting in Falkenstein.",
        },
      ]}
      closing={
        <Section className="pt-0 sm:pt-0 lg:pt-0">
          <CtaBanner
            icon={<Gauge />}
            title="Welche Ausstattung braucht Ihr Gebäude?"
            description="Aus Gebäudedaten, Wärmeverteilung und Wohnungszahl ermitteln wir Geräteart und Menge – und daraus den Preis."
            actions={
              <>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/konfigurator">Ausstattung ermitteln</Link>
                </Button>
                <Button asChild variant="inverseOutline" size="lg">
                  <Link to="/kontakt">Bestand prüfen lassen</Link>
                </Button>
              </>
            }
          />
        </Section>
      }
    >
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Komponenten"
          title="Was im Gebäude verbaut wird"
          lead="Welche Geräte zum Einsatz kommen, hängt von der Wärmeverteilung und der Einbausituation ab. Zusammengestellt und vorbereitet wird die Ausstattung objektbezogen."
        />
        <TopicCards
          items={COMPONENTS}
          className="sm:grid-cols-2 lg:grid-cols-4"
        />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Datenweg"
          title="Vom Heizkörper bis ins Portal"
          lead="Jeder Abschnitt hat seine eigene Schutzmaßnahme – von der Funkstrecke in der Wohnung bis zur Verarbeitung auf der Plattform."
        />
        <StepFlow steps={DATA_PATH} className="mt-10" />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <NoticeBanner
          title="Nachrüstung bis 31.12.2026 erforderlich"
          source={{ cite: "§ 5 HeizkostenV", href: heizkostenv("5") }}
          visual={<NoticeArt className="max-lg:hidden" />}
          action={
            <Button
              asChild
              variant="link"
              className="h-auto p-0 text-[15px] font-bold text-brand-800 underline decoration-brand-500 decoration-2 underline-offset-[6px] hover:text-navy hover:decoration-brand-800"
            >
              <Link to="/wissen/gesetzliche-anforderungen">
                Mehr erfahren
                <ChevronRight />
              </Link>
            </Button>
          }
        >
          Nicht fernablesbare Verbrauchserfassung muss grundsätzlich bis zum
          31. Dezember 2026 durch Nachrüstung oder Austausch die Anforderungen
          an Fernablesbarkeit und Interoperabilität erfüllen.
        </NoticeBanner>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Bestand"
          title="Was übernommen werden kann"
          lead="Nicht jedes Gebäude beginnt bei null. Entscheidend ist, ob die vorhandenen Geräte fernablesbar und offen angebunden sind."
        />
        <div className="mt-10 grid gap-6 lg:grid-cols-2">
          <Card className="gap-0 p-6 sm:p-7">
            <h3 className="text-base font-bold text-navy">
              Weiterverwendung möglich, wenn
            </h3>
            <Checklist items={REUSE_POSSIBLE} className="mt-5" />
          </Card>
          <Card className="gap-0 p-6 sm:p-7">
            <h3 className="text-base font-bold text-navy">
              Austausch erforderlich bei
            </h3>
            <Checklist
              items={REUSE_IMPOSSIBLE}
              className="mt-5"
              tone="excluded"
            />
            <p className="mt-6 text-sm leading-relaxed text-muted-foreground">
              Was übernommen werden kann, wirkt sich unmittelbar auf die
              Geräteliste und damit auf den Preis aus. Der Bestand wird deshalb
              bei der vollständigen Objektkonfiguration je Einheit erfasst.
            </p>
          </Card>
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Fristen"
          title="Eichfristen und Nutzungsdauern"
          lead="Wann ein Gerät getauscht werden muss, ergibt sich aus dem Eichrecht oder aus seiner Nutzungsdauer. Fällige Termine werden je Gebäude im Portal geführt."
        />
        <Card className="mt-10 gap-0 divide-y divide-border p-0">
          {LIFECYCLE.map((item) => (
            <div
              key={item.device}
              className="flex flex-col gap-1 p-5 sm:flex-row sm:items-center sm:gap-6 sm:px-7"
            >
              <h3 className="text-sm font-bold text-navy sm:w-72 sm:shrink-0">
                {item.device}
              </h3>
              <p className="text-sm font-semibold text-primary sm:w-56 sm:shrink-0">
                {item.interval}
              </p>
              <p className="text-sm leading-relaxed text-muted-foreground">
                {item.note}
              </p>
            </div>
          ))}
        </Card>
        <p className="mt-5 text-xs leading-relaxed text-muted-foreground">
          Eichfristen nach Anlage 7 der Mess- und Eichverordnung. Elektronische
          Heizkostenverteiler unterliegen nicht dem Eichrecht.
        </p>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <TrustPanel
          title="Messdaten sind auf jedem Abschnitt geschützt"
          items={TRUST_PROPERTIES}
          visual={<TrustShieldArt />}
          action={
            <Button asChild variant="link" className="h-auto p-0 font-bold">
              <Link to="/wissen/datenschutz-sicherheit">
                Mehr zu Datenschutz & Sicherheit
                <ArrowRight />
              </Link>
            </Button>
          }
        />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          align="center"
          eyebrow="Häufige Fragen"
          title="Fragen zu Messtechnik und Infrastruktur"
        />
        <FaqAccordion className="mt-10" items={FAQS} />
      </Section>

      <ProductCrossLinks current="/produkte/messtechnik-infrastruktur" />
    </ProductPage>
  )
}