"use client";

import Link from "next/link";
import Sidebar from "@/components/Sidebar";

function Icon({ name, className = "" }: { name: string; className?: string }) {
  return <span className={`material-symbols-outlined ${className}`}>{name}</span>;
}

function StatChip({ label, value, icon }: { label: string; value: string; icon: string }) {
  return (
    <div className="flex flex-col items-center justify-center p-4 rounded-xl border border-white/[0.06] text-center gap-1" style={{ background: "#0f0a1f" }}>
      <Icon name={icon} className="text-[#B7A6FB] text-xl mb-1" />
      <span className="text-xl font-black text-white">{value}</span>
      <span className="text-[10px] text-slate-500 uppercase tracking-wider font-mono">{label}</span>
    </div>
  );
}

function ActionBtn({ icon, label, sub }: { icon: string; label: string; sub: string }) {
  return (
    <button className="flex items-center gap-3 rounded-xl p-4 border border-white/[0.06] hover:border-[#B7A6FB]/30 hover:bg-[#B7A6FB]/5 transition-all text-left group" style={{ background: "#0f0a1f" }}>
      <Icon name={icon} className="text-[#B7A6FB] text-2xl group-hover:scale-110 transition-transform" />
      <div>
        <p className="text-white font-medium text-sm">{label}</p>
        <p className="text-slate-500 text-xs">{sub}</p>
      </div>
    </button>
  );
}

