import type { ReactNode } from 'react'

// SHARED FORM PRIMITIVES.
//
// These existed as copied class strings on every screen that had a form, which is how a product ends up with
// four slightly different inputs. They are here so the surfaces built on top of them cannot drift, and so a
// change to the focus ring is one edit rather than a search.
//
// Tokens only, no literal colours. The palette is defined once in index.css and a hard coded hex here would
// survive a rebrand and look wrong.

export const fieldCls =
  'w-full rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm text-ink outline-none placeholder:text-faint focus:border-blue/60 disabled:opacity-50'

export const btnPrimary =
  'inline-flex items-center gap-1.5 rounded-md bg-blue/20 px-3 py-1.5 text-sm font-semibold text-blue-soft hover:bg-blue/30 disabled:opacity-50'

export const btnGhost =
  'inline-flex items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-40'

export const btnDanger =
  'inline-flex items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:border-risk/60 hover:text-risk disabled:opacity-40'

// Labeled wraps a control in the uppercase caption every existing form uses.
export function Labeled({
  label,
  hint,
  children,
  className = '',
}: {
  label: string
  hint?: string
  children: ReactNode
  className?: string
}) {
  return (
    <label className={`flex flex-col gap-1 ${className}`}>
      <span className="text-[11px] font-bold uppercase tracking-wider text-muted">{label}</span>
      {children}
      {hint && <span className="text-[11px] text-faint">{hint}</span>}
    </label>
  )
}

// SettingRow is the settings layout: what the setting is, what it does in plain words, and the control.
//
// The consequence line is not decoration. "Managers and above" means nothing on its own; what an owner is
// actually choosing is who can infer the margin from a bill rate, and the row is where that gets said.
export function SettingRow({
  label,
  hint,
  children,
}: {
  label: string
  hint: string
  children: ReactNode
}) {
  return (
    <div className="flex flex-col gap-1.5 border-b border-line/40 py-3 last:border-0 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
      <div className="min-w-0">
        <div className="text-sm font-semibold text-ink">{label}</div>
        <div className="text-[11px] leading-relaxed text-muted">{hint}</div>
      </div>
      <div className="shrink-0">{children}</div>
    </div>
  )
}

export function Select<T extends string>({
  value,
  onChange,
  choices,
  disabled,
  className = '',
}: {
  value: T
  onChange: (v: T) => void
  choices: { value: T; label: string }[]
  disabled?: boolean
  className?: string
}) {
  return (
    <select
      value={value}
      disabled={disabled}
      onChange={(e) => onChange(e.target.value as T)}
      className={`rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm text-ink outline-none focus:border-blue/60 disabled:opacity-50 ${className}`}
    >
      {choices.map((c) => (
        <option key={c.value} value={c.value} className="bg-navy-900">
          {c.label}
        </option>
      ))}
    </select>
  )
}

// Toggle is a switch, not a checkbox, because these are settings that take effect on click rather than on a
// later save. role and aria-checked are set so it is a switch to a screen reader too.
export function Toggle({
  value,
  onChange,
  disabled,
  label,
}: {
  value: boolean
  onChange: (v: boolean) => void
  disabled?: boolean
  label: string
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={value}
      aria-label={label}
      disabled={disabled}
      onClick={() => onChange(!value)}
      className={`relative h-6 w-11 shrink-0 rounded-full border transition-colors disabled:opacity-40 ${
        value ? 'border-blue/60 bg-blue/40' : 'border-line/70 bg-navy-950/60'
      }`}
    >
      <span
        className={`absolute top-0.5 size-4.5 rounded-full transition-all ${
          value ? 'left-[1.4rem] bg-blue-soft' : 'left-0.5 bg-faint'
        }`}
      />
    </button>
  )
}

// Note is the one place a screen says something went wrong, went right, or needs care. One component so the
// three tones cannot be spelled three ways, and so nothing invents a fourth.
export function Note({ tone, children }: { tone: 'warn' | 'risk' | 'ok' | 'muted'; children: ReactNode }) {
  const cls = {
    warn: 'border-warn/40 bg-warn/10 text-warn',
    risk: 'border-risk/40 bg-risk/10 text-risk',
    ok: 'border-ok/40 bg-ok/10 text-ok',
    muted: 'border-line/60 bg-navy-950/40 text-muted',
  }[tone]
  return (
    <div className={`rounded-md border px-3 py-2 text-[11px] leading-relaxed ${cls}`}>{children}</div>
  )
}

// Empty is the state a list is in most of the time on a new account. It takes a reason rather than only a
// title, because "no candidates" and "no candidates YOU can see" are different facts and the second one is
// the one somebody would otherwise file a support ticket about.
export function Empty({ title, reason, action }: { title: string; reason?: string; action?: ReactNode }) {
  return (
    <div className="rounded-lg border border-dashed border-line/60 px-4 py-8 text-center">
      <div className="text-sm font-semibold text-muted">{title}</div>
      {reason && <div className="mx-auto mt-1 max-w-md text-[11px] leading-relaxed text-faint">{reason}</div>}
      {action && <div className="mt-3 flex justify-center">{action}</div>}
    </div>
  )
}