import { Link } from "react-router-dom"
import {
  ArrowRight,
  CalendarClock,
  Euro,
  FileCheck2,
  RadioTower,
} 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 { PortalGaugeIcon } from "@/components/solenos/line-icons"
import { NoticeArt, NoticeBanner } from "@/components/solenos/notice-banner"
import { PriceCard } from "@/components/solenos/price-card"
import { StepRail } from "@/components/solenos/process-steps"
import { Section, SectionHeading } from "@/components/solenos/section"
import {
  AssetRender,
  renders,
  vectors,
} from "@/components/solenos/site-assets"
import { heizkostenv } from "@/lib/legal"
import { ProductCrossLinks, ProductPage } from "@/pages/products/product-page"

/**
 * Hero art: the UVI pane as the subject – what the resident receives – with
 * the consumption bars behind it and the consumption ring as the accent.
 * Decorative; the copy carries the meaning.
 */
function UviHeroArt() {
  return (
    <div className="relative mx-auto flex aspect-[1.3] w-full max-w-md items-center">
      <img
        src={vectors.consumptionRing}
        alt=""
        className="absolute top-0 right-[2%] w-[24%]"
      />
      <AssetRender
        render={renders.uviGlassPane}
        alt=""
        className="mx-auto w-[76%]"
        loading="eager"
      />
      <AssetRender
        render={renders.barChart}
        alt=""
        className="absolute bottom-[2%] left-0 w-[28%]"
      />
    </div>
  )
}

const MONTHLY_STEPS = [
  {
    media: <AssetRender render={renders.heatMeter} imgClassName="w-24" />,
    title: "Verbrauch erfassen",
    description:
      "Wärmezähler, Heizkostenverteiler und Wasserzähler messen laufend je Wohnung.",
  },
  {
    media: <AssetRender render={renders.gateway} imgClassName="w-24" />,
    title: "Werte übertragen",
    description:
      "Das Gateway sammelt die Funkdaten im Gebäude und überträgt sie verschlüsselt an SolenOS.",
  },
  {
    media: <AssetRender render={renders.refreshLoopCloud} imgClassName="w-28" />,
    title: "Daten prüfen und zuordnen",
    description:
      "Die Werte werden plausibilisiert und Wohnung, Gerät und Nutzungszeitraum zugeordnet.",
  },
  {
    media: <AssetRender render={renders.uviGlassPane} alt="" className="w-28" />,
    title: "Verbrauchsinformation erzeugen",
    description:
      "Monatswert, Vergleichswerte und die nach § 6a HeizkostenV geforderten Angaben werden aufbereitet.",
  },
  {
    media: (
      <AssetRender render={renders.laptopDashboard} imgClassName="w-40" />
    ),
    title: "Bewohnern bereitstellen",
    description:
      "Bewohner rufen ihre Information im Mieterportal ab, Eigentümer sehen den Versandstatus.",
  },
]

const MONTHLY_CONTENT = [
  "Verbrauch des Nutzers im letzten Monat in Kilowattstunden",
  "Vergleich mit dem Vormonat desselben Nutzers",
  "Vergleich mit dem entsprechenden Monat des Vorjahres, soweit die Daten erhoben wurden",
  "Vergleich mit dem Verbrauch eines normierten Durchschnittsnutzers derselben Nutzerkategorie",
]

const BILLING_CONTENT = [
  "Anteil der eingesetzten Energieträger, bei Fernwärme zusätzlich Treibhausgasemissionen und Primärenergiefaktor",
  "erhobene Steuern, Abgaben und Zölle",
  "Entgelte für Messtechnik, Eichung, Ablesung und Abrechnung",
  "grafischer Vergleich des witterungsbereinigten Energieverbrauchs mit dem vorherigen Abrechnungszeitraum",
  "Kontaktinformationen zu Energieeffizienz und Hinweise zur Streitbeilegung",
]

const INCLUDED = [
  "fernablesbare Messtechnik für Wärme und Warmwasser",
  "Gateway, Datenübertragung und Geräteüberwachung",
  "monatliche Erzeugung der Verbrauchsinformation",
  "Bereitstellung im Mieterportal für jede Wohnung",
  "Nutzerwechsel ohne Ablesetermin vor Ort",
  "Portalzugang für Eigentümer und Verwaltung",
]

const NOT_INCLUDED = [
  "Jahresabrechnung der Heiz- und Warmwasserkosten",
  "Rauchwarnmelder und deren Inspektion",
  "Betriebskostenabrechnung des gesamten Gebäudes",
]

