'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 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>;
}

/**
 * DESIGN ME — buyer-input customization fields on the product page
 * (engraving text, gift date, uploaded artwork, …). Field definitions,
 * values and validation errors come from useProductPage(); every input type
 * below must stay functional (including the image/gallery uploads).
 *
 * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
 */
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 (
    <fieldset>
      <legend>{t('title')}</legend>
      <div>
        {sorted.map((field) => (
          <CustomizationFieldRow
            key={field.definitionId}
            field={field}
            value={values[field.key]}
            error={errors[field.key]}
            onChange={(v) => setValue(field.key, v)}
          />
        ))}
      </div>
    </fieldset>
  );
}

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

function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
  const t = useTranslations('customization');
  const labelText = (
    <span>
      {field.name}
      {field.required && <span aria-hidden="true"> *</span>}
    </span>
  );

  const help = field.description ? <p>{field.description}</p> : null;

  const errorHint = error ? <p role="alert">{error}</p> : null;

  switch (field.type) {
    case 'TEXTAREA':
      return (
        <div>
          <label>
            {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}
            />
          </label>
          {help}
          {errorHint}
        </div>
      );

    case 'NUMBER':
      return (
        <div>
          <label>
            {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}
            />
          </label>
          {help}
          {errorHint}
        </div>
      );

    case 'BOOLEAN':
      return (
        <div>
          <label className="inline-flex items-center gap-2">
            <input
              type="checkbox"
              checked={value === true}
              onChange={(e) => onChange(e.target.checked)}
            />
            {labelText}
          </label>
          {help}
          {errorHint}
        </div>
      );

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

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

    case 'COLOR':
      return (
        <div>
          <label>
            {labelText}
            <input
              type="color"
              value={typeof value === 'string' && value ? value : '#000000'}
              onChange={(e) => onChange(e.target.value)}
              required={field.required}
            />
          </label>
          {help}
          {errorHint}
        </div>
      );

    case 'SELECT': {
      const options = field.enumValues ?? [];
      return (
        <div>
          <label>
            {labelText}
            <select
              value={typeof value === 'string' ? value : ''}
              onChange={(e) => onChange(e.target.value || undefined)}
              required={field.required}
            >
              <option value="">{t('selectPlaceholder')}</option>
              {options.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label || opt.value}
                </option>
              ))}
            </select>
          </label>
          {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 (
        <fieldset>
          <legend>{labelText}</legend>
          <div>
            {options.map((opt) => (
              <label key={opt.value} className="inline-flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={current.includes(opt.value)}
                  onChange={() => toggle(opt.value)}
                />
                {opt.label || opt.value}
              </label>
            ))}
          </div>
          {help}
          {errorHint}
        </fieldset>
      );
    }

    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>
          <label>
            {labelText}
            <input
              type="url"
              value={typeof value === 'string' ? value : ''}
              onChange={(e) => onChange(e.target.value)}
              required={field.required}
            />
          </label>
          {help}
          {errorHint}
        </div>
      );

    default:
      return (
        <div>
          <label>
            {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}
            />
          </label>
          {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>
      <label>
        {labelText}
        <input
          type="file"
          accept="image/*"
          onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
          disabled={uploading}
          required={field.required && !value}
        />
      </label>
      {uploading && (
        <span>
          <LoadingSpinner size="sm" />
          {t('uploading')}
        </span>
      )}
      {value && !uploading && (
        <div>
          <img src={value} alt="" className="h-20 w-20" />
        </div>
      )}
      {uploadError && <p role="alert">{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>
      <label>
        {labelText}
        <input
          type="file"
          accept="image/*"
          multiple
          onChange={(e) => handleFiles(e.target.files)}
          disabled={uploading}
        />
      </label>
      {uploading && (
        <span>
          <LoadingSpinner size="sm" />
          {t('uploading')}
        </span>
      )}
      {value.length > 0 && (
        <ul className="flex flex-wrap gap-2">
          {value.map((url, idx) => (
            <li key={`${url}-${idx}`}>
              <img src={url} alt="" className="h-16 w-16" />
              <button type="button" onClick={() => removeAt(idx)} aria-label={t('removeImage')}>
                ×
              </button>
            </li>
          ))}
        </ul>
      )}
      {uploadError && <p role="alert">{uploadError}</p>}
      {help}
      {errorHint}
    </div>
  );
}