'use client';

import { useState } from 'react';
import type { ProductCustomizationField } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import type { CustomizationValues } from '@/core/lib/product-options';

// The pure validation logic lives in core (zero markup) so that
// `core/hooks/use-product-page` never imports from `ui/`. Re-exported here
// for backward compatibility with existing imports.
export { validateCustomization } from '@/core/lib/product-options';
export type { CustomizationValues } from '@/core/lib/product-options';

interface CustomizationFieldsProps {
  fields: ProductCustomizationField[];
  values: CustomizationValues;
  onChange: (values: CustomizationValues) => void;
  errors?: Record<string, string>;
}

export function CustomizationFields({
  fields,
  values,
  onChange,
  errors = {},
}: CustomizationFieldsProps) {
  const t = useTranslations('customization');

  if (fields.length === 0) return null;

  const sorted = [...fields].sort((a, b) => a.position - b.position);

  const setValue = (key: string, value: unknown) => {
    onChange({ ...values, [key]: value });
  };

  return (
    <div className="border-border space-y-4 border-t pt-4">
      <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
      <div className="space-y-4">
        {sorted.map((field) => (
          <CustomizationFieldRow
            key={field.definitionId}
            field={field}
            value={values[field.key]}
            error={errors[field.key]}
            onChange={(v) => setValue(field.key, v)}
          />
        ))}
      </div>
    </div>
  );
}

interface RowProps {
  field: ProductCustomizationField;
  value: unknown;
  error?: string;
  onChange: (value: unknown) => void;
}

/** Radix Select items can't carry an empty-string value, so "no choice"
 *  round-trips through this sentinel and is written back as undefined. */
const NONE = '__none__';

