import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import QRCode from "qrcode.react";

export default function WifiQRGenerator() {
  // State hooks for network name, password, and encryption type
  const [ssid, setSsid] = useState("");
  const [password, setPassword] = useState("");
  const [encryption, setEncryption] = useState("WPA");

  // Function to generate the properly formatted Wi-Fi string for QR code
  const generateWifiString = () => {
    // Escape special characters in input strings
    const esc = (str) => str.replace(/([\\;,:"])/g, '\\$1');

    // Use "nopass" for no encryption, otherwise use the selected encryption type
    const enc = encryption === "nopass" ? "nopass" : encryption;

    // Only include password if encryption is not "nopass"
    const pwd = encryption === "nopass" ? "" : esc(password);

    // Return the encoded Wi-Fi config string
    return `WIFI:T:${enc};S:${esc(ssid)};P:${pwd};;`;
  };

  // Check if enough information is provided to generate the QR code
  const canGenerate = ssid && (encryption === "nopass" || password);

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
      <Card className="w-full max-w-xl shadow-2xl rounded-2xl">
        <CardContent className="p-8">
          <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">
            Wi-Fi QR Code Generator
          </h1>
          <div className="space-y-4">
            {/* Input for SSID */}
            <div>
              <label className="block text-gray-700 mb-1">Network Name (SSID)</label>
              <Input
                type="text"
                value={ssid}
                onChange={(e) => setSsid(e.target.value)}
                placeholder="Enter your Wi-Fi network name"
              />
            </div>

            {/* Input for password, disabled when encryption is "nopass" */}
            <div>
              <label className="block text-gray-700 mb-1">Password</label>
              <Input
                type="text"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter your Wi-Fi password"
                disabled={encryption === "nopass"}
              />
            </div>

            {/* Dropdown for selecting encryption type */}
            <div>
              <label className="block text-gray-700 mb-1">Encryption</label>
              <select
                className="w-full border rounded p-2 text-gray-700"
                value={encryption}
                onChange={(e) => setEncryption(e.target.value)}
              >
                <option value="WPA">WPA/WPA2</option>
                <option value="WEP">WEP</option>
                <option value="nopass">None</option>
              </select>
            </div>

            {/* Conditionally render QR code when data is valid */}
            {canGenerate && (
              <div className="mt-6 text-center">
                <QRCode
                  value={generateWifiString()}
                  size={256}
                  bgColor="#ffffff"
                  fgColor="#000000"
                  level="H"
                  includeMargin={true}
                />
              </div>
            )}

            {/* Button to copy Wi-Fi string to clipboard */}
            <div className="text-center mt-4">
              <Button
                onClick={() => {
                  const data = generateWifiString();
                  if (navigator.clipboard) {
                    navigator.clipboard.writeText(data);
                  }
                }}
                disabled={!canGenerate}
              >
                Copy QR Data
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}