fotospiel-app/resources/js/admin/mobile/components/FormControls.tsx

import React from 'react';
import { ChevronDown } from 'lucide-react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { withAlpha } from './colors';
import { useAdminTheme } from '../theme';

type FieldProps = {
  label: string;
  hint?: string;
  error?: string | null;
  children: React.ReactNode;
};

export function MobileField({ label, hint, error, children }: FieldProps) {
  const { text, muted, danger } = useAdminTheme();

  return (
    <YStack space="$1.5">
      <Text fontSize="$sm" fontWeight="800" color={text}>
        {label}
      </Text>
      {children}
      {hint ? (
        <Text fontSize="$xs" color={muted}>
          {hint}
        </Text>
      ) : null}
      {error ? (
        <Text fontSize="$xs" color={danger}>
          {error}
        </Text>
      ) : null}
    </YStack>
  );
}

type ControlProps = {
  hasError?: boolean;
  compact?: boolean;
};

export const MobileInput = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'> & ControlProps>(
  function MobileInput({ hasError = false, compact = false, style, ...props }, ref) {
    const { border, surface, text, primary, danger } = useAdminTheme();
    const [focused, setFocused] = React.useState(false);

    const height = compact ? 36 : 44;
    const borderColor = hasError ? danger : focused ? primary : border;
    const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);

    return (
      <input
        ref={ref}
        {...props}
        onFocus={(event) => {
          setFocused(true);
          props.onFocus?.(event);
        }}
        onBlur={(event) => {
          setFocused(false);
          props.onBlur?.(event);
        }}
        style={{
          width: '100%',
          height,
          borderRadius: 12,
          border: `1px solid ${borderColor}`,
          padding: '0 12px',
          fontSize: compact ? 13 : 14,
          background: surface,
          color: text,
          outline: 'none',
          boxShadow: focused || hasError ? `0 0 0 3px ${ringColor}` : 'none',
          transition: 'border-color 150ms ease, box-shadow 150ms ease',
          ...style,
        }}
      />
    );
  },
);

export const MobileTextArea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentPropsWithoutRef<'textarea'> & ControlProps
>(function MobileTextArea({ hasError = false, compact = false, style, ...props }, ref) {
  const { border, surface, text, primary, danger } = useAdminTheme();
  const [focused, setFocused] = React.useState(false);

  const borderColor = hasError ? danger : focused ? primary : border;
  const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);

  return (
    <textarea
      ref={ref}
      {...props}
      onFocus={(event) => {
        setFocused(true);
        props.onFocus?.(event);
      }}
      onBlur={(event) => {
        setFocused(false);
        props.onBlur?.(event);
      }}
      style={{
        width: '100%',
        borderRadius: 12,
        border: `1px solid ${borderColor}`,
        padding: '10px 12px',
        fontSize: compact ? 13 : 14,
        background: surface,
        color: text,
        outline: 'none',
        minHeight: compact ? 72 : 96,
        boxShadow: focused || hasError ? `0 0 0 3px ${ringColor}` : 'none',
        transition: 'border-color 150ms ease, box-shadow 150ms ease',
        resize: 'vertical',
        ...style,
      }}
    />
  );
});

export function MobileSelect({
  children,
  hasError = false,
  compact = false,
  style,
  ...props
}: React.ComponentPropsWithoutRef<'select'> & ControlProps) {
  const { border, surface, text, primary, danger, subtle } = useAdminTheme();
  const [focused, setFocused] = React.useState(false);

  const height = compact ? 36 : 44;
  const borderColor = hasError ? danger : focused ? primary : border;
  const ringColor = hasError ? withAlpha(danger, 0.18) : withAlpha(primary, 0.18);

  return (
    <XStack position="relative" alignItems="center">
      <select
        {...props}
        onFocus={(event) => {
          setFocused(true);
          props.onFocus?.(event);
        }}
        onBlur={(event) => {
          setFocused(false);
          props.onBlur?.(event);
        }}
        style={{
          width: '100%',
          height,
          borderRadius: 12,
          border: `1px solid ${borderColor}`,
          padding: '0 36px 0 12px',
          fontSize: compact ? 13 : 14,
          background: surface,
          color: text,
          outline: 'none',
          appearance: 'none',
          WebkitAppearance: 'none',
          boxShadow: focused || hasError ? `0 0 0 3px ${ringColor}` : 'none',
          transition: 'border-color 150ms ease, box-shadow 150ms ease',
          ...style,
        }}
      >
        {children}
      </select>
      <XStack position="absolute" right={12} pointerEvents="none">
        <ChevronDown size={16} color={subtle} />
      </XStack>
    </XStack>
  );
}