export default function ProfilePage() {
  const displayName = "Anirban Basak";
  const initials    = "AB";
  const username    = "@anirbanbasak";
  const telegramId  = "#7291048";
  const personality = "Balanced";
  const voiceId     = "tHnMa72bKS";
  const joinedAt    = "January 12, 2026";

  const accountRows = [
    { label: "Display Name",     value: displayName },
    { label: "Telegram Handle",  value: username },
    { label: "Telegram ID",      value: telegramId },
    { label: "Personality",      value: personality },
    { label: "Member Since",     value: joinedAt },
  ];

  return (
    <div className="flex h-screen w-full overflow-hidden bg-[#020105] text-slate-300 relative">
      {/* grid bg */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          backgroundImage:
            "linear-gradient(rgba(183,166,251,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(183,166,251,0.03) 1px,transparent 1px)",
          backgroundSize: "40px 40px",
        }}
      />

      <Sidebar />

      <main className="flex-1 flex flex-col h-full overflow-hidden relative z-10">
        {/* Top bar */}
        <header className="h-14 flex items-center justify-between px-6 bg-[#020105]/90 backdrop-blur-md border-b border-white/[0.06] sticky top-0 z-30 shrink-0">
          <div className="flex items-center gap-3">
            <Link href="/dashboard" className="p-1.5 rounded-lg text-slate-500 hover:text-white hover:bg-white/5 transition-all">
              <Icon name="arrow_back" className="text-lg" />
            </Link>
            <h2 className="text-sm font-semibold text-white tracking-tight">User Profile</h2>
          </div>
          <div className="flex items-center gap-2">
            <button className="size-8 flex items-center justify-center rounded-lg bg-white/[0.04] border border-white/[0.08] text-slate-500 hover:text-white hover:border-white/20 transition-all" title="Settings">
              <Icon name="settings" className="text-base" />
            </button>
            <button className="size-8 flex items-center justify-center rounded-lg bg-white/[0.04] border border-white/[0.08] text-slate-500 hover:text-red-400 hover:border-red-400/20 transition-all" title="Logout">
              <Icon name="logout" className="text-base" />
            </button>
          </div>
        </header>

        {/* Scrollable content */}
        <div className="flex-1 overflow-y-auto p-6">
          <div className="max-w-2xl mx-auto flex flex-col gap-6">

            {/* Profile hero */}
            <div
              className="flex flex-col items-center gap-5 py-8 px-6 rounded-2xl border border-white/[0.06] relative overflow-hidden"
              style={{ background: "rgba(183,166,251,0.04)" }}
            >
              <div className="absolute inset-0 bg-gradient-to-b from-[#B7A6FB]/5 to-transparent pointer-events-none" />

              {/* Avatar */}
              <div className="relative z-10">
                <div
                  className="size-28 rounded-full border-2 border-[#B7A6FB] p-1"
                  style={{ boxShadow: "0 0 24px rgba(183,166,251,0.25)" }}
                >
                  <div className="size-full rounded-full bg-gradient-to-br from-[#B7A6FB]/30 to-[#22d3ee]/20 flex items-center justify-center">
                    <span className="text-3xl font-black text-white">{initials}</span>
                  </div>
                </div>
                <div className="absolute bottom-1 right-1 size-5 bg-emerald-500 border-4 border-[#020105] rounded-full" />
              </div>

              <div className="flex flex-col items-center text-center z-10">
                <h1 className="text-3xl font-bold text-white tracking-tight">{displayName}</h1>
                <p className="text-[#B7A6FB] font-medium mt-1">{username}</p>
                <p className="text-slate-500 text-sm mt-1">
                  Telegram ID: <span className="text-slate-400 font-mono">{telegramId}</span>
                </p>
                <div className="mt-3 flex items-center gap-1.5 px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/10 text-emerald-400 text-[11px] font-bold uppercase tracking-wider">
                  <span className="size-1.5 rounded-full bg-emerald-400 animate-pulse" />
                  Active
                </div>
              </div>
            </div>

            {/* Stats row */}
            <div className="grid grid-cols-3 gap-3">
              <StatChip icon="smart_toy"          label="Persona"  value={personality} />
              <StatChip icon="record_voice_over"  label="Voice ID" value={voiceId + "…"} />
              <StatChip icon="bolt"               label="Status"   value="Online" />
            </div>

            {/* Account details */}
            <div className="flex flex-col gap-3">
              <h3 className="text-slate-100 text-sm font-semibold px-1">Account Details</h3>
              <div
                className="rounded-2xl border border-white/[0.06] p-5 flex flex-col gap-4"
                style={{ background: "rgba(183,166,251,0.03)" }}
              >
                {accountRows.map(({ label, value }, i) => (
                  <div
                    key={label}
                    className={`flex justify-between items-center${i < accountRows.length - 1 ? " pb-4 border-b border-white/[0.05]" : ""}`}
                  >
                    <span className="text-slate-500 text-sm">{label}</span>
                    <span className="text-slate-100 font-medium text-sm font-mono">{value}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Active agent */}
            <div className="flex flex-col gap-3">
              <h3 className="text-slate-100 text-sm font-semibold px-1">Active Agent Status</h3>
              <div
                className="rounded-2xl border border-white/[0.06] p-5 flex items-center justify-between"
                style={{ background: "rgba(183,166,251,0.03)" }}
              >
                <div className="flex items-center gap-4">
                  <div className="size-10 rounded-lg bg-[#B7A6FB]/15 flex items-center justify-center text-[#B7A6FB]">
                    <Icon name="smart_toy" className="text-xl" />
                  </div>
                  <div>
                    <p className="text-slate-100 font-medium text-sm">Mesh-Core-Alpha</p>
                    <p className="text-slate-500 text-xs">Primary Computing Node</p>
                  </div>
                </div>
                <div className="px-3 py-1 rounded-full border border-emerald-500/20 bg-emerald-500/10 text-emerald-400 text-[11px] font-bold uppercase tracking-wider">
                  Operational
                </div>
              </div>
            </div>

            {/* Quick actions */}
            <div className="flex flex-col gap-3">
              <h3 className="text-slate-100 text-sm font-semibold px-1">Quick Actions</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <ActionBtn icon="edit_square"   label="Edit Profile"      sub="Update your information" />
                <ActionBtn icon="shield_lock"   label="Security Settings" sub="Manage 2FA and keys" />
                <ActionBtn icon="notifications" label="Notifications"     sub="Alert preferences" />
                <ActionBtn icon="link"          label="Connected Apps"    sub="Telegram, UPI & more" />
              </div>
            </div>

            {/* Footer */}
            <div className="flex justify-center py-6">
              <p className="text-slate-700 text-xs font-mono">negoT8 v2.0.0 © 2026</p>
            </div>

          </div>
        </div>
      </main>
    </div>
  );
}