import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { IMAGE_ROOT } from '@/shared/constants/common';

export const LinkPaymentStep1 = () => {
  const { navigate } = useNavigate();

  useSetOnBack(() => {
    navigate(PATHS.additionalService.intro);
  });
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState('SMS');
  const [formData, setFormData] = useState({
    merchant: 'nictest001m',
    productName: '',
    productPrice: '',
    orderNumber: '',
    validDate: '2025.06.30'
  });

  const handlePaymentMethodChange = (method: string) => {
    setSelectedPaymentMethod(method);
  };

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

  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.merchant}
              onChange={(e) => handleInputChange('merchant', 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 ${selectedPaymentMethod === 'SMS' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange('SMS')}
              >
                SMS
              </span>
              <span
                className={`keyword-tag flex-1 ${selectedPaymentMethod === '이메일' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange('이메일')}
              >
                이메일
              </span>
              <span
                className={`keyword-tag flex-1 ${selectedPaymentMethod === '카카오' ? 'active' : ''}`}
                onClick={() => handlePaymentMethodChange('카카오')}
              >
                카카오
              </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.productName}
              onChange={(e) => handleInputChange('productName', 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.productPrice}
              onChange={(e) => handleInputChange('productPrice', 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.orderNumber}
              onChange={(e) => handleInputChange('orderNumber', 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">
              <div className="input-wrapper date">
                <input
                  type="text"
                  value={formData.validDate}
                  className="date-input"
                  onChange={(e) => handleInputChange('validDate', e.target.value)}
                />
                <button type="button" className="date-btn">
                  <img
                    src={IMAGE_ROOT + '/ico_date.svg'}
                    alt="날짜 선택"
                  />
                </button>
              </div>
              <span>까지</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};