'use client'
// tdd-guard:skip — pure presentational sub-components; no business logic, no Supabase.

// Small presentational sub-components extracted from oee-calculator.tsx.
// Pure UI — no business logic, no Supabase, no module-level state.

import { useState } from 'react'
import { ChevronDown, ChevronUp, Info, RotateCcw, Pencil } from 'lucide-react'
import { INPUT_CLS, READONLY_CLS, LABEL_CLS, CARD_CLS } from './oee-form-constants'
import FieldHint, { type FieldHintContent } from '@/components/ui/field-hint'

export function Tooltip({ text }: { text: string }) {
  const [show, setShow] = useState(false)
  return (
    <span className="relative inline-flex ml-1">
      <button
        type="button"
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
        className="text-muted-foreground hover:text-primary"
      >
        <Info size={12} />
      </button>
      {show && (
        <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 w-48 bg-foreground text-white text-xs rounded-lg px-2.5 py-1.5 z-50 leading-relaxed">
          {text}
        </span>
      )}
    </span>
  )
}

export function CalcBadge() {
  return (
    <span className="ml-1.5 text-[9px] font-semibold text-primary bg-secondary px-1.5 py-0.5 rounded uppercase tracking-wider">
      berechnet
    </span>
  )
}

export function CalcField({ label, autoDisplay, override, onOverride, onReset, tooltip, hint }: {
  label: React.ReactNode
  autoDisplay: string
  override: number | null
  onOverride: (v: number) => void
  onReset: () => void
  tooltip?: string
  hint?: FieldHintContent
}) {
  return (
    <div>
      <label className={LABEL_CLS}>
        {label}
        {hint ? <FieldHint hint={hint} /> : tooltip && <Tooltip text={tooltip} />}
      </label>
      <div className="flex items-center gap-2">
        {override !== null ? (
          <>
            <input
              type="number"
              value={override}
              onChange={e => onOverride(Number(e.target.value))}
              className={`${INPUT_CLS} flex-1`}
            />
            <button type="button" onClick={onReset} title="Zurücksetzen" className="text-muted-foreground hover:text-destructive shrink-0">
              <RotateCcw size={14} />
            </button>
          </>
        ) : (
          <>
            <div className={`${READONLY_CLS} flex-1 flex items-center justify-between`}>
              <span>{autoDisplay}</span>
              <CalcBadge />
            </div>
            <button
              type="button"
              onClick={() => onOverride(Number(autoDisplay.replace(/[^\d.]/g, '')) || 0)}
              title="Wert überschreiben"
              className="text-muted-foreground hover:text-primary shrink-0"
            >
              <Pencil size={13} />
            </button>
          </>
        )}
      </div>
    </div>
  )
}

export function SectionCard({ title, children, collapsible, defaultOpen = true }: {
  title: string
  children: React.ReactNode
  collapsible?: boolean
  defaultOpen?: boolean
}) {
  const [open, setOpen] = useState(defaultOpen)
  return (
    <div className={CARD_CLS}>
      <div className="px-5 py-3 border-b border-border flex items-center justify-between">
        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
        {collapsible && (
          <button type="button" onClick={() => setOpen(v => !v)} className="text-muted-foreground hover:text-foreground">
            {open ? <ChevronUp size={15} /> : <ChevronDown size={15} />}
          </button>
        )}
      </div>
      {(!collapsible || open) && <div className="p-5 space-y-4">{children}</div>}
    </div>
  )
}

export function NumericInput({ label, value, onChange, min, max, step, tooltip, hint, placeholder, readOnly, inputCls }: {
  label: React.ReactNode
  value: number | string
  onChange?: (v: number) => void
  min?: number; max?: number; step?: number
  tooltip?: string
  hint?: FieldHintContent
  placeholder?: string
  readOnly?: boolean
  /** Override the full input className (e.g. to apply validation border tokens) */
  inputCls?: string
}) {
  return (
    <div>
      <label className={LABEL_CLS}>
        {label}
        {hint ? <FieldHint hint={hint} /> : tooltip && <Tooltip text={tooltip} />}
      </label>
      {readOnly
        ? <div className={READONLY_CLS}>{value}</div>
        : <input
            type="number"
            value={value}
            onChange={e => onChange?.(Number(e.target.value))}
            min={min} max={max} step={step ?? 1}
            placeholder={placeholder}
            className={inputCls ?? INPUT_CLS}
          />
      }
    </div>
  )
}