import React, { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { createClient } from "@supabase/supabase-js";
import { ArrowLeftRight, ClipboardCheck, MessageCircle, ShieldCheck, Trophy, LogIn, LogOut, CheckCircle2, LoaderCircle, Inbox, ExternalLink } from "lucide-react";
import "./style.css";

const url = import.meta.env.VITE_SUPABASE_URL;
const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
const supabase = url && anonKey ? createClient(url, anonKey) : null;

function App() {
  const [category, setCategory] = useState("Start / Sit");
  const [question, setQuestion] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState(false);
  const [hash, setHash] = useState(window.location.hash);
  const [session, setSession] = useState(null);
  const [loginEmail, setLoginEmail] = useState("");
  const [loginPassword, setLoginPassword] = useState("");
  const [loginStatus, setLoginStatus] = useState("");
  const [rows, setRows] = useState([]);
  const [filter, setFilter] = useState("all");

  useEffect(() => {
    const listener = () => setHash(window.location.hash);
    window.addEventListener("hashchange", listener);
    if (supabase) {
      supabase.auth.getSession().then(({ data }) => setSession(data.session));
      const { data } = supabase.auth.onAuthStateChange((_event, session) => setSession(session));
      return () => { window.removeEventListener("hashchange", listener); data.subscription.unsubscribe(); };
    }
    return () => window.removeEventListener("hashchange", listener);
  }, []);

  useEffect(() => { if (hash === "#dashboard" && session) loadQuestions(); }, [hash, session, filter]);

  async function submitQuestion(e) {
    e.preventDefault();
    setStatus("");
    if (!supabase) { setStatus("Setup needed: connect your Supabase project using the steps in README.md before accepting real submissions."); return; }
    if (question.trim().length < 10) { setStatus("Please add a little more detail (at least 10 characters)."); return; }
    setBusy(true);
    const { error } = await supabase.from("questions").insert({
      category, question: question.trim(), display_name: name.trim() || null,
      contact_email: email.trim() || null
    });
    setBusy(false);
    if (error) setStatus("We couldn't send that yet. Please try again in a moment.");
    else { setQuestion(""); setName(""); setEmail(""); setStatus("Question submitted! Thanks — Tyler can review it in the private dashboard."); }
  }

  async function login(e) {
    e.preventDefault(); setLoginStatus("");
    if (!supabase) { setLoginStatus("Add your Supabase settings first (see README.md)."); return; }
    const { error } = await supabase.auth.signInWithPassword({ email: loginEmail, password: loginPassword });
    setLoginStatus(error ? "Login failed. Check the email and password, and make sure the dashboard account exists." : "Signed in.");
  }

  async function loadQuestions() {
    if (!supabase || !session) return;
    let query = supabase.from("questions").select("*").order("created_at", { ascending: false }).limit(200);
    if (filter !== "all") query = query.eq("status", filter);
    const { data, error } = await query;
    if (error) setLoginStatus("Could not load questions. Confirm this account is marked as an admin in the database.");
    else setRows(data || []);
  }

  async function updateStatus(id, nextStatus) {
    const { error } = await supabase.from("questions").update({ status: nextStatus }).eq("id", id);
    if (error) setLoginStatus("Couldn't update that question. Check admin permissions.");
    else loadQuestions();
  }

  async function logout() { if (supabase) await supabase.auth.signOut(); setRows([]); window.location.hash = ""; }

  if (hash === "#dashboard") {
    return <main className="page dashboard">
      <header className="topbar"><a className="brand" href="#"><span className="brand-icon"><MessageCircle /></span><span>ASK TYLER <b>LIVE</b><small>PRIVATE CREATOR DASHBOARD</small></span></a><a className="backlink" href="/">Public site <ExternalLink size={15}/></a></header>
      <section className="dashintro"><span className="eyebrow">TYLER'S INBOX</span><h1>Question dashboard</h1><p>Review submissions privately and track which ones you've answered.</p></section>
      {!session ? <form className="login-card" onSubmit={login}>
        <div className="icon-tile"><LogIn/></div><h2>Creator sign in</h2><p>Only your authenticated admin account should access this inbox.</p>
        <label>Email<input type="email" required value={loginEmail} onChange={e=>setLoginEmail(e.target.value)} autoComplete="username"/></label>
        <label>Password<input type="password" required value={loginPassword} onChange={e=>setLoginPassword(e.target.value)} autoComplete="current-password"/></label>
        <button className="primary" disabled={busy}>Sign in securely</button>
        {loginStatus && <p className="notice">{loginStatus}</p>}
        {!supabase && <p className="notice">Supabase isn't connected yet. Follow README.md.</p>}
      </form> : <section className="inbox">
        <div className="inbox-head"><div><h2><Inbox size={21}/> Incoming questions</h2><p>{rows.length} shown (maximum 200)</p></div><button className="secondary" onClick={logout}><LogOut size={16}/> Sign out</button></div>
        <div className="filterbar"><label>Filter <select value={filter} onChange={e=>setFilter(e.target.value)}><option value="all">All questions</option><option value="new">New</option><option value="answered">Answered</option><option value="archived">Archived</option></select></label><button className="secondary" onClick={loadQuestions}>Refresh</button></div>
        {loginStatus && <p className="notice">{loginStatus}</p>}
        {rows.length === 0 ? <div className="empty"><Inbox size={30}/><h3>No questions here yet</h3><p>New visitor submissions will appear in this inbox.</p></div> : <div className="question-list">{rows.map(row=><article className="question-card" key={row.id}>
          <div className="question-meta"><span className="pill">{row.category}</span><span className={`status ${row.status}`}>{row.status}</span><time>{new Date(row.created_at).toLocaleString()}</time></div>
          <p className="question-text">{row.question}</p><div className="submitter">{row.display_name || "Anonymous"}{row.contact_email ? ` · ${row.contact_email}` : ""}</div>
          <div className="card-actions"><button className="secondary" onClick={()=>updateStatus(row.id,"answered")}><CheckCircle2 size={15}/> Mark answered</button><button className="secondary" onClick={()=>updateStatus(row.id,"archived")}>Archive</button><button className="text-button" onClick={()=>updateStatus(row.id,"new")}>Mark new</button></div>
        </article>)}</div>}
      </section>}
      <footer>Private by design · Keep your admin credentials private.</footer>
    </main>;
  }

  return <main className="page">
    <header className="topbar"><a className="brand" href="#"><span className="brand-icon"><MessageCircle /></span><span>ASK TYLER <b>LIVE</b><small>YOUR FANTASY FOOTBALL EDGE</small></span></a><a className="admin-link" href="#dashboard"><ShieldCheck size={16}/> Tyler's dashboard</a></header>
    <section className="hero">
      <div className="field-lines"></div><div className="eyebrow"><span className="live-dot"></span> THE FANTASY ADVICE HUB</div>
      <h1>Got a fantasy question?<br/><em>Ask Tyler.</em></h1>
      <p className="hero-copy">Trade questions. Tough lineup calls. Get your question in and let Tyler help you make the call.</p>
      <div className="hero-tags"><span><Trophy size={15}/> Fantasy football focused</span><span><ShieldCheck size={15}/> Simple. Direct. No clutter.</span></div>
    </section>
    <section className="form-wrap">
      <form className="question-form" onSubmit={submitQuestion}>
        <div className="section-heading"><span className="step">01</span><div><h2>Choose your question type</h2><p>What do you need help with?</p></div></div>
        <div className="choice-grid">
          <button type="button" className={`choice ${category === "Trade" ? "selected" : ""}`} onClick={()=>setCategory("Trade")}><span className="choice-icon"><ArrowLeftRight/></span><span className="choice-title">Trade</span><span className="choice-desc">Should I make this deal?</span><span className="radio-dot"></span></button>
          <button type="button" className={`choice ${category === "Start / Sit" ? "selected" : ""}`} onClick={()=>setCategory("Start / Sit")}><span className="choice-icon"><ClipboardCheck/></span><span className="choice-title">Start / Sit</span><span className="choice-desc">Who belongs in my lineup?</span><span className="radio-dot"></span></button>
        </div>
        <div className="section-heading question-heading"><span className="step">02</span><div><h2>Type your question</h2><p>More context means a better answer.</p></div></div>
        <label className="field-label" htmlFor="question">Your fantasy question <span>Required</span></label>
        <textarea id="question" required minLength="10" maxLength="2000" rows="5" value={question} onChange={e=>setQuestion(e.target.value)} placeholder={category === "Trade" ? "Example: Should I trade Player A for Player B? I'm in a 12-team PPR league..." : "Example: Should I start Player A or Player B this week? My league uses full PPR..."}/>
        <div className="char-count">{question.length}/2000 characters</div>
        <div className="optional-fields"><label className="field-label" htmlFor="name">Your name <span>Optional</span></label><input id="name" maxLength="60" value={name} onChange={e=>setName(e.target.value)} placeholder="What should Tyler call you?"/><label className="field-label" htmlFor="email">Email <span>Optional</span></label><input id="email" type="email" maxLength="254" value={email} onChange={e=>setEmail(e.target.value)} placeholder="Only if you'd like a follow-up"/></div>
        <button className="primary submit" type="submit" disabled={busy}>{busy ? <><LoaderCircle className="spin" size={18}/> Sending...</> : <>Send my question <span>↗</span></>}</button>
        <p className="privacy-note"><ShieldCheck size={15}/> Your submission goes to Tyler's private inbox, not a public feed.</p>
        {status && <div className={status.startsWith("Question submitted") ? "success-message" : "notice"} role="status">{status}</div>}
      </form>
      <aside className="side-note"><div className="side-icon"><MessageCircle/></div><h3>Make your question count.</h3><p>For the best advice, include your league size, scoring format, and any players involved.</p><div className="tip"><span>01</span><p><b>Trade</b><br/>List the players on both sides of the deal.</p></div><div className="tip"><span>02</span><p><b>Start / Sit</b><br/>Name your options and scoring format.</p></div><div className="side-foot"><span className="live-dot"></span> BUILT FOR FANTASY MANAGERS</div></aside>
    </section>
    <footer className="site-footer"><a className="footer-brand" href="#">ASK TYLER <b>LIVE</b></a><span>Fantasy football, simplified.</span><a href="#dashboard">Creator login <LogIn size={14}/></a></footer>
  </main>;
}

createRoot(document.getElementById("root")).render(<App />);