'use client';

import { useT } from '@/lib/i18n/react';
import { FormField } from '@/components/ui/primitives/FormField';
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@/components/ui/primitives/Select';
import { Switch } from '@/components/ui/primitives/Switch';
import { BasicRowConfigEditor } from '../_shared/BasicRowConfigEditor';
import type { Config } from './config';

const DEAL_TYPES = ['COUPON', 'GROUP'] as const;
const CATEGORIES = ['MEAL', 'BAKERY', 'BEVERAGE', 'DESSERT', 'PACKAGED'] as const;

export function ConfigEditor({
  config,
  onChange,
}: {
  config: Config;
  onChange: (c: Config) => void;
}) {
  const t = useT('page_organizer');
  const tCat = useT('domain_category');
  const tDealType = useT('domain_deal_type');

  return (
    <BasicRowConfigEditor
      config={config}
      onChange={onChange}
      extra={
        <>
          {/* Deal type filter */}
          <FormField label={t('deal_type')}>
            <Select
              value={config.filters.dealType ?? '__any__'}
              onValueChange={(value) =>
                onChange({
                  ...config,
                  filters: {
                    ...config.filters,
                    dealType:
                      value === '__any__' ? undefined : (value as Config['filters']['dealType']),
                  },
                })
              }
            >
              <SelectTrigger>
                <SelectValue placeholder={t('any_option')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__any__">{t('any_option')}</SelectItem>
                {DEAL_TYPES.map((dt) => (
                  <SelectItem key={dt} value={dt}>
                    {tDealType(dt.toLowerCase() as Parameters<typeof tDealType>[0])}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FormField>

          {/* Category filter */}
          <FormField label={t('category')}>
            <Select
              value={config.filters.category ?? '__any__'}
              onValueChange={(value) =>
                onChange({
                  ...config,
                  filters: {
                    ...config.filters,
                    category:
                      value === '__any__' ? undefined : (value as Config['filters']['category']),
                  },
                })
              }
            >
              <SelectTrigger>
                <SelectValue placeholder={t('any_option')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__any__">{t('any_option')}</SelectItem>
                {CATEGORIES.map((c) => (
                  <SelectItem key={c} value={c}>
                    {tCat(c.toLowerCase() as Parameters<typeof tCat>[0])}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </FormField>

          {/* Sort order */}
          <FormField label={t('sort')}>
            <Select
              value={config.sort}
              onValueChange={(value) => onChange({ ...config, sort: value as Config['sort'] })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="recent">{t('sort_recent')}</SelectItem>
                <SelectItem value="trending">{t('sort_trending')}</SelectItem>
              </SelectContent>
            </Select>
          </FormField>

          {/* Low stock toggle */}
          <div className="flex items-center justify-between gap-4">
            <span className="text-text-primary text-sm">{t('low_stock')}</span>
            <Switch
              id="custom-query-low-stock"
              checked={config.filters.lowStock ?? false}
              onCheckedChange={(checked) =>
                onChange({
                  ...config,
                  filters: { ...config.filters, lowStock: checked || undefined },
                })
              }
            />
          </div>

          {/* Near expiry toggle */}
          <div className="flex items-center justify-between gap-4">
            <span className="text-text-primary text-sm">{t('near_expiry')}</span>
            <Switch
              id="custom-query-near-expiry"
              checked={config.filters.nearExpiry ?? false}
              onCheckedChange={(checked) =>
                onChange({
                  ...config,
                  filters: { ...config.filters, nearExpiry: checked || undefined },
                })
              }
            />
          </div>
        </>
      }
    />
  );
}