const FAQS: FaqItem[] = [
  {
    question: "Ab wann muss die Verbrauchsinformation monatlich erfolgen?",
    answer:
      "Sobald fernablesbare Ausstattungen zur Verbrauchserfassung installiert sind, sind die Verbrauchsinformationen nach § 6a Absatz 1 Nummer 2 HeizkostenV seit dem 1. Januar 2022 monatlich mitzuteilen. Für Abrechnungszeiträume ab dem 1. Dezember 2021 galt zunächst ein mindestens vierteljährlicher bzw. halbjährlicher Rhythmus.",
  },
  {
    question: "Wie erhalten die Bewohner ihre Verbrauchsinformation?",
    answer:
      "Über das Mieterportal. Jeder Bewohner erhält einen eigenen Zugang und sieht ausschließlich die Werte der eigenen Wohnung und des eigenen Nutzungszeitraums – nicht die Daten von Vor- oder Nachmietern.",
  },
  {
    question: "Was passiert, wenn ein Bewohner keinen digitalen Zugang nutzt?",
    answer:
      "Die Information wird im Portal bereitgestellt und kann als Dokument ausgegeben werden, sodass die Verwaltung sie auf dem für das Gebäude vereinbarten Weg zustellen kann. Die Pflicht trifft den Gebäudeeigentümer; SolenOS liefert die dafür benötigten Inhalte vollständig aufbereitet.",
  },
  {
    question: "Muss für die UVI jemand in die Wohnung?",
    answer:
      "Nein. Fernablesbar heißt, dass die Ausstattung ohne Zugang zu den einzelnen Nutzeinheiten abgelesen werden kann (§ 5 Absatz 2 HeizkostenV). Auch bei einem Nutzerwechsel werden die Werte zum Stichtag aus der laufenden Datenerfassung übernommen.",
  },
  {
    question: "Kann ich die UVI ohne Heizkostenabrechnung buchen?",
    answer:
      "Ja. Der UVI-Komplettbetrieb umfasst die benötigte Messtechnik und die zugehörigen digitalen Dienstleistungen. Die Heizkostenabrechnung baut auf denselben erfassten Verbrauchsdaten auf und kann jederzeit ergänzt werden.",
  },
]

export default function UviProductPage() {
  return (
    <ProductPage
      breadcrumb="Verbrauchsinformation (UVI)"
      eyebrow="Produkt"
      title={
        <span className="block text-[2.25rem] text-pretty sm:text-[2.75rem]">
          Unterjährige Verbrauchs&shy;information (UVI)
        </span>
      }
      tagline="Monatlich. Automatisch. Nachweisbar."
      lead="Sind fernablesbare Zähler installiert, muss jeder Nutzer monatlich über seinen Verbrauch informiert werden. SolenOS erzeugt diese Information aus den laufend erfassten Werten und stellt sie den Bewohnern im Mieterportal bereit."
      actions={
        <>
          <Button asChild size="lg">
            <Link to="/konfigurator">Konfiguration für mein Gebäude starten</Link>
          </Button>
          <Button asChild variant="outline" size="lg">
            <Link to="/wissen/gesetzliche-anforderungen">
              Gesetzliche Anforderungen
            </Link>
          </Button>
        </>
      }
      note="Wenige Angaben · vollständige Prüfung im Folgeprozess"
      extra={
        <div
          role="note"
          className="rounded-2xl border border-brand-300 bg-brand-50/80 p-4 shadow-card"
        >
          <div className="flex items-start gap-3">
            <Euro
              aria-hidden="true"
              className="mt-0.5 size-6 shrink-0 text-brand-700"
            />
            <div>
              <p className="font-extrabold text-navy">
                Bis zu 3&nbsp;% Kürzungsrecht
              </p>
              <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                Fehlt die monatliche Verbrauchsinformation oder ist sie
                unvollständig, können Nutzer ihren Kostenanteil um 3&nbsp;%
                kürzen.
              </p>
            </div>
          </div>
          <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm font-semibold">
            <Link
              to="/wissen/gesetzliche-anforderungen"
              className="inline-flex items-center gap-1 text-brand-800 underline decoration-brand-400 underline-offset-4"
            >
              Anforderungen im Detail
              <ArrowRight className="size-4" />
            </Link>
            <a
              href={heizkostenv("6a")}
              className="text-muted-foreground underline underline-offset-4"
            >
              Quelle: § 6a HeizkostenV
            </a>
          </div>
        </div>
      }
      visual={<UviHeroArt />}
      features={[
        {
          icon: <CalendarClock strokeWidth={1.6} />,
          title: "Monatlich automatisch",
          sub: "Erfassung, Aufbereitung und Bereitstellung laufen ohne Zutun.",
        },
        {
          icon: <RadioTower strokeWidth={1.6} />,
          title: "Ohne Wohnungszugang",
          sub: "Fernablesung statt Ablesetermin – auch beim Nutzerwechsel.",
        },
        {
          icon: <PortalGaugeIcon />,
          title: "Eigener Bewohnerzugang",
          sub: "Jede Wohnung sieht ausschließlich ihren eigenen Verbrauch.",
        },
        {
          icon: <FileCheck2 strokeWidth={1.6} />,
          title: "Pflichtangaben enthalten",
          sub: "Monatswert und Vergleiche nach § 6a HeizkostenV.",
        },
      ]}
      closing={
        <Section className="pt-0 sm:pt-0 lg:pt-0">
          <CtaBanner
            icon={<Euro />}
            title="Verbrauchsinformation für Ihr Gebäude konfigurieren"
            description="Gebäude und Leistungen online erfassen; SolenOS prüft anschließend Ausstattung und Gesamtpreis."
            actions={
              <>
                <Button asChild variant="inverse" size="lg">
                  <Link to="/konfigurator">Konfiguration starten</Link>
                </Button>
                <Button asChild variant="inverseOutline" size="lg">
                  <Link to="/kontakt">Kontakt aufnehmen</Link>
                </Button>
              </>
            }
          />
        </Section>
      }
    >
      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <NoticeBanner
          title="Monatliche Verbrauchsinformation ist Pflicht"
          source={{ cite: "§ 6a HeizkostenV", href: heizkostenv("6a") }}
          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">
                Anforderungen im Detail
                <ArrowRight />
              </Link>
            </Button>
          }
        >
          Wo fernablesbare Ausstattungen installiert sind, sind die
          Verbrauchsinformationen seit dem 1. Januar 2022 monatlich
          mitzuteilen. Werden sie nicht oder nicht vollständig mitgeteilt,
          können Nutzer ihren Kostenanteil um 3 % kürzen.
        </NoticeBanner>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Inhalte"
          title="Was die Bewohner erhalten"
          lead="Die monatliche Information und die Angaben zur Jahresabrechnung sind in der HeizkostenV unterschiedlich geregelt. SolenOS bereitet beide Sätze aus derselben Datenbasis auf."
        />
        <div className="mt-10 grid gap-6 lg:grid-cols-2">
          <Card className="gap-0 p-6 sm:p-7">
            <p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
              Monatlich
            </p>
            <h3 className="mt-2 text-lg font-extrabold tracking-tight text-navy">
              Verbrauchsinformation je Wohnung
            </h3>
            <Checklist items={MONTHLY_CONTENT} className="mt-5" />
            <p className="mt-5 text-xs text-muted-foreground">
              § 6a Absatz 2 HeizkostenV
            </p>
          </Card>
          <Card className="gap-0 p-6 sm:p-7">
            <p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
              Zur Abrechnung
            </p>
            <h3 className="mt-2 text-lg font-extrabold tracking-tight text-navy">
              Zusätzliche Informationen
            </h3>
            <Checklist items={BILLING_CONTENT} className="mt-5" />
            <p className="mt-5 text-xs text-muted-foreground">
              § 6a Absatz 3 HeizkostenV
            </p>
          </Card>
        </div>
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Schritt für Schritt"
          title="So entsteht die monatliche UVI"
          lead="Vom Messwert in der Wohnung bis zur Information im Mieterportal – ein Ablauf, der nach der Installation ohne weitere Eingriffe läuft."
        />
        <StepRail steps={MONTHLY_STEPS} className="mt-10" />
      </Section>

      <Section className="pt-0 sm:pt-0 lg:pt-0">
        <SectionHeading
          eyebrow="Leistungsumfang"
          title="Was im UVI-Betrieb enthalten ist"
        />
        <div className="mt-10 grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
          <Card className="gap-0 p-6 sm:p-7">
            <h3 className="text-base font-bold text-navy">Enthalten</h3>
            <Checklist items={INCLUDED} className="mt-5" />
            <h3 className="mt-8 text-base font-bold text-navy">
              Nicht im UVI-Betrieb enthalten
            </h3>
            <Checklist items={NOT_INCLUDED} className="mt-5" tone="excluded" />
            <p className="mt-5 text-sm leading-relaxed text-muted-foreground">
              Heizkostenabrechnung und Rauchwarnmelder sind eigene Leistungen –
              einzeln buchbar und jederzeit ergänzbar.
            </p>
          </Card>
          <div>
            <PriceCard
              title="Monatliche Verbrauchsinformation (UVI)"
              cadence="Gesamtangebot"
              price="Nach Prüfung"
              unit="nach vollständiger Objektkonfiguration"
              description="Messtechnik, erforderliche Gateway-Infrastruktur, Daten, Portal und Verbrauchsinformation werden gemeinsam angeboten."
              media={
                <AssetRender
                  render={renders.uviGlassPane}
                  alt=""
                  className="w-full"
                />
              }
            />
            <Button asChild variant="link" className="mt-4 h-auto p-0 font-bold">
              <Link to="/konfigurator">
                Gesamtangebot konfigurieren
                <ArrowRight />
              </Link>
            </Button>
          </div>
        </div>
      </Section>

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

      <ProductCrossLinks current="/produkte/uvi" />
    </ProductPage>
  )
}