import React, { useEffect, useState } from "react";
import {
  Search,
  Check,
  ArrowRight,
  Menu,
  Moon,
  Sun,
  Tag,
  TrendingUp,
  Plus,
  Trash,
  Edit,
  Download,
  Zap,
} from "lucide-react";
import { motion } from "framer-motion";

/**
 * Full-featured Domain Marketplace (single-file React preview)
 * - Frontend wiring for Stripe & Razorpay (requires backend endpoints)
 * - Firebase & Supabase lead + analytics saving (optional, configure one)
 * - Admin dashboard to manage domains (add/edit/delete)
 * - Auto-sync from Google Sheets (calls backend /api/sync-google-sheets)
 *
 * IMPORTANT:
 *  - This file shows front-end wiring only. You MUST implement the server endpoints
 *    described below and provide API keys via environment variables on the server.
 *  - In pure-browser environments `process` may be undefined; this file guards for that.
 */

// ---------------------- SAMPLE DATA (replace with your 50+ list) ----------------------
const initialDomains = [
  { id: 1, name: "example1.com", price: 500, category: "Premium", tag: "Hot", views: 12 },
  { id: 2, name: "example2.in", price: 250, category: "Brandable", tag: "Trending", views: 34 },
  { id: 3, name: "example3.net", price: 750, category: "Tech", tag: "New", views: 7 },
];

// ---------------------- CONFIG PLACEHOLDERS (fill these)
// Use safe checks so code doesn't crash in environments without `process`.
const _env = typeof process !== "undefined" && process && process.env ? process.env : {};
const STRIPE_PUBLISHABLE_KEY = _env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "pk_test_YOUR_KEY";
const RAZORPAY_KEY = _env.NEXT_PUBLIC_RAZORPAY_KEY || "rzp_test_YOUR_KEY";

// Firebase config example (if using Firebase)
const FIREBASE_CONFIG = {
  apiKey: _env.NEXT_PUBLIC_FIREBASE_APIKEY || "YOUR_FIREBASE_APIKEY",
  authDomain: _env.NEXT_PUBLIC_FIREBASE_AUTHDOMAIN || "YOUR_FIREBASE_AUTHDOMAIN",
  projectId: _env.NEXT_PUBLIC_FIREBASE_PROJECTID || "YOUR_FIREBASE_PROJECTID",
};

// Supabase config example (if using Supabase)
const SUPABASE_URL = _env.NEXT_PUBLIC_SUPABASE_URL || "https://your.supabase.co";
const SUPABASE_ANON_KEY = _env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "your-anon-key";

export default function DomainMarketplace() {
  const [domains, setDomains] = useState(initialDomains);
  const [search, setSearch] = useState("");
  const [filter, setFilter] = useState("all");
  const [theme, setTheme] = useState("light");
  const [menuOpen, setMenuOpen] = useState(false);
  const [selectedDomain, setSelectedDomain] = useState(null);
  const [adminMode, setAdminMode] = useState(false);
  const [editing, setEditing] = useState(null);
  const [leadSavingBackend, setLeadSavingBackend] = useState("firebase"); // or 'supabase' or 'none'

  // basic analytics state
  const [analytics, setAnalytics] = useState({ viewsTotal: domains.reduce((s, d) => s + (d.views || 0), 0) });

  useEffect(() => {
    setAnalytics((a) => ({ ...a, viewsTotal: domains.reduce((s, d) => s + (d.views || 0), 0) }));
  }, [domains]);

  const categories = [...new Set(domains.map((d) => d.category))];

  // ---------------------- SEARCH / FILTER ----------------------
  const filtered = domains.filter((d) => {
    const matchSearch = d.name.toLowerCase().includes(search.toLowerCase());
    const matchFilter = filter === "all" || d.category === filter;
    return matchSearch && matchFilter;
  });

  // ---------------------- THEME ----------------------
  const toggleTheme = () => setTheme((t) => (t === "light" ? "dark" : "light"));

  // ---------------------- ADMIN: CRUD ----------------------
  function addDomain(newDomain) {
    const id = Math.max(0, ...domains.map((d) => d.id)) + 1;
    setDomains([{ id, ...newDomain }, ...domains]);
  }
  function updateDomain(id, patch) {
    setDomains(domains.map((d) => (d.id === id ? { ...d, ...patch } : d)));
  }
  function removeDomain(id) {
    setDomains(domains.filter((d) => d.id !== id));
  }

  // ---------------------- ANALYTICS / VIEWS ----------------------
  // Track view locally and optionally to backend (Firebase / Supabase)
  async function trackView(domainId) {
    setDomains((prev) => prev.map((d) => (d.id === domainId ? { ...d, views: (d.views || 0) + 1 } : d)));

    // Example: call backend to record analytics
    try {
      await fetch("/api/track-view", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ domainId, timestamp: new Date().toISOString() }),
      });
    } catch (e) {
      // silently fail — backend optional
      console.warn("trackView failed", e && e.message ? e.message : e);
    }
  }

  // ---------------------- SAVE LEAD (Firebase / Supabase / Backend) ----------------------
  async function saveLead(lead) {
    // 1) Call your backend to save (recommended) which in turn will save to Firebase/Supabase
    try {
      const res = await fetch("/api/save-lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(lead),
      });
      if (!res.ok) throw new Error("lead save failed");
      return true;
    } catch (e) {
      console.warn("saveLead failed — falling back to client", e && e.message ? e.message : e);
    }

    // 2) Optional direct client-side save: (DEMO only — prefer backend)
    if (leadSavingBackend === "firebase") {
      // TODO: initialize firebase and save to Firestore
      console.warn("Direct Firebase save not implemented in preview — implement on backend or initialize firebase here.");
      return false;
    }
    if (leadSavingBackend === "supabase") {
      // TODO: initialize supabase client and save
      console.warn("Direct Supabase save not implemented in preview — implement on backend or initialize supabase here.");
      return false;
    }

    return false;
  }

  // ---------------------- PAYMENTS (Stripe + Razorpay) ----------------------
  // NOTE: For security, create orders / checkout sessions on your server and return a URL or order info.

  async function startStripeCheckout(domain) {
    // frontend calls backend to create Checkout Session
    try {
      const res = await fetch("/api/create-stripe-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ domainId: domain.id }),
      });
      const data = await res.json();
      if (data.url) {
        window.location.href = data.url; // redirect to Stripe Checkout
      } else {
        alert("Stripe checkout failed: missing session URL");
      }
    } catch (e) {
      console.error("Stripe checkout error", e);
      alert("Stripe checkout error — check console");
    }
  }

  async function startRazorpay(domain) {
    // call backend to create Razorpay order and return order info
    try {
      const res = await fetch("/api/create-razorpay-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ domainId: domain.id }),
      });
      const data = await res.json();
      if (!data.order) throw new Error("no order returned");

      // Open Razorpay checkout (this requires Razorpay script loaded on page)
      const options = {
        key: RAZORPAY_KEY,
        amount: data.order.amount, // in paise
        currency: data.order.currency,
        name: domain.name,
        order_id: data.order.id,
        handler: async function (response) {
          // response.razorpay_payment_id, response.razorpay_order_id, response.razorpay_signature
          // Verify payment server-side
          await fetch("/api/verify-razorpay", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ ...response, domainId: domain.id }),
          });
          alert("Payment successful — thank you!");
        },
        modal: {
          ondismiss: function () {
            console.log("checkout closed");
          },
        },
      };

      // eslint-disable-next-line no-undef
      if (typeof window !== "undefined" && typeof window.Razorpay === "function") {
        const rzp = new window.Razorpay(options);
        rzp.open();
      } else {
        alert("Razorpay is not available — make sure the Razorpay script is loaded on the page.");
      }
    } catch (e) {
      console.error("Razorpay error", e);
      alert("Razorpay checkout error — check console");
    }
  }

  // ---------------------- GOOGLE SHEETS SYNC ----------------------
  // This triggers a backend endpoint which will read a Google Sheet and return domain rows.
  async function syncFromGoogleSheets() {
    try {
      const res = await fetch("/api/sync-google-sheets", { method: "POST" });
      if (!res.ok) throw new Error("sync failed");
      const data = await res.json();
      // expect data.domains = [{name, price, category, tag}]
      if (Array.isArray(data.domains)) {
        // map and assign ids
        const mapped = data.domains.map((d, i) => ({ id: Date.now() + i, ...d }));
        setDomains(mapped);
        alert("Sheet sync completed — domain list updated.");
      } else {
        alert("Sheet sync returned unexpected payload");
      }
    } catch (e) {
      console.error("sheet sync error", e);
      alert("Google Sheets sync failed — check backend logs.");
    }
  }

  // ---------------------- EXPORT / DOWNLOAD CSV ----------------------
  function downloadCSV() {
    const headers = ["id", "name", "price", "category", "tag", "views"];
    const rows = domains.map((d) => [d.id, d.name, d.price, d.category, d.tag, d.views || 0]);
    const csv = [headers, ...rows]
      .map((r) => r.join(","))
      .join("\n");
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "domains.csv";
    a.click();
    URL.revokeObjectURL(url);
  }

  // ---------------------- UI ----------------------
  return (
    <div className={theme === "light" ? "bg-gradient-to-br from-pink-200 via-purple-200 to-blue-200 min-h-screen p-6" : "bg-gray-900 text-white min-h-screen p-6"}>
      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center gap-4">
          <div className="text-2xl font-bold">My Domain Store</div>
          <div className="text-sm text-gray-600 dark:text-gray-300">List • Sell • Manage</div>
        </div>

        <div className="flex items-center gap-3">
          <button title="Sync from Google Sheets" onClick={syncFromGoogleSheets} className="p-2 bg-white/40 dark:bg-gray-800 rounded-xl">
            <Download />
          </button>

          <button title="Download CSV" onClick={downloadCSV} className="p-2 bg-white/40 dark:bg-gray-800 rounded-xl">
            <Zap />
          </button>

          <button onClick={toggleTheme} className="p-2 bg-white/40 dark:bg-gray-800 rounded-xl">
            {theme === "light" ? <Moon /> : <Sun />}
          </button>

          <button onClick={() => setAdminMode((m) => !m)} className="px-3 py-2 bg-indigo-600 text-white rounded-xl">
            {adminMode ? "Exit Admin" : "Admin"}
          </button>
        </div>
      </div>

      {/* Admin Dashboard */}
      {adminMode ? (
        <div className="max-w-6xl mx-auto bg-white dark:bg-gray-800 p-6 rounded-3xl shadow mb-8">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-xl font-bold">Admin Dashboard</h3>
            <div className="flex items-center gap-3">
              <div className="text-sm">Total views: {analytics.viewsTotal}</div>
            </div>
          </div>

          {/* Add new domain */}
          <AdminAddForm
            onAdd={(d) => addDomain(d)}
            onUpdate={(id, patch) => updateDomain(id, patch)}
            editing={editing}
            setEditing={setEditing}
            domains={domains}
          />

          {/* Domain list table */}
          <div className="mt-6 grid gap-3">
            {domains.map((d) => (
              <div key={d.id} className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-xl">
                <div>
                  <div className="font-semibold">{d.name}</div>
                  <div className="text-sm text-gray-500 dark:text-gray-300">{d.category} • ${d.price} • {d.tag}</div>
                </div>
                <div className="flex gap-2">
                  <button onClick={() => { setEditing(d); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="p-2 bg-yellow-400 rounded-xl"><Edit /></button>
                  <button onClick={() => removeDomain(d.id)} className="p-2 bg-red-400 rounded-xl"><Trash /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {/* Search + Filters */}
      <div className="max-w-4xl mx-auto mb-8 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="md:col-span-2 flex items-center bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl">
          <Search className="w-5 h-5 text-gray-500 mr-2" />
          <input
            type="text"
            placeholder="Search domains..."
            className="w-full bg-transparent outline-none text-gray-800 dark:text-white"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>

        <select
          className="bg-white dark:bg-gray-800 p-4 rounded-2xl shadow-xl"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
        >
          <option value="all">All Categories</option>
          {categories.map((cat, idx) => (
            <option key={idx} value={cat}>{cat}</option>
          ))}
        </select>
      </div>

      {/* Marketplace */}
      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {filtered.map((d, idx) => (
          <motion.div key={d.id} initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: idx * 0.05 }} className="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-2xl border dark:border-gray-700">
            <div className="flex justify-between items-start">
              <div>
                <div className="text-xl font-bold">{d.name}</div>
                <div className="text-sm text-gray-500 dark:text-gray-400">{d.category} • <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-indigo-100 dark:bg-indigo-700 text-indigo-700 dark:text-white text-xs"> <TrendingUp className="w-3 h-3" /> {d.tag}</span></div>
              </div>
              <div className="text-lg font-semibold">${d.price}</div>
            </div>

            <div className="mt-4 text-sm text-gray-600 dark:text-gray-300">Views: {d.views || 0}</div>

            <div className="mt-6 flex gap-3">
              <motion.button whileHover={{ scale: 1.03 }} onClick={() => { trackView(d.id); startStripeCheckout(d); }} className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-2 rounded-xl shadow">Buy (Stripe)</motion.button>

              <motion.button whileHover={{ scale: 1.03 }} onClick={() => { trackView(d.id); startRazorpay(d); }} className="flex-1 bg-gradient-to-r from-green-600 to-teal-600 text-white py-2 rounded-xl shadow">Buy (Razorpay)</motion.button>
            </div>

            <div className="mt-4 flex gap-2">
              <motion.button whileHover={{ scale: 1.03 }} onClick={() => { setSelectedDomain(d); }} className="flex-1 border border-gray-300 dark:border-gray-600 py-2 rounded-xl">Enquire / Offer</motion.button>
              <motion.button whileHover={{ scale: 1.03 }} onClick={() => { navigator.clipboard && navigator.clipboard.writeText(d.name); }} className="px-3 py-2 rounded-xl bg-gray-100 dark:bg-gray-700">Copy</motion.button>
            </div>
          </motion.div>
        ))}
      </div>

      {/* Buy / Offer Modal */}
      {selectedDomain && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur flex justify-center items-center p-4">
          <motion.div initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="bg-white dark:bg-gray-800 w-full max-w-lg p-6 rounded-3xl shadow-2xl">
            <h3 className="text-xl font-bold mb-1">{selectedDomain.name}</h3>
            <div className="text-sm text-gray-600 dark:text-gray-300 mb-4">Price: ${selectedDomain.price}</div>

            <ContactForm domain={selectedDomain} onSaved={async (lead) => { await saveLead(lead); setSelectedDomain(null); }} />

            <div className="mt-4 grid grid-cols-2 gap-3">
              <button onClick={() => { startStripeCheckout(selectedDomain); }} className="py-2 rounded-xl bg-blue-600 text-white">Pay with Stripe</button>
              <button onClick={() => { startRazorpay(selectedDomain); }} className="py-2 rounded-xl bg-green-600 text-white">Pay with Razorpay</button>
            </div>

            <button onClick={() => setSelectedDomain(null)} className="w-full mt-4 py-2 text-sm text-red-500">Close</button>
          </motion.div>
        </div>
      )}

      {/* Analytics Mini Dashboard */}
      <div className="max-w-6xl mx-auto mt-10 p-4 bg-white dark:bg-gray-800 rounded-2xl shadow">
        <div className="flex justify-between items-center">
          <div>
            <div className="text-sm text-gray-500 dark:text-gray-300">Analytics</div>
            <div className="text-2xl font-bold">Total Views: {analytics.viewsTotal}</div>
          </div>

          <div>
            <div className="text-sm text-gray-500 dark:text-gray-300">Domains</div>
            <div className="text-2xl font-bold">{domains.length}</div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="text-center mt-10 text-gray-700 dark:text-gray-400">
        © {new Date().getFullYear()} Domain Marketplace • Built with love
      </div>
    </div>
  );
}

// ---------------------- Admin Add/Edit Form Component ----------------------
function AdminAddForm({ onAdd, onUpdate, editing, setEditing, domains }) {
  const [form, setForm] = useState({ name: "", price: "", category: "Brandable", tag: "" });

  useEffect(() => {
    if (editing) setForm({ name: editing.name, price: editing.price, category: editing.category, tag: editing.tag });
  }, [editing]);

  function submit() {
    if (!form.name || !form.price) return alert("Name and price required");
    if (editing) {
      onUpdate(editing.id, { ...form });
      setEditing(null);
      setForm({ name: "", price: "", category: "Brandable", tag: "" });
    } else {
      onAdd({ ...form, price: Number(form.price) });
      setForm({ name: "", price: "", category: "Brandable", tag: "" });
    }
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Domain name" className="p-3 rounded-xl bg-gray-100 dark:bg-gray-700" />
      <input value={form.price} onChange={(e) => setForm({ ...form, price: e.target.value })} placeholder="Price" className="p-3 rounded-xl bg-gray-100 dark:bg-gray-700" />
      <input value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} placeholder="Category" className="p-3 rounded-xl bg-gray-100 dark:bg-gray-700" />
      <input value={form.tag} onChange={(e) => setForm({ ...form, tag: e.target.value })} placeholder="Tag (Hot / Trending)" className="p-3 rounded-xl bg-gray-100 dark:bg-gray-700" />
      <div className="md:col-span-3 flex gap-3">
        <button onClick={submit} className="px-4 py-2 bg-indigo-600 text-white rounded-xl">{editing ? "Update" : "Add Domain"}</button>
        {editing && <button onClick={() => { setEditing(null); setForm({ name: "", price: "", category: "Brandable", tag: "" }); }} className="px-4 py-2 bg-gray-300 rounded-xl">Cancel</button>}
      </div>
    </div>
  );
}

// ---------------------- Contact Form Component ----------------------
function ContactForm({ domain, onSaved }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState(`Hi, I'm interested in ${domain.name}. Please share details.`);
  const [loading, setLoading] = useState(false);

  async function submit() {
    setLoading(true);
    try {
      const lead = { domainId: domain.id, domainName: domain.name, name, email, message };
      // hit /api/save-lead -> backend will save to Firebase/Supabase and send email
      const res = await fetch("/api/save-lead", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(lead) });
      if (!res.ok) throw new Error("lead save failed");
      onSaved && onSaved(lead);
      alert("Thanks — your enquiry was sent!");
    } catch (e) {
      console.error(e);
      alert("Failed to send enquiry — try again later.");
    }
    setLoading(false);
  }

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" className="w-full p-3 rounded-xl bg-gray-100 dark:bg-gray-700 mb-2" />
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Your email" className="w-full p-3 rounded-xl bg-gray-100 dark:bg-gray-700 mb-2" />
      <textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} className="w-full p-3 rounded-xl bg-gray-100 dark:bg-gray-700 mb-2" />
      <div className="flex gap-2">
        <button onClick={submit} disabled={loading} className="flex-1 bg-blue-600 text-white py-2 rounded-xl">{loading ? "Sending..." : "Send Enquiry"}</button>
      </div>
    </div>
  );
}