import React, { useState } from 'react';
import axios from 'axios';
import styles from '@styles/QRForm.module.scss';

const QRForm: React.FC = () => {
  const [text, setText] = useState('');
  const [size, setSize] = useState<'150' | '300' | '600'>('300');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError(null);
    setImageUrl(null);

    if (!text.trim()) {
      setError('Please enter a URL or text to encode.');
      return;
    }

    setLoading(true);
    try {
      // Call a mock API to simulate server-side generation step.
      // Using jsonplaceholder as a harmless mock endpoint.
      await axios.post('https://jsonplaceholder.typicode.com/posts', {
        payload: text,
        size,
      });

      // Build a QR image URL using a public QR generator for preview purposes.
      // In a real implementation the server would return the final image URL or binary data.
      const generatedUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(
        text
      )}`;
      setImageUrl(generatedUrl);
    } catch (err) {
      setError('Failed to generate QR code. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={styles.qrFormBody}>
      <form onSubmit={handleSubmit}>
        <label className={styles.qrFormLabel}>Submit URL or text</label>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="https://example.com or some text"
          className={styles.qrFormInput}
        />

        <label className={styles.qrFormLabel}>Image size</label>
        <select
          value={size}
          onChange={(e) => setSize(e.target.value as '150' | '300' | '600')}
          className={styles.qrFormSelect}
        >
          <option value="150">Small — 150x150</option>
          <option value="300">Medium — 300x300</option>
          <option value="600">Large — 600x600</option>
        </select>

        {error && <div className={styles.qrError}>{error}</div>}

        <button type="submit" disabled={loading} className={styles.qrFormButton}>
          {loading ? 'Generating…' : 'Generate'}
        </button>
      </form>
    </div>
  );
};

export default QRForm;