'use client';

import { Category, ProductCustomization } from '@/types';
import { CUT_COUNTS, CUTTING_STYLE_KEYS } from '@/lib/constants';
import { updateMeatCustomization } from '@/lib/customization';
import { cn } from '@/lib/utils';
import { Scissors, Hash } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

interface CustomizationSelectorProps {
  category: Category;
  customization: ProductCustomization;
  onChange: (customization: ProductCustomization) => void;
}

export default function CustomizationSelector({
  category,
  customization,
  onChange,
}: CustomizationSelectorProps) {
  const { t } = useTranslation();

  if (category === 'fish') {
    return (
      <div className="rounded-xl border border-brand-100 bg-brand-50/50 p-4">
        <p className="text-sm text-brand-700">{t('product.fishNote')}</p>
      </div>
    );
  }

  const meat = updateMeatCustomization(customization, category, {});
  const selectedCuts = meat.cuts;
  const selectedStyle = meat.cuttingStyle;

  return (
    <div className="space-y-6">
      <div>
        <div className="mb-3 flex items-center gap-2">
          <Hash className="h-4 w-4 text-brand-700" />
          <h3 className="text-sm font-semibold text-brand-900">
            {t('product.howManyCuts')}
          </h3>
        </div>
        <div className="flex flex-wrap gap-2">
          {CUT_COUNTS.map((cuts) => (
            <button
              key={cuts}
              type="button"
              onClick={() =>
                onChange(updateMeatCustomization(customization, category, { cuts }))
              }
              className={cn(
                'min-w-[3.5rem] rounded-lg border-2 px-4 py-2.5 text-sm font-semibold transition-all',
                selectedCuts === cuts
                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
              )}
            >
              {cuts}
            </button>
          ))}
        </div>
        <p className="mt-2 text-xs text-gray-500">{t('product.howManyCutsHint')}</p>
      </div>

      <div>
        <div className="mb-3 flex items-center gap-2">
          <Scissors className="h-4 w-4 text-brand-700" />
          <h3 className="text-sm font-semibold text-brand-900">
            {t('product.selectCutting')}
          </h3>
        </div>
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
          {CUTTING_STYLE_KEYS.map((style) => (
            <button
              key={style}
              type="button"
              onClick={() =>
                onChange(
                  updateMeatCustomization(customization, category, { cuttingStyle: style })
                )
              }
              className={cn(
                'rounded-lg border-2 px-4 py-3 text-start text-sm font-medium transition-all',
                selectedStyle === style
                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
              )}
            >
              {t(`cutting.${style}`)}
            </button>
          ))}
        </div>
        <p className="mt-2 text-xs text-gray-500">
          {t('product.selectCuttingHint', {
            category: t(`categories.${category}.name`),
          })}
        </p>
      </div>
    </div>
  );
}