"use client"

import { useMemo } from "react"
import { useTheme } from "next-themes"
import { ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { CompteSettingsCard } from "@/components/compte/compte-settings-card"
import {
  buildAuthentikUrl,
  resolveAuthentikTheme,
  type AuthentikUserSettingsTab,
} from "@/lib/auth/authentik-user-url"
import { useClientThemeStore } from "@/lib/stores/client-theme-store"

type CompteAuthentikPanelProps = {
  title: string
  description: string
  tab?: AuthentikUserSettingsTab
  flowSlug?: string
  actionLabel: string
  icon?: React.ReactNode
}

export function CompteAuthentikPanel({
  title,
  description,
  tab,
  flowSlug,
  actionLabel,
  icon,
}: CompteAuthentikPanelProps) {
  const themeMode = useClientThemeStore((s) => s.themeMode)
  const { resolvedTheme } = useTheme()
  const authentikTheme = resolveAuthentikTheme(themeMode, resolvedTheme)

  const url = useMemo(
    () => buildAuthentikUrl({ tab, flowSlug, theme: authentikTheme }),
    [tab, flowSlug, authentikTheme]
  )

  if (!url) {
    return (
      <CompteSettingsCard>
        <PanelHeader icon={icon} title={title} description={description} />
        <p className="mt-3 text-xs text-muted-foreground">
          Portail d&apos;identité non configuré.
        </p>
      </CompteSettingsCard>
    )
  }

  return (
    <CompteSettingsCard>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <PanelHeader icon={icon} title={title} description={description} />
        <Button
          type="button"
          variant="outline"
          className="h-9 shrink-0 rounded-full px-4 text-sm font-medium"
          asChild
        >
          <a href={url} target="_blank" rel="noreferrer">
            {actionLabel}
            <ExternalLink className="size-3.5" aria-hidden />
          </a>
        </Button>
      </div>
      <p className="mt-3 text-xs text-muted-foreground">
        Ouverture du portail d&apos;identité Authentik dans un nouvel onglet.
      </p>
    </CompteSettingsCard>
  )
}

function PanelHeader({
  icon,
  title,
  description,
}: {
  icon?: React.ReactNode
  title: string
  description: string
}) {
  return (
    <div className="flex min-w-0 flex-1 gap-3">
      {icon ? (
        <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-accent text-muted-foreground">
          {icon}
        </span>
      ) : null}
      <div className="min-w-0">
        <h3 className="text-sm font-medium text-foreground">{title}</h3>
        <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>
      </div>
    </div>
  )
}