import { useState } from 'react';
import Link from 'next/link';
import Head from 'next/head';
import { useRouter } from 'next/router';
import PrivacySettings from '../../components/PrivacySettings';
import { PrivacySettings as IPrivacySettings } from '../../lib/privacy/anonymity';

export default function RegisterAnonymousPlant() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [walletAddress, setWalletAddress] = useState('');

  const [formData, setFormData] = useState({
    commonName: '',
    scientificName: '',
    species: '',
    genus: '',
    family: '',
    latitude: '',
    longitude: '',
    pseudonym: '',
    encryptionKey: '',
  });

  const [privacySettings, setPrivacySettings] = useState<IPrivacySettings>({
    anonymousMode: true,
    locationPrivacy: 'fuzzy',
    identityPrivacy: 'anonymous',
    sharePlantDetails: true,
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await fetch('/api/plants/register-anonymous', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          commonName: formData.commonName,
          scientificName: formData.scientificName || undefined,
          species: formData.species || undefined,
          genus: formData.genus || undefined,
          family: formData.family || undefined,
          location: {
            latitude: parseFloat(formData.latitude),
            longitude: parseFloat(formData.longitude),
          },
          privacySettings,
          pseudonym: formData.pseudonym || undefined,
          encryptionKey: formData.encryptionKey || undefined,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Failed to register plant');
      }

      setSuccess(true);
      setWalletAddress(data.privacy.walletAddress);

      setTimeout(() => {
        router.push(`/plants/${data.plant.id}`);
      }, 3000);
    } catch (err: any) {
      setError(err.message || 'An error occurred');
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const getCurrentLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setFormData({
            ...formData,
            latitude: position.coords.latitude.toString(),
            longitude: position.coords.longitude.toString(),
          });
        },
        (error) => {
          setError('Unable to get your location: ' + error.message);
        }
      );
    } else {
      setError('Geolocation is not supported by your browser');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100">
      <Head>
        <title>Anonymous Plant Registration - LocalGreenChain</title>
      </Head>

      {/* Header */}
      <header className="bg-white shadow-sm border-b-2 border-purple-200">
        <div className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <Link href="/">
              <a className="text-2xl font-bold text-purple-800">
                🌱 LocalGreenChain
              </a>
            </Link>
            <nav className="flex gap-4">
              <Link href="/plants/register">
                <a className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                  Standard Registration
                </a>
              </Link>
              <Link href="/plants/explore">
                <a className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                  Explore Network
                </a>
              </Link>
            </nav>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-6xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <div className="mb-8 text-center">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">
            🔒 Anonymous Plant Registration
          </h1>
          <p className="text-lg text-gray-600">
            Register your plant with maximum privacy protection
          </p>
        </div>

        {error && (
          <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            {error}
          </div>
        )}

        {success && (
          <div className="mb-6 p-6 bg-green-100 border border-green-400 text-green-700 rounded-lg">
            <h3 className="font-bold text-lg mb-2">
              ✓ Plant registered anonymously!
            </h3>
            <p className="mb-2">Your anonymous wallet address:</p>
            <p className="font-mono bg-white p-2 rounded text-sm break-all">
              {walletAddress}
            </p>
            <p className="mt-2 text-sm">
              Save this address to manage your plant. Redirecting...
            </p>
          </div>
        )}

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Privacy Settings */}
          <div className="lg:col-span-1">
            <PrivacySettings
              value={privacySettings}
              onChange={setPrivacySettings}
              showTorStatus={true}
            />
          </div>

          {/* Right Column - Plant Information */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-lg shadow-xl p-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-6">
                Plant Information
              </h2>

              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Basic Plant Info */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Common Name *
                    </label>
                    <input
                      type="text"
                      name="commonName"
                      required
                      value={formData.commonName}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      placeholder="e.g., Tomato, Basil"
                    />
                  </div>

                  {privacySettings.sharePlantDetails && (
                    <>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          Scientific Name
                        </label>
                        <input
                          type="text"
                          name="scientificName"
                          value={formData.scientificName}
                          onChange={handleChange}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                          placeholder="e.g., Solanum lycopersicum"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          Genus
                        </label>
                        <input
                          type="text"
                          name="genus"
                          value={formData.genus}
                          onChange={handleChange}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                        />
                      </div>

                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          Family
                        </label>
                        <input
                          type="text"
                          name="family"
                          value={formData.family}
                          onChange={handleChange}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                        />
                      </div>
                    </>
                  )}
                </div>

                {/* Location */}
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
                    Location (will be obfuscated based on privacy settings)
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Latitude *
                      </label>
                      <input
                        type="number"
                        step="any"
                        name="latitude"
                        required
                        value={formData.latitude}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      />
                    </div>

                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">
                        Longitude *
                      </label>
                      <input
                        type="number"
                        step="any"
                        name="longitude"
                        required
                        value={formData.longitude}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      />
                    </div>

                    <div className="md:col-span-2">
                      <button
                        type="button"
                        onClick={getCurrentLocation}
                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
                      >
                        📍 Use My Current Location
                      </button>
                      <p className="mt-2 text-sm text-gray-600">
                        Your exact location will be obfuscated based on your
                        privacy settings
                      </p>
                    </div>
                  </div>
                </div>

                {/* Optional Pseudonym */}
                {privacySettings.identityPrivacy === 'pseudonym' && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Pseudonym (optional)
                    </label>
                    <input
                      type="text"
                      name="pseudonym"
                      value={formData.pseudonym}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      placeholder="Your chosen display name"
                    />
                  </div>
                )}

                {/* Encryption Key */}
                {privacySettings.anonymousMode && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Encryption Key (optional)
                    </label>
                    <input
                      type="password"
                      name="encryptionKey"
                      value={formData.encryptionKey}
                      onChange={handleChange}
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                      placeholder="Optional password for extra security"
                    />
                    <p className="mt-1 text-sm text-gray-600">
                      Used to generate your anonymous contact address
                    </p>
                  </div>
                )}

                {/* Submit Button */}
                <div className="flex gap-4">
                  <button
                    type="submit"
                    disabled={loading}
                    className="flex-1 px-6 py-3 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {loading ? 'Registering...' : '🔒 Register Anonymously'}
                  </button>
                  <Link href="/">
                    <a className="px-6 py-3 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition">
                      Cancel
                    </a>
                  </Link>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}
