import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { SingleDatePicker } from '@/shared/ui/filter/single-date-picker';
import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
import { NumericFormat } from 'react-number-format';
import { useStore } from '@/shared/model/store';
import { useEffect } from 'react';

interface LinkPaymentStep1Props {
  formData: LinkPaymentFormData;
  setFormData: (formData: LinkPaymentFormData) => void;
}

export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
  const { t } = useTranslation();
  const { navigate } = useNavigate();
  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;

  useSetOnBack(() => {
    navigate(PATHS.additionalService.linkPayment.shippingHistory);
  });

  // MID가 비어있고 옵션이 있으면 첫 번째 옵션으로 설정
  useEffect(() => {
    if (!formData.mid && midOptionsWithoutGids.length > 0) {
      const firstMid = midOptionsWithoutGids[0]?.value;
      if (firstMid) {
        setFormData({ ...formData, mid: firstMid });
      }
    }
  }, []);

  const handlePaymentMethodChange = (method: LinkPaymentSendMethod) => {
    setFormData({ ...formData, sendMethod: method });
  };

  const handleInputChange = (field: string, value: string) => {
    setFormData({ ...formData, [field]: value });
  };

  const handleDateChange = (date: string) => {
    setFormData({ ...formData, paymentLimitDate: date });
  };

  return (
    <>
      <div className="issue-form">
        <div className="issue-row gap-10">
          <div className="issue-label">{t('filter.merchant')}</div>
          <div className="issue-field">
            <select
              className="wid-100"
              value={formData.mid}
              onChange={(e) => handleInputChange('mid', e.target.value)}
            >
              {
                midOptionsWithoutGids.map((value) => (
                  <option
                    key={value.value}
                    value={value.value}
                  >{value.name}</option>
                ))
              }
            </select>
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">{t('additionalService.linkPayment.sendMethod')}</div>
          <div className="issue-field">
            <div className="chip-row">
              <span
                className={`keyword-tag flex-1 ${formData.sendMethod === 'SMS' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.SMS)}
              >
                SMS
              </span>
              <span
                className={`keyword-tag flex-1 ${formData.sendMethod === 'EMAIL' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.EMAIL)}
              >
                {t('common.email')}
              </span>
              <span
                className={`keyword-tag flex-1 ${formData.sendMethod === 'KAKAO' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.KAKAO)}
              >
                {t('common.kakao')}
              </span>
            </div>
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">{t('transaction.fields.productName')}</div>
          <div className="issue-field">
            <input
              type="text"
              placeholder=""
              value={formData.goodsName}
              onChange={(e) => handleInputChange('goodsName', e.target.value)}
            />
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">{t('additionalService.linkPayment.productPrice')}</div>
          <div className="issue-field">
            <NumericFormat
              value={formData.amount}
              allowNegative={false}
              displayType="input"
              thousandSeparator={true}
              onValueChange={(values) => {
                const { floatValue } = values;
                setFormData({ ...formData, amount: floatValue ?? 0 });
              }}
            />
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">{t('additionalService.linkPayment.productOrderNumber')}</div>
          <div className="issue-field">
            <input
              type="text"
              placeholder=""
              value={formData.moid}
              onChange={(e) => handleInputChange('moid', e.target.value)}
            />
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">{t('additionalService.linkPayment.paymentValidDate')}</div>
          <div className="issue-field">
            <div className="link-apply-date">
              <SingleDatePicker
                date={formData.paymentLimitDate}
                setDate={handleDateChange}
                placeholder={t('additionalService.linkPayment.selectDate')}
                minDate={new Date()}
              />
              <span>{t('additionalService.linkPayment.until')}</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};