"use client";

import { useState } from "react";
import Link from "next/link";

export default function AdminPage() {
  const [tab, setTab] = useState<"content" | "links" | "appearance">("content");
  const [name, setName] = useState("Baji");
  const [promo, setPromo] = useState("BAJI-CODE");
  const [about, setAbout] = useState("Verified brand description appears here.");
  const [playText, setPlayText] = useState("PLAY");
  const [showPromo, setShowPromo] = useState(true);
  const [saved, setSaved] = useState("Draft configuration — no production data connected yet.");

  return (
    <main className="admin-page">
      <section className="admin-shell">
        <header className="admin-top"><div><p className="eyebrow">MINI APP ADMIN</p><h1>Offer Control Center</h1><p>Bangladesh · Editing Baji</p></div><div><Link href="/">View app</Link><button onClick={() => setSaved("Changes saved to the prototype configuration.")}>Save changes</button></div></header>
        <nav className="admin-tabs">{(["content", "links", "appearance"] as const).map((item) => <button key={item} className={tab === item ? "active" : ""} onClick={() => setTab(item)}>{item === "links" ? "Links & Tracking" : item[0].toUpperCase() + item.slice(1)}</button>)}</nav>
        <div className="admin-workspace">
          <form className="editor" onSubmit={(e) => e.preventDefault()}>
            {tab === "content" && <><h2>Brand information</h2><div className="form-grid"><label>Brand name<input value={name} onChange={(e) => setName(e.target.value)} /></label><label>Slug<input defaultValue="baji" /></label><label>Category<select defaultValue="both"><option value="both">Casino, Sports</option><option>Casino</option><option>Sports</option></select></label><label>Status<select><option>Active</option><option>Draft</option><option>Paused</option></select></label><label className="full">About — English<textarea rows={4} value={about} onChange={(e) => setAbout(e.target.value)} /></label><label className="full">About — Bangla<textarea rows={4} defaultValue="যাচাইকৃত ব্র্যান্ড বিবরণ এখানে প্রদর্শিত হবে।" /></label></div><h2>Offer information</h2><div className="form-grid"><label>Bonus label<input defaultValue="Verified offer" /></label><label>Promo code<input value={promo} onChange={(e) => setPromo(e.target.value)} /></label><label>Verified date<input type="date" /></label><label>Expiry date<input type="date" /></label><label>Claim status<select><option>Verified</option><option>Operator-stated</option><option>Unverified</option></select></label><label>Priority<input type="number" defaultValue="1" min="1" /></label><label className="full">Evidence URL<input type="url" placeholder="https://operator.example/offer" /></label></div></>}
            {tab === "links" && <><h2>Affiliate destination</h2><div className="form-grid"><label className="full">PLAY affiliate URL<input type="url" placeholder="https://affiliate-link.example" /></label><label className="full">Fallback URL<input type="url" placeholder="https://fallback.example" /></label><label>SubID parameter<input placeholder="subid" /></label><label>Open method<select><option>External browser</option><option>Telegram browser</option></select></label><label>Link status<select><option>Active</option><option>Paused</option></select></label><label>Market<input value="BD" readOnly /></label></div><h2>Safety & tracking</h2><div className="switch-list"><label><span>Validate destination allowlist<small>Prevent open redirects</small></span><input type="checkbox" defaultChecked /></label><label><span>Create click ID<small>Attach campaign and session</small></span><input type="checkbox" defaultChecked /></label><label><span>Fallback enabled<small>Only to the same brand</small></span><input type="checkbox" /></label></div><button className="test-button" onClick={() => setSaved("Test route: URL → click ID → SubID → redirect")}>Test PLAY route</button></>}
            {tab === "appearance" && <><h2>Theme & skin</h2><div className="form-grid"><label>Theme preset<select><option>Dark Gold</option><option>Minimal</option><option>Neon</option></select></label><label>Card density<select><option>Comfortable</option><option>Compact</option></select></label><label>PLAY button text<input value={playText} onChange={(e) => setPlayText(e.target.value)} /></label><label>Popup layout<select><option>Bottom sheet</option><option>Centered modal</option></select></label></div><h2>Display options</h2><div className="switch-list"><label><span>Show promo code</span><input type="checkbox" checked={showPromo} onChange={(e) => setShowPromo(e.target.checked)} /></label><label><span>Show verified date</span><input type="checkbox" defaultChecked /></label><label><span>Show Other Brands</span><input type="checkbox" defaultChecked /></label><label><span>Responsible gambling footer</span><input type="checkbox" defaultChecked /></label></div></>}
          </form>
          <aside className="live-preview"><span>LIVE PREVIEW</span><div className="preview-card"><div className="identity"><div className="brand-logo">BJ</div><div><small>Casino · Sports</small><h2>{name || "Brand"}</h2></div></div><p>{about || "Brand description"}</p>{showPromo && <div className="preview-promo"><span>PROMO</span><strong>{promo || "—"}</strong></div>}<button>{playText || "PLAY"}</button></div></aside>
        </div>
        <p className="admin-status">{saved}</p>
      </section>
    </main>
  );
}
