/**
 * Ersteinrichtung: Die App holt ihre Daten vom eigenen Server, also braucht
 * sie einmalig dessen Adresse und ein Zugriffstoken.
 *
 * Entwurf: `design/DM360.dc.html`, Abschnitt `isSetup`. Fehlermeldungen sind
 * bewusst nach Ursache getrennt — „Token abgelehnt" und „Server nicht
 * erreichbar" verlangen völlig verschiedene Reaktionen des Benutzers.
 */

import { useState } from "react"

import { ActionButton, Feld, Tile } from "@audi-dash/ui"

import { ApiFehler, HassRest, basisUrlNormalisieren, zugangSpeichern } from "../api"
import { zugangMerken } from "./zugang"

export function Einrichtung({ fertig }: { fertig: () => void }) {
  const [adresse, setzeAdresse] = useState("")
  const [token, setzeToken] = useState("")
  const [laeuft, setzeLaeuft] = useState(false)
  const [fehler, setzeFehler] = useState<string | null>(null)

  const verbinden = async () => {
    setzeFehler(null)
    if (!adresse.trim()) {
      setzeFehler("Bitte die Adresse deines Servers eintragen.")
      return
    }
    if (!token.trim()) {
      setzeFehler("Bitte den Zugangs-Token einfügen.")
      return
    }

    setzeLaeuft(true)
    try {
      const zugang = { basisUrl: basisUrlNormalisieren(adresse), token: token.trim() }
      // Erst prüfen, dann speichern — sonst merkt sich die App Zugangsdaten,
      // die nachweislich nicht funktionieren.
      await new HassRest(zugang).verbindungPruefen()
      await zugangSpeichern(zugang)
      await zugangMerken()
      fertig()
    } catch (ursache) {
      if (ursache instanceof ApiFehler && ursache.istAnmeldeproblem) {
        setzeFehler("Der Server hat den Token abgelehnt. Wurde er vollständig eingefügt?")
      } else if (ursache instanceof ApiFehler && ursache.istNetzproblem) {
        setzeFehler(
          "Der Server ist unter dieser Adresse nicht erreichbar. Stimmen Adresse und Port, und ist das Gerät im richtigen Netz?",
        )
      } else {
        setzeFehler(ursache instanceof Error ? ursache.message : String(ursache))
      }
    } finally {
      setzeLaeuft(false)
    }
  }

  return (
    <div className="dm-einrichtung">
      <div className="dm-einrichtung__karte">
        <span className="ads-eyebrow">DataMetric360</span>
        <h1 className="dm-einrichtung__titel">Willkommen</h1>
        <p className="dm-einrichtung__text">
          Die App holt ihre Daten von deinem eigenen Server. Trag einmal die Adresse ein und füge
          deinen Zugangs-Token ein. Danach läuft alles von selbst.
        </p>

        <Tile>
          <Feld label="Server-Adresse">
            <input
              className="dm-eingabe"
              inputMode="url"
              autoCapitalize="none"
              autoCorrect="off"
              spellCheck={false}
              placeholder="192.168.1.20:8123"
              value={adresse}
              onChange={(e) => setzeAdresse(e.target.value)}
            />
          </Feld>
          <Feld label="Zugangs-Token" last>
            <input
              className="dm-eingabe"
              type="password"
              autoCapitalize="none"
              autoCorrect="off"
              spellCheck={false}
              placeholder="einfügen"
              value={token}
              onChange={(e) => setzeToken(e.target.value)}
            />
          </Feld>
        </Tile>

        {fehler && (
          <p className="dm-einrichtung__fehler" role="alert">
            {fehler}
          </p>
        )}

        <div className="dm-einrichtung__knoepfe">
          <ActionButton onClick={() => void verbinden()} disabled={laeuft}>
            {laeuft ? "Verbinde …" : "Verbinden"}
          </ActionButton>
        </div>

        <p className="dm-einrichtung__hinweis">
          Den Token erzeugst du in Home Assistant unter „Profil → Sicherheit → Langlebige
          Zugriffstoken". Deine Daten bleiben auf deinem Server.
        </p>
      </div>
    </div>
  )
}
