accounted/components/settings/PeriodiseringAutoDetectToggle.tsx

'use client'

import { useCallback, useSyncExternalStore } from 'react'
import Link from 'next/link'
import { ExternalLink } from 'lucide-react'
import { Switch } from '@/components/ui/switch'
import {
  SettingsRow,
  SettingsRowEnd,
} from '@/components/settings/SettingsRows'

/**
 * Per-user toggle for the periodisering wizard's auto-detection step.
 *
 * Backed by localStorage (key: `periodisering_autodetect_enabled`) because
 * the company_settings table does not yet have a dedicated column for this
 * preference, and the task description explicitly allows the persistence to
 * be UI-local. A future migration can promote this to a real
 * `company_settings.periodisering_autodetect_enabled boolean` column and
 * the wizard's auto-detect step will read either source.
 *
 * Default: enabled. The wizard's auto-detect step renders regardless: the
 * toggle merely controls whether the GET response includes `autoDetected`
 * on subsequent fetches. (Today the API always returns it; the wizard step
 * can early-out based on this setting locally.)
 */
const STORAGE_KEY = 'periodisering_autodetect_enabled'

function readStored(): boolean {
  if (typeof window === 'undefined') return true
  try {
    const stored = window.localStorage.getItem(STORAGE_KEY)
    return stored === null ? true : stored !== 'false'
  } catch {
    return true
  }
}

/** Subscribe to localStorage changes from OTHER tabs. Same-tab updates are
 *  picked up via the explicit re-render after `setItem`: see
 *  `notifyChange` below. */
function subscribe(callback: () => void): () => void {
  if (typeof window === 'undefined') return () => {}
  const handler = (e: StorageEvent) => {
    if (e.key === STORAGE_KEY || e.key === null) callback()
  }
  const customHandler = () => callback()
  window.addEventListener('storage', handler)
  window.addEventListener('gnubok-periodisering-toggle', customHandler)
  return () => {
    window.removeEventListener('storage', handler)
    window.removeEventListener('gnubok-periodisering-toggle', customHandler)
  }
}

/** Fire a same-tab notification so useSyncExternalStore re-subscribers
 *  see the change without a manual setState. */
function notifyChange() {
  if (typeof window === 'undefined') return
  window.dispatchEvent(new Event('gnubok-periodisering-toggle'))
}

export function PeriodiseringAutoDetectToggle() {
  const enabled = useSyncExternalStore(
    subscribe,
    readStored,
    // Server snapshot: default to enabled. Matches the client default so
    // hydration is identical.
    () => true,
  )

  const handleChange = useCallback((value: boolean) => {
    try {
      window.localStorage.setItem(STORAGE_KEY, String(value))
    } catch {
      // No-op; if storage is blocked the toggle simply won't persist.
    }
    notifyChange()
  }, [])

  return (
    <SettingsRow
      label="Periodisering"
      help="Skannar fakturor i bokslutet efter datumintervall som sträcker sig in i nästa räkenskapsår och föreslår periodiseringar i bokslut-wizarden."
    >
      <Switch
        id="periodisering-autodetect"
        checked={enabled}
        onCheckedChange={handleChange}
      />
      <label htmlFor="periodisering-autodetect" className="cursor-pointer text-sm">
        Aktivera automatisk periodiseringsdetektering
      </label>
      <SettingsRowEnd>
        <Link
          href="/bookkeeping/year-end/periodisering"
          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
        >
          <ExternalLink className="h-3.5 w-3.5" />
          Öppna periodiserings-wizarden
        </Link>
      </SettingsRowEnd>
    </SettingsRow>
  )
}