function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
  const t = useTranslations('customization');
  const labelText = (
    <Label className="text-foreground mb-1.5 block text-sm font-medium">
      {field.name}
      {field.required && <span className="text-destructive ms-1">*</span>}
    </Label>
  );

  const help = field.description ? (
    <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
  ) : null;

  const errorHint = error ? <p className="text-destructive mt-1 text-xs">{error}</p> : null;

  switch (field.type) {
    case 'TEXTAREA':
      return (
        <div>
          {labelText}
          <Textarea
            value={typeof value === 'string' ? value : ''}
            onChange={(e) => onChange(e.target.value)}
            minLength={field.minLength ?? undefined}
            maxLength={field.maxLength ?? undefined}
            required={field.required}
            rows={3}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );

    case 'NUMBER':
      return (
        <div>
          {labelText}
          <Input
            type="number"
            value={typeof value === 'number' ? value : ''}
            onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
            min={field.minValue ?? undefined}
            max={field.maxValue ?? undefined}
            required={field.required}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );

    case 'BOOLEAN':
      return (
        <div>
          <Label className="inline-flex items-center gap-2">
            <Checkbox
              checked={value === true}
              onCheckedChange={(checked) => onChange(checked === true)}
            />
            <span className="text-foreground text-sm font-medium">
              {field.name}
              {field.required && <span className="text-destructive ms-1">*</span>}
            </span>
          </Label>
          {help}
          {errorHint}
        </div>
      );

    case 'DATE':
      return (
        <div>
          {labelText}
          <Input
            type="date"
            value={typeof value === 'string' ? value : ''}
            onChange={(e) => onChange(e.target.value)}
            required={field.required}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );

    case 'DATETIME':
      return (
        <div>
          {labelText}
          <Input
            type="datetime-local"
            value={typeof value === 'string' ? value : ''}
            onChange={(e) => onChange(e.target.value)}
            required={field.required}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );

    case 'COLOR':
      return (
        <div>
          {labelText}
          <Input
            type="color"
            value={typeof value === 'string' && value ? value : '#000000'}
            onChange={(e) => onChange(e.target.value)}
            required={field.required}
            className="h-10 w-20 rounded p-1"
          />
          {help}
          {errorHint}
        </div>
      );

    case 'SELECT': {
      const options = field.enumValues ?? [];
      return (
        <div>
          {labelText}
          <Select
            value={typeof value === 'string' && value ? value : NONE}
            onValueChange={(v) => onChange(v === NONE ? undefined : v)}
          >
            <SelectTrigger className="rounded" aria-label={field.name}>
              <SelectValue placeholder={t('selectPlaceholder')} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={NONE}>{t('selectPlaceholder')}</SelectItem>
              {options.map((opt) => (
                <SelectItem key={opt.value} value={opt.value}>
                  {opt.label || opt.value}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {help}
          {errorHint}
        </div>
      );
    }

    case 'MULTI_SELECT': {
      const options = field.enumValues ?? [];
      const current = Array.isArray(value) ? (value as string[]) : [];
      const toggle = (opt: string) => {
        onChange(current.includes(opt) ? current.filter((v) => v !== opt) : [...current, opt]);
      };
      return (
        <div>
          {labelText}
          <div className="space-y-1.5">
            {options.map((opt) => (
              <Label key={opt.value} className="me-4 inline-flex items-center gap-2">
                <Checkbox
                  checked={current.includes(opt.value)}
                  onCheckedChange={() => toggle(opt.value)}
                />
                <span className="text-foreground text-sm font-normal">
                  {opt.label || opt.value}
                </span>
              </Label>
            ))}
          </div>
          {help}
          {errorHint}
        </div>
      );
    }

    case 'IMAGE':
      return (
        <SingleImageField
          field={field}
          value={typeof value === 'string' ? value : undefined}
          onChange={onChange}
          labelText={labelText}
          help={help}
          errorHint={errorHint}
        />
      );

    case 'GALLERY':
      return (
        <GalleryField
          field={field}
          value={Array.isArray(value) ? (value as string[]) : []}
          onChange={onChange}
          labelText={labelText}
          help={help}
          errorHint={errorHint}
        />
      );

    case 'URL':
      return (
        <div>
          {labelText}
          <Input
            type="url"
            value={typeof value === 'string' ? value : ''}
            onChange={(e) => onChange(e.target.value)}
            required={field.required}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );

    default:
      return (
        <div>
          {labelText}
          <Input
            type="text"
            value={typeof value === 'string' ? value : ''}
            onChange={(e) => onChange(e.target.value)}
            minLength={field.minLength ?? undefined}
            maxLength={field.maxLength ?? undefined}
            required={field.required}
            className="rounded"
          />
          {help}
          {errorHint}
        </div>
      );
  }
}

interface FileFieldProps {
  field: ProductCustomizationField;
  labelText: React.ReactNode;
  help: React.ReactNode;
  errorHint: React.ReactNode;
  onChange: (value: unknown) => void;
}

function SingleImageField({
  field,
  value,
  onChange,
  labelText,
  help,
  errorHint,
}: FileFieldProps & { value?: string }) {
  const t = useTranslations('customization');
  const [uploading, setUploading] = useState(false);
  const [uploadError, setUploadError] = useState<string | null>(null);

  async function handleFile(file: File | null) {
    if (!file) return;
    setUploading(true);
    setUploadError(null);
    try {
      const { getClient } = await import('@/core/lib/brainerce');
      const client = getClient();
      const result = await client.uploadCustomizationFile(file);
      onChange(result.url);
    } catch (err) {
      console.error('Upload failed', err);
      setUploadError(t('uploadFailed'));
    } finally {
      setUploading(false);
    }
  }

  return (
    <div>
      {labelText}
      <input
        type="file"
        accept="image/*"
        onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
        disabled={uploading}
        required={field.required && !value}
        className="text-foreground text-sm"
      />
      {uploading && (
        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
          <LoadingSpinner size="sm" />
          {t('uploading')}
        </span>
      )}
      {value && !uploading && (
        <div className="mt-2">
          <img src={value} alt="" className="border-border h-20 w-20 rounded border object-cover" />
        </div>
      )}
      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
      {help}
      {errorHint}
    </div>
  );
}

function GalleryField({
  field,
  value,
  onChange,
  labelText,
  help,
  errorHint,
}: FileFieldProps & { value: string[] }) {
  const t = useTranslations('customization');
  const [uploading, setUploading] = useState(false);
  const [uploadError, setUploadError] = useState<string | null>(null);

  async function handleFiles(fileList: FileList | null) {
    if (!fileList || fileList.length === 0) return;
    setUploading(true);
    setUploadError(null);
    try {
      const { getClient } = await import('@/core/lib/brainerce');
      const client = getClient();
      const newUrls: string[] = [];
      for (const file of Array.from(fileList)) {
        const result = await client.uploadCustomizationFile(file);
        newUrls.push(result.url);
      }
      onChange([...value, ...newUrls]);
    } catch (err) {
      console.error('Upload failed', err);
      setUploadError(t('uploadFailed'));
    } finally {
      setUploading(false);
    }
  }

  function removeAt(idx: number) {
    onChange(value.filter((_, i) => i !== idx));
  }

  return (
    <div>
      {labelText}
      <input
        type="file"
        accept="image/*"
        multiple
        onChange={(e) => handleFiles(e.target.files)}
        disabled={uploading}
        className="text-foreground text-sm"
      />
      {uploading && (
        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
          <LoadingSpinner size="sm" />
          {t('uploading')}
        </span>
      )}
      {value.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-2">
          {value.map((url, idx) => (
            <div key={`${url}-${idx}`} className="relative">
              <img
                src={url}
                alt=""
                className="border-border h-16 w-16 rounded border object-cover"
              />
              <button
                type="button"
                onClick={() => removeAt(idx)}
                aria-label={t('removeImage')}
                className="bg-destructive text-destructive-foreground absolute -end-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-xs"
              >
                ×
              </button>
            </div>
          ))}
        </div>
      )}
      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
      {help}
      {errorHint}
    </div>
  );
}