import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/types';
import { SingleDatePicker } from '@/shared/ui/filter/single-date-picker';

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

export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
  const { navigate } = useNavigate();

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

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

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

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

  return (
    <>
      <div className="issue-form">
        <div className="issue-row gap-10">
          <div className="issue-label">가맹점</div>
          <div className="issue-field">
            <select
              className="wid-100"
              value={formData.mid}
              onChange={(e) => handleInputChange('mid', e.target.value)}
            >
              <option>nictest001m</option>
            </select>
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">발송 수단</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)}
              >
                이메일
              </span>
              <span
                className={`keyword-tag flex-1 ${formData.sendMethod === 'KAKAO' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.KAKAO)}
              >
                카카오
              </span>
            </div>
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">상품명</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">상품가격</div>
          <div className="issue-field">
            <input
              type="text"
              placeholder=""
              value={formData.amount}
              onChange={(e) => handleInputChange('amount', e.target.value)}
            />
          </div>
        </div>

        <div className="issue-row gap-10">
          <div className="issue-label">상품 주문번호</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">결제 유효일</div>
          <div className="issue-field">
            <div className="link-apply-date">
              <SingleDatePicker
                date={formData.paymentExpiryDate}
                setDate={handleDateChange}
                placeholder="날짜 선택"
              />
              <span>까지</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};