"use client"

import type { SettingsFieldConfig } from "@/components/settings/types"
import { SettingsField } from "@/components/settings/ui/settings-field"
import { SettingsGrid } from "@/components/settings/ui/settings-grid"
import { SettingsInput } from "@/components/settings/ui/settings-input"
import { SettingsSelect } from "@/components/settings/ui/settings-select"
import { SettingsSwitch } from "@/components/settings/ui/settings-switch"
import { SettingsTextarea } from "@/components/settings/ui/settings-textarea"

type SettingsFieldsRendererProps<T extends Record<string, unknown>> = {
  fields: SettingsFieldConfig[]
  values: T
  onChange: (name: keyof T & string, value: string | boolean) => void
  gridClassName?: string
}

export function SettingsFieldsRenderer<T extends Record<string, unknown>>({
  fields,
  values,
  onChange,
  gridClassName,
}: SettingsFieldsRendererProps<T>) {
  return (
    <SettingsGrid className={gridClassName}>
      {fields.map((field) => {
        const id = `settings-${field.name}`
        const value = values[field.name]
        const span = field.span ?? (field.type === "textarea" || field.type === "textarea-lg" || field.type === "readonly" ? "full" : "half")

        return (
          <SettingsField
            key={field.name}
            label={field.label}
            description={field.description}
            htmlFor={id}
            span={span}
          >
            {field.type === "switch" ? (
              <SettingsSwitch
                id={id}
                checked={Boolean(value)}
                onCheckedChange={(checked) => onChange(field.name, checked)}
              />
            ) : field.type === "textarea" || field.type === "textarea-lg" ? (
              <SettingsTextarea
                id={id}
                size={field.type === "textarea-lg" ? "lg" : "default"}
                value={String(value ?? "")}
                placeholder={field.placeholder}
                onChange={(e) => onChange(field.name, e.target.value)}
              />
            ) : field.type === "select" ? (
              <SettingsSelect
                value={String(value ?? "")}
                onValueChange={(v) => onChange(field.name, v)}
                options={field.options ?? []}
                placeholder={field.placeholder}
              />
            ) : field.type === "readonly" ? (
              <SettingsInput
                id={id}
                readOnly
                value={String(value ?? "")}
                className="bg-muted/40 font-mono text-xs text-muted-foreground"
              />
            ) : (
              <SettingsInput
                id={id}
                type={
                  field.type === "email"
                    ? "email"
                    : field.type === "url"
                      ? "url"
                      : field.type === "password"
                        ? "password"
                        : field.type === "number"
                          ? "number"
                          : "text"
                }
                value={String(value ?? "")}
                placeholder={field.placeholder}
                onChange={(e) => onChange(field.name, e.target.value)}
              />
            )}
          </SettingsField>
        )
      })}
    </SettingsGrid>
  )
}