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 { useTheme } from '@tamagui/core';
import { withAlpha } from './colors';

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

export function MobileField({ label, hint, error, children }: FieldProps) {
  const theme = useTheme();
  const labelColor = String(theme.color?.val ?? '#111827');
  const hintColor = String(theme.gray?.val ?? '#6b7280');
  const errorColor = String(theme.red10?.val ?? '#b91c1c');

  return (
    <YStack space="$1.5">
      <Text fontSize="$sm" fontWeight="800" color={labelColor}>
        {label}
      </Text>
      {children}
      {hint ? (
        <Text fontSize="$xs" color={hintColor}>
          {hint}
        </Text>
      ) : null}
      {error ? (
        <Text fontSize="$xs" color={errorColor}>
          {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 theme = useTheme();
    const [focused, setFocused] = React.useState(false);
    const border = String(theme.borderColor?.val ?? '#e5e7eb');
    const surface = String(theme.surface?.val ?? '#ffffff');
    const text = String(theme.color?.val ?? '#111827');
    const primary = String(theme.primary?.val ?? '#2563eb');
    const danger = String(theme.red10?.val ?? '#b91c1c');

    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 theme = useTheme();
  const [focused, setFocused] = React.useState(false);
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const surface = String(theme.surface?.val ?? '#ffffff');
  const text = String(theme.color?.val ?? '#111827');
  const primary = String(theme.primary?.val ?? '#2563eb');
  const danger = String(theme.red10?.val ?? '#b91c1c');

  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 theme = useTheme();
  const [focused, setFocused] = React.useState(false);
  const border = String(theme.borderColor?.val ?? '#e5e7eb');
  const surface = String(theme.surface?.val ?? '#ffffff');
  const text = String(theme.color?.val ?? '#111827');
  const primary = String(theme.primary?.val ?? '#2563eb');
  const danger = String(theme.red10?.val ?? '#b91c1c');
  const muted = String(theme.gray?.val ?? '#94a3b8');

  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={muted} />
      </XStack>
    </XStack>
  );
}