import React, { useState, useEffect } from 'react';
import { Mic, Play, Check, Shield, Activity, Smartphone, Trash2, LogOut, Star } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';
import { getFirestore, collection, onSnapshot, query, doc, setDoc } from 'firebase/firestore';

// --- FIREBASE INITIALIZATION ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'voice-review-pro';

export default function App() {
  const [view, setView] = useState('landing');
  const [user, setUser] = useState(null);
  const [reviews, setReviews] = useState([
    { id: '1', title: "Authentic Audio Proof", duration: "1:05", date: "Just now", sentiment: "Positive" },
    { id: '2', title: "Customer Beta Feedback", duration: "0:45", date: "2h ago", sentiment: "Neutral" }
  ]);

  // Auth Logic (Rule 3)
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (e) { console.error(e); }
    };
    initAuth();
    return onAuthStateChanged(auth, setUser);
  }, []);

  // Firestore Logic (Rule 1 & 2)
  useEffect(() => {
    if (!user) return;
    const q = collection(db, 'artifacts', appId, 'public', 'data', 'reviews');
    const unsubscribe = onSnapshot(q, (snapshot) => {
      if (!snapshot.empty) {
        setReviews(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })));
      }
    }, (err) => console.error("Firestore Error:", err));
    return () => unsubscribe();
  }, [user]);

  if (view === 'dashboard') {
    return (
      <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
        <nav className="bg-white border-b border-slate-200 px-6 py-4 flex justify-between items-center sticky top-0 z-10">
          <div className="flex items-center gap-2">
            <Mic className="h-6 w-6 text-indigo-600" />
            <span className="font-black text-xl italic uppercase tracking-tighter">Pro Dashboard</span>
          </div>
          <button onClick={() => setView('landing')} className="text-slate-400 font-bold uppercase text-xs tracking-widest hover:text-indigo-600 flex items-center gap-2">
            <LogOut className="h-4 w-4" /> Exit
          </button>
        </nav>
        
        <main className="p-4 md:p-8 max-w-4xl mx-auto w-full">
          <div className="bg-indigo-600 p-8 md:p-12 rounded-[3rem] text-white shadow-2xl mb-12 relative overflow-hidden">
            <div className="relative z-10">
              <h2 className="text-4xl md:text-5xl font-black uppercase italic tracking-tighter mb-4 leading-none">Voices Can't Be Faked.</h2>
              <p className="font-bold opacity-80 uppercase text-xs tracking-[0.2em] mb-8">Deploy audible trust to your storefront instantly.</p>
              <button className="bg-white text-indigo-600 px-8 py-4 rounded-2xl font-black uppercase tracking-tighter hover:scale-105 transition shadow-lg active:scale-95">
                Start New Recording
              </button>
            </div>
            <Activity className="absolute -bottom-10 -right-10 h-64 w-64 opacity-10 rotate-12" />
          </div>

          <div className="grid gap-4">
            {reviews.map(r => (
              <div key={r.id} className="bg-white p-6 rounded-3xl shadow-sm border border-slate-100 flex justify-between items-center hover:shadow-md transition group">
                <div className="flex items-center gap-4">
                  <div className="bg-indigo-50 p-4 rounded-2xl group-hover:bg-indigo-600 transition-colors">
                    <Play className="h-5 w-5 text-indigo-600 group-hover:text-white fill-current" />
                  </div>
                  <div>
                    <p className="font-black uppercase tracking-tight text-slate-900">{r.title}</p>
                    <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{r.date} • {r.duration}</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                   <span className="text-[10px] font-black uppercase tracking-widest bg-green-50 text-green-600 px-4 py-1 rounded-full">Verified</span>
                   <Trash2 className="h-4 w-4 text-slate-200 hover:text-red-500 cursor-pointer" />
                </div>
              </div>
            ))}
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-indigo-100 selection:text-indigo-900">
      <nav className="p-8 flex justify-between items-center max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <Mic className="h-8 w-8 text-indigo-600" />
          <span className="font-black text-2xl italic uppercase tracking-tighter">Voice Review Pro</span>
        </div>
        <button onClick={() => setView('dashboard')} className="bg-slate-900 text-white px-8 py-3 rounded-full font-black hover:bg-indigo-600 transition uppercase tracking-widest text-xs">Login</button>
      </nav>

      <header className="py-24 md:py-40 text-center px-6">
        <h1 className="text-7xl md:text-[10rem] font-black mb-8 tracking-tighter uppercase leading-[0.85]">
          TRUST <br/><span className="text-indigo-600 italic underline decoration-slate-900 underline-offset-[16px]">AUDIBLY.</span>
        </h1>
        <p className="text-xl md:text-2xl text-slate-400 mb-12 max-w-2xl mx-auto font-bold italic uppercase tracking-tight leading-relaxed">
          The internet is full of fake text. <br className="hidden md:block"/> Human voices are the only truth left in commerce.
        </p>
        <button onClick={() => setView('dashboard')} className="bg-indigo-600 text-white px-16 py-8 rounded-[2.5rem] text-2xl md:text-3xl font-black hover:scale-105 transition shadow-[0_20px_50px_rgba(79,70,229,0.3)] uppercase tracking-tighter active:scale-95">
          Deploy Your Proof
        </button>
      </header>

      <section className="bg-slate-50 py-32 px-6 border-y border-slate-100">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6">
          {[
            { n: "Standard", p: "9.99", t: "/mo" },
            { n: "Growth", p: "29.99", t: "/6mo", h: true },
            { n: "Pro", p: "49.99", t: "/yr" },
            { n: "Legacy", p: "89.00", t: "once" }
          ].map(tier => (
            <div key={tier.n} className={`bg-white p-10 rounded-[3rem] border-4 transition-all hover:-translate-y-2 ${tier.h ? 'border-indigo-600 shadow-2xl' : 'border-transparent shadow-sm'}`}>
              <h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-300 mb-6">{tier.n}</h3>
              <div className="flex items-baseline mb-10">
                <span className="text-5xl font-black tracking-tighter">${tier.p}</span>
                <span className="text-slate-400 font-bold ml-1 text-sm">{tier.t}</span>
              </div>
              <ul className="space-y-4 mb-12 text-xs font-bold uppercase italic text-slate-500 tracking-tight">
                <li className="flex items-center gap-3"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> HD Voice Engine</li>
                <li className="flex items-center gap-3"><Check className="h-4 w-4 text-indigo-600 shrink-0" /> Fraud Detection</li>
              </ul>
              <button onClick={() => setView('dashboard')} className={`w-full py-5 rounded-2xl font-black uppercase tracking-widest text-[10px] transition ${tier.h ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-100 text-slate-900 hover:bg-slate-200'}`}>
                Choose {tier.n}
              </button>
            </div>
          ))}
        </div>
      </section>

      <footer className="py-24 text-center">
        <div className="flex justify-center gap-12 mb-12 opacity-20">
          <Shield className="h-10 w-10" /> <Activity className="h-10 w-10" /> <Smartphone className="h-10 w-10" />
        </div>
        <p className="font-black uppercase italic tracking-[0.4em] text-slate-200 text-xs">
          Built for the bold / © 2026 Voice Review Pro
        </p>
      </footer>
    </div>
  );
}