import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import QRCode from 'qrcode.react';
import Head from 'next/head';

/**
 * Agent Property Listing Wizard
 * Steps:
 * 1. Basic details (title, price, location, area)
 * 2. Upload images (camera integration via file input)
 * 3. Submit – creates property via API, shows AI description and QR code.
 */
export default function PropertyWizard() {
  const router = useRouter();
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    title: '',
    price: '',
    city: '',
    block: '',
    area: '',
    images: [] as File[],
  });
  const [propertyId, setPropertyId] = useState<number | null>(null);
  const [aiDescription, setAiDescription] = useState<string>('');

  // Get GPS coordinates when component mounts (optional)
  const [locationGps, setLocationGps] = useState<string>('');
  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(pos => {
        const { latitude, longitude } = pos.coords;
        setLocationGps(`${latitude},${longitude}`);
      });
    }
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, files } = e.target;
    if (files && files.length > 0) {
      setForm(prev => ({ ...prev, [name]: [...prev.images, ...Array.from(files)] }));
    } else {
      setForm(prev => ({ ...prev, [name]: value }));
    }
  };

  const submitProperty = async () => {
    // Convert images to URLs (for preview) – simple base64 for demo
    const imageUrls = await Promise.all(
      form.images.map(
        file =>
          new Promise<string>((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result as string);
            reader.onerror = err => reject(err);
            reader.readAsDataURL(file);
          })
      )
    );

    const payload = {
      agentId: 1, // TODO: replace with logged‑in agent ID
      title: form.title,
      price: parseFloat(form.price),
      locationGps,
      city: form.city,
      block: form.block,
      area: form.area,
      images: imageUrls,
    };

    const res = await fetch('/api/properties/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const data = await res.json();
    if (res.ok) {
      setPropertyId(data.id);
      setAiDescription(data.aiDescription || '');
      setStep(3);
    } else {
      alert('Error: ' + (data.error ?? 'Unknown'));
    }
  };

  const renderStep = () => {
    switch (step) {
      case 1:
        return (
          <div className="max-w-md mx-auto">
            <h2 className="text-2xl mb-4">Property Details</h2>
            <input
              type="text"
              name="title"
              placeholder="Title"
              value={form.title}
              onChange={handleChange}
              className="w-full mb-2 p-2 border"
            />
            <input
              type="number"
              name="price"
              placeholder="Price"
              value={form.price}
              onChange={handleChange}
              className="w-full mb-2 p-2 border"
            />
            <input
              type="text"
              name="city"
              placeholder="City"
              value={form.city}
              onChange={handleChange}
              className="w-full mb-2 p-2 border"
            />
            <input
              type="text"
              name="block"
              placeholder="Block"
              value={form.block}
              onChange={handleChange}
              className="w-full mb-2 p-2 border"
            />
            <input
              type="text"
              name="area"
              placeholder="Area (sqft)"
              value={form.area}
              onChange={handleChange}
              className="w-full mb-2 p-2 border"
            />
            <button
              onClick={() => setStep(2)}
              className="mt-4 btn bg-primary text-white px-4 py-2"
            >
              Next – Add Images
            </button>
          </div>
        );
      case 2:
        return (
          <div className="max-w-md mx-auto">
            <h2 className="text-2xl mb-4">Upload Images</h2>
            <input
              type="file"
              name="images"
              accept="image/*"
              capture="environment"
              multiple
              onChange={handleChange}
              className="w-full mb-2"
            />
            <div className="flex gap-2 flex-wrap mt-2">
              {form.images.map((file, idx) => (
                <img
                  key={idx}
                  src={URL.createObjectURL(file)}
                  alt="preview"
                  className="w-20 h-20 object-cover"
                />
              ))}
            </div>
            <button
              onClick={() => setStep(1)}
              className="mr-2 btn bg-gray-300 text-black px-4 py-2"
            >
              Back
            </button>
            <button
              onClick={submitProperty}
              className="btn bg-primary text-white px-4 py-2"
            >
              Submit Listing
            </button>
          </div>
        );
      case 3:
        return (
          <div className="max-w-md mx-auto text-center">
            <h2 className="text-2xl mb-4">Listing Created!</h2>
            {aiDescription && (
              <div className="mb-4 p-2 border rounded bg-gray-50">
                <h3 className="font-semibold mb-1">AI Description</h3>
                <p>{aiDescription}</p>
              </div>
            )}
            {propertyId && (
              <div className="my-4">
                <h3 className="font-semibold mb-2">Property QR Code</h3>
                <QRCode value={`${window.location.origin}/property/${propertyId}`} size={180} />
              </div>
            )}
            <button
              onClick={() => router.push('/')}
              className="mt-4 btn bg-primary text-white px-4 py-2"
            >
              Go Home

            </button>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <Head>
        <title>Agent Property Wizard</title>
      </Head>
      <div className="p-4 min-h-screen bg-background text-foreground">
        {renderStep()}
      </div>
    </>
  );
}