"use client";

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

const LISTINGS = [
  { id: "1", title: "Verified exit scam early warning — active market", category: "Market Intel", price: 8, verified: true, age: "2h ago", rep: 94 },
  { id: "2", title: "Opsec hole in popular forum software (CVE-pending)", category: "Vulnerability", price: 25, verified: true, age: "6h ago", rep: 88 },
  { id: "3", title: "Darknet exchange front-running scheme — evidence package", category: "Fraud Intel", price: 15, verified: false, age: "1d ago", rep: 72 },
  { id: "4", title: "Law enforcement infrastructure node IPs (EU)", category: "Counter-Intel", price: 40, verified: true, age: "2d ago", rep: 91 },
  { id: "5", title: "Compromised vendor PGP key — do not transact", category: "Crypto", price: 5, verified: true, age: "3h ago", rep: 99 },
  { id: "6", title: "Tor relay operator correlation attack proof-of-concept", category: "Network", price: 30, verified: false, age: "5d ago", rep: 65 },
];

const CATS = ["All", "Market Intel", "Vulnerability", "Fraud Intel", "Counter-Intel", "Crypto", "Network"];

export default function OraclePage() {
  const [cat, setCat] = useState("All");

  const filtered = cat === "All" ? LISTINGS : LISTINGS.filter((l) => l.category === cat);

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#0a0a0a] pt-24 pb-20">
        {/* Header */}
        <section className="container mx-auto max-w-6xl px-4 mb-12">
          <p className="mb-2 font-mono text-[10px] uppercase tracking-[0.35em] text-neon-purple/70">
            the oracle · verified intelligence market
          </p>
          <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
            <div>
              <h1 className="font-orbitron text-4xl font-bold md:text-5xl">
                THE <span className="text-neon-purple">ORACLE</span>
              </h1>
              <p className="mt-3 max-w-xl text-foreground/60">
                Buy and sell verified darknet intelligence. Listings are staked — submitters put VOID credits at risk. Community verification ensures accuracy.
              </p>
            </div>
            <div className="flex gap-3">
              <Link href="/sign-in" className="rounded-lg border border-neon-purple/40 bg-neon-purple/10 px-4 py-2 text-sm font-bold text-neon-purple hover:bg-neon-purple/20">
                Submit intel →
              </Link>
            </div>
          </div>
        </section>

        {/* Stats bar */}
        <section className="container mx-auto max-w-6xl px-4 mb-8">
          <div className="flex flex-wrap gap-6 rounded-xl border border-zinc-800 bg-black/40 p-4 text-sm">
            {[
              { label: "Active listings", value: LISTINGS.length },
              { label: "Verified", value: LISTINGS.filter((l) => l.verified).length },
              { label: "Avg price", value: `✦ ${Math.round(LISTINGS.reduce((a, l) => a + l.price, 0) / LISTINGS.length)} VOID` },
              { label: "Avg rep score", value: `${Math.round(LISTINGS.reduce((a, l) => a + l.rep, 0) / LISTINGS.length)}%` },
            ].map((s) => (
              <div key={s.label}>
                <p className="text-xs text-foreground/40 uppercase tracking-wider">{s.label}</p>
                <p className="font-bold text-foreground">{s.value}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Category filter */}
        <section className="container mx-auto max-w-6xl px-4 mb-6">
          <div className="flex flex-wrap gap-2">
            {CATS.map((c) => (
              <button
                key={c}
                onClick={() => setCat(c)}
                className={`rounded-full px-4 py-1.5 text-xs font-semibold border transition ${
                  cat === c
                    ? "border-neon-purple/60 bg-neon-purple/20 text-neon-purple"
                    : "border-zinc-700 bg-zinc-900 text-foreground/60 hover:border-zinc-500"
                }`}
              >
                {c}
              </button>
            ))}
          </div>
        </section>

        {/* Listings */}
        <section className="container mx-auto max-w-6xl px-4">
          <div className="space-y-3">
            {filtered.map((listing) => (
              <div
                key={listing.id}
                className="flex flex-col gap-3 rounded-xl border border-zinc-700/40 bg-black/40 p-5 sm:flex-row sm:items-center hover:border-zinc-500 transition cursor-pointer"
              >
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="rounded-full border border-zinc-600 bg-zinc-800 px-2 py-0.5 text-[9px] uppercase tracking-wider text-zinc-400">
                      {listing.category}
                    </span>
                    {listing.verified && (
                      <span className="rounded-full border border-neon-cyan/30 bg-neon-cyan/10 px-2 py-0.5 text-[9px] uppercase tracking-wider text-neon-cyan">
                        ✓ verified
                      </span>
                    )}
                    <span className="text-[10px] text-foreground/30">{listing.age}</span>
                  </div>
                  <p className="font-semibold text-foreground text-sm leading-snug">{listing.title}</p>
                  <div className="mt-1 flex items-center gap-3">
                    <span className="text-xs text-foreground/40">Rep: <span className={listing.rep >= 85 ? "text-neon-green" : listing.rep >= 65 ? "text-yellow-500" : "text-red-400"}>{listing.rep}%</span></span>
                  </div>
                </div>
                <div className="flex items-center gap-3 shrink-0">
                  <span className="font-mono text-base font-bold text-neon-purple">✦ {listing.price}</span>
                  <button className="rounded-lg border border-neon-purple/40 bg-neon-purple/10 px-4 py-1.5 text-xs font-bold text-neon-purple hover:bg-neon-purple/20 transition">
                    Purchase
                  </button>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Submit box */}
        <section className="container mx-auto max-w-3xl px-4 mt-16">
          <div className="rounded-2xl border border-neon-purple/20 bg-neon-purple/5 p-8 text-center">
            <h2 className="font-orbitron text-xl font-bold mb-2">Have actionable intelligence?</h2>
            <p className="text-sm text-foreground/60 mb-5">Submit a listing. Stake VOID credits to guarantee accuracy — payouts on verified buys.</p>
            <Link href="/sign-in" className="inline-block rounded-full bg-neon-purple/20 border border-neon-purple/40 px-6 py-2.5 text-sm font-bold text-neon-purple hover:bg-neon-purple/30">
              Submit Intelligence →
            </Link>
          </div>
        </section>
      </main>
    </>
  );
}