import React, { useState, useEffect } from 'react';
import styles from './LinktreePage.module.css'; // Import the module.css file
import API_BASE_URL from '../config.js';

function getAuthToken() {
  return localStorage.getItem('auth');
}

const LinktreePage = ({ setModal }) => {
  const queryParams = new URLSearchParams(window.location.search);
  const [isUsingCoupon, setIsUsingCoupon] = useState(false);
  const [couponCode, setCouponCode] = useState('');
  const [couponStatus, setCouponStatus] = useState('');
  const [couponDetails, setCouponDetails] = useState(null);
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [retypePassword, setRetypePassword] = useState('');

  // Detect query params on component mount
  useEffect(() => {
    const code = queryParams.get('couponCode');
    console.log(code)
    if (code) {
      setCouponStatus(200);
      setCouponCode(code);
      setIsUsingCoupon(true);  // Automatically switch to the coupon input state
    }
  }, [queryParams]);

  const handleCheckCoupon = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${getAuthToken()}`,
        },
      });

      if (response.ok) {
        const data = await response.json();
        setCouponStatus('Coupon is valid');
        setCouponDetails(data.coupon);
      } else {
        setCouponStatus('Coupon not found or expired');
        setCouponDetails(null);
      }
    } catch (error) {
      setCouponStatus('Error checking coupon.');
      setCouponDetails(null);
    }
  };

  const handleCreateUserWithCoupon = async (e) => {
    e.preventDefault();

    if (password !== retypePassword) {
      setCouponStatus('Passwords do not match');
      return;
    }

    try {
      const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${getAuthToken()}`,
        },
        body: JSON.stringify({
          username,
          email,
          password,
          couponCode,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        setCouponStatus('User created successfully with coupon');
        setCouponDetails(null);
        console.log(data);
      } else {
        const errorData = await response.json();
        setCouponStatus(errorData.message || 'Error creating user');
      }
    } catch (error) {
      setCouponStatus('Error creating user.');
    }
  };

  return (
    <div className={styles.linktreePage}>
        <div className={styles.dashboardContainer}>
          <div className={styles.mainHeading}>Gunakan Kupon</div>
            <form className={styles.linktreeForm} onSubmit={handleCreateUserWithCoupon}>
              <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className={styles.usernameInput}
              />
              <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={styles.usernameInput}
              />
              <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className={styles.usernameInput}
              />
              <input
                type="password"
                placeholder="Re-type Password"
                value={retypePassword}
                onChange={(e) => setRetypePassword(e.target.value)}
                className={styles.usernameInput}
              />
              <button type="submit" className={styles.claimButton}>
                <span>Buat Akun</span>
              </button>
            </form>
        </div>
    </div>
  );
};

export default LinktreePage;