'use client';

import { useMemo, useState } from 'react';
import type { CheckoutCustomFieldDefinition } from 'brainerce';
import { isDateValueAllowed } from 'brainerce';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';
import { DatePicker } from '@/components/checkout/date-picker';
import { DateTimePicker } from '@/components/checkout/datetime-picker';

/** Inline, dependency-free — this file lives in the base template and must
 * not assume any design pack (e.g. Atelier's icon set) is present; canvas
 * scaffolds skip design packs entirely. */
const INPUT_CLASS =
  'h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';

interface CustomFieldsStepProps {
  fields: CheckoutCustomFieldDefinition[];
  values: Record<string, unknown>;
  onChange: (key: string, value: unknown) => void;
  onApply: () => void;
  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
  /**
   * The store's IANA timezone (`storeInfo.timezone`). DATE/DATETIME fields need
   * it to apply a field's leadTimeMinutes/cutoffTime/maxDaysAhead: the SDK
   * skips those bounds when no clock reaches it, so the picker would offer days
   * the API rejects.
   */
  timezone?: string;
  loading?: boolean;
  className?: string;
}

const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';

export function CustomFieldsStep({
  fields,
  values,
  onChange,
  onApply,
  onUploadFile,
  timezone,
  loading = false,
  className,
}: CustomFieldsStepProps) {
  const t = useTranslations('checkout');
  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());

  const isMissing = fields.some((f) => {
    if (!f.required) return false;
    const v = values[f.key];
    return v === undefined || v === null || v === '';
  });

  // ---- Pre-submit date guard ----
  //
  // The pickers disable unavailable days and times at the moment they render,
  // but a shopper can sit on this step long enough for a `leadTimeMinutes` or
  // `cutoffTime` bound to overtake the value they already picked. Submitting
  // it then 400s AFTER they have committed. `isDateValueAllowed` is the
  // authoritative client-side re-check, so run it on every keystroke-free
  // render and keep the button shut while anything is stale.
  //
  // The clock is what applies leadTimeMinutes / cutoffTime / maxDaysAhead, and
  // `isDateValueAllowed` requires a real IANA `timezone` (it is typed
  // `string`, not optional). `timezone` on this component IS optional, so when
  // the store has none we skip the guard entirely rather than pass an empty
  // string, which would evaluate the bounds against a bogus zone.
  const staleDateKeys = useMemo(() => {
    const stale = new Set<string>();
    if (!timezone) return stale;

    for (const field of fields) {
      if (field.type !== 'DATE' && field.type !== 'DATETIME') continue;
      if (!field.dateAvailability) continue;

      const raw = values[field.key];
      if (typeof raw !== 'string' || raw === '') continue;

      // A DATE value is "YYYY-MM-DD", which parses to UTC midnight — exactly
      // what isDateValueAllowed reads back with getUTC* for the DATE branch.
      const instant = new Date(raw);
      if (Number.isNaN(instant.getTime())) continue;

      const verdict = isDateValueAllowed(instant, field.dateAvailability, field.type, timezone);
      if (!verdict.allowed) {
        stale.add(field.key);
        // `reason` is untranslated English prose meant for developers — log
        // it, never render it. The shopper gets the localized line below.
        console.warn(`Checkout field "${field.key}" is no longer available:`, verdict.reason);
      }
    }
    return stale;
  }, [fields, values, timezone]);

  return (
    <div className={cn('space-y-4', className)}>
      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>

      {fields.map((field) => {
        const value = values[field.key];
        const labelEl = (
          <label
            htmlFor={`cf-${field.key}`}
            className="text-foreground mb-1 block text-sm font-medium"
          >
            {field.name}
            {field.required && <span className="text-destructive ms-1">*</span>}
          </label>
        );
        const helpEl = field.description ? (
          <p className="text-muted-foreground mt-1 whitespace-pre-line text-xs">
            {field.description}
          </p>
        ) : null;

        switch (field.type) {
          case 'TEXT':
            return (
              <div key={field.key}>
                {labelEl}
                <input
                  id={`cf-${field.key}`}
                  type="text"
                  value={(value as string) ?? ''}
                  onChange={(e) => onChange(field.key, e.target.value)}
                  required={field.required}
                  minLength={field.minLength ?? undefined}
                  maxLength={field.maxLength ?? undefined}
                  className={INPUT_CLASS}
                />
                {helpEl}
              </div>
            );

          case 'TEXTAREA':
            return (
              <div key={field.key}>
                {labelEl}
                <textarea
                  id={`cf-${field.key}`}
                  value={(value as string) ?? ''}
                  onChange={(e) => onChange(field.key, e.target.value)}
                  required={field.required}
                  minLength={field.minLength ?? undefined}
                  maxLength={field.maxLength ?? undefined}
                  rows={3}
                  className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary w-full rounded-lg border px-3.5 py-2.5 text-sm focus-visible:outline-none focus-visible:ring-2"
                />
                {helpEl}
              </div>
            );

          case 'NUMBER':
            return (
              <div key={field.key}>
                {labelEl}
                <input
                  id={`cf-${field.key}`}
                  type="number"
                  value={(value as number | string) ?? ''}
                  onChange={(e) =>
                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
                  }
                  required={field.required}
                  min={field.minValue ?? undefined}
                  max={field.maxValue ?? undefined}
                  className={INPUT_CLASS}
                />
                {helpEl}
              </div>
            );

          case 'BOOLEAN':
            return (
              <div key={field.key} className="flex items-start gap-2">
                <input
                  id={`cf-${field.key}`}
                  type="checkbox"
                  checked={value === true}
                  onChange={(e) => onChange(field.key, e.target.checked)}
                  className="mt-1"
                />
                <div className="flex-1">
                  <label
                    htmlFor={`cf-${field.key}`}
                    className="text-foreground text-sm font-medium"
                  >
                    {field.name}
                    {field.required && <span className="text-destructive ms-1">*</span>}
                  </label>
                  {helpEl}
                </div>
              </div>
            );

          case 'SELECT':
            return (
              <div key={field.key}>
                {labelEl}
                <select
                  id={`cf-${field.key}`}
                  value={(value as string) ?? ''}
                  onChange={(e) => onChange(field.key, e.target.value)}
                  required={field.required}
                  className={INPUT_CLASS}
                >
                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
                  {field.options?.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                      {opt.label}
                    </option>
                  ))}
                </select>
                {helpEl}
              </div>
            );

          case 'DATE':
            return (
              <div key={field.key}>
                {labelEl}
                <DatePicker
                  id={`cf-${field.key}`}
                  value={(value as string) ?? ''}
                  onChange={(v) => onChange(field.key, v)}
                  required={field.required}
                  availability={field.dateAvailability}
                  timezone={timezone}
                  placeholder={t('customFieldsDatePlaceholder')}
                  todayLabel={t('customFieldsDateToday')}
                  clearLabel={t('customFieldsDateClear')}
                  prevMonthLabel={t('customFieldsDatePrevMonth')}
                  nextMonthLabel={t('customFieldsDateNextMonth')}
                />
                {helpEl}
                {staleDateKeys.has(field.key) && (
                  <p className="text-destructive mt-1 text-xs">{t('customFieldsTimeNoneLeft')}</p>
                )}
              </div>
            );

          case 'DATETIME':
            return (
              <div key={field.key}>
                {labelEl}
                <DateTimePicker
                  id={`cf-${field.key}`}
                  value={(value as string) ?? ''}
                  onChange={(v) => onChange(field.key, v)}
                  required={field.required}
                  availability={field.dateAvailability}
                  timezone={timezone}
                  placeholder={t('customFieldsDatePlaceholder')}
                  todayLabel={t('customFieldsDateToday')}
                  clearLabel={t('customFieldsDateClear')}
                  prevMonthLabel={t('customFieldsDatePrevMonth')}
                  nextMonthLabel={t('customFieldsDateNextMonth')}
                  timeLabel={t('customFieldsTimeLabel')}
                  closedLabel={t('customFieldsTimeClosed')}
                  noTimesLabel={t('customFieldsTimeNoneLeft')}
                  toLabel={t('customFieldsTimeTo')}
                />
                {helpEl}
                {staleDateKeys.has(field.key) && (
                  <p className="text-destructive mt-1 text-xs">{t('customFieldsTimeNoneLeft')}</p>
                )}
              </div>
            );

          case 'IMAGE': {
            const isUploading = uploadingKeys.has(field.key);
            return (
              <div key={field.key}>
                {labelEl}
                {value ? (
                  <div className="relative inline-block">
                    <img
                      src={value as string}
                      alt={field.name}
                      className="border-border max-h-32 rounded border object-contain"
                    />
                    <button
                      type="button"
                      onClick={() => onChange(field.key, '')}
                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
                      aria-label={t('customFieldsImageRemove')}
                    >
                      ✕
                    </button>
                  </div>
                ) : (
                  <label
                    htmlFor={`cf-${field.key}`}
                    className={cn(
                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
                      isUploading ? 'opacity-50' : 'hover:border-primary/40'
                    )}
                  >
                    <span className="text-muted-foreground text-sm">
                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
                    </span>
                    <input
                      id={`cf-${field.key}`}
                      type="file"
                      accept={ACCEPTED_IMAGE_TYPES}
                      disabled={isUploading || !onUploadFile}
                      className="hidden"
                      onChange={async (e) => {
                        const file = e.target.files?.[0];
                        if (!file || !onUploadFile) return;
                        if (file.size > MAX_IMAGE_SIZE) {
                          alert(t('customFieldsImageTooLarge'));
                          return;
                        }
                        setUploadingKeys((prev) => new Set(prev).add(field.key));
                        try {
                          const result = await onUploadFile(file);
                          onChange(field.key, result.url);
                        } catch {
                          // Upload failed — user can retry
                        } finally {
                          setUploadingKeys((prev) => {
                            const next = new Set(prev);
                            next.delete(field.key);
                            return next;
                          });
                        }
                      }}
                    />
                  </label>
                )}
                {helpEl}
              </div>
            );
          }

          default:
            return null;
        }
      })}

      <button
        type="button"
        onClick={onApply}
        disabled={loading || isMissing || staleDateKeys.size > 0}
        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-12 w-full select-none items-center justify-center gap-2 whitespace-nowrap rounded-full px-8 text-base font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50"
      >
        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
      </button>
    </div>
  );
}