import { useState } from 'react';
import { 
  Plus, 
  Eye,
  KeyRound,
  Search,
  Sparkles
} from "lucide-react";
import Button from "@/components/common/button";
import Table from '@/components/common/dataTable';
import { StatusBadge } from '@/components/common/statusBadge';

export const userHeaders = [
  "Name",
  "Email",
  "Phone",
  "Tenants",
  "MFA",
  "User ID",
  "Actions",
];

const UserActionButtons = () => (
  <div className="flex items-center justify-center gap-2">
    <Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
      <Eye size={16} />
    </Button>

    <Button className="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-700/60 text-slate-400 hover:bg-slate-800 hover:text-white transition">
      <KeyRound size={16} />
    </Button>
  </div>
);

export const userRows = [
  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
        DT
      </div>

      <span className="font-semibold text-slate-100">
        Dhananjay T.
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      dhananjay@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98200 10001
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      4 assigned
    </span>,

    <StatusBadge
      text="On"
      color="bg-emerald-500/15 text-emerald-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5001
    </span>,

    <UserActionButtons />,
  ],

  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-500/15 font-semibold text-cyan-400">
        MS
      </div>

      <span className="font-semibold text-slate-100">
        ME Supervisor
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      me.local@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98201 10010
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      1 assigned
    </span>,

    <StatusBadge
      text="On"
      color="bg-emerald-500/15 text-emerald-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5002
    </span>,

    <UserActionButtons />,
  ],

  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-500/15 font-semibold text-amber-400">
        T
      </div>

      <span className="font-semibold text-slate-100">
        Technician
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      tech.local@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98202 10011
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      2 assigned
    </span>,

    <StatusBadge
      text="Off"
      color="bg-slate-700/50 text-slate-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5003
    </span>,

    <UserActionButtons />,
  ],

  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-rose-500/15 font-semibold text-rose-400">
        TC
      </div>

      <span className="font-semibold text-slate-100">
        Tenant Customer
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      tenant@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98203 10012
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      1 assigned
    </span>,

    <StatusBadge
      text="On"
      color="bg-emerald-500/15 text-emerald-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5004
    </span>,

    <UserActionButtons />,
  ],

  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-violet-500/15 font-semibold text-violet-400">
        HA
      </div>

      <span className="font-semibold text-slate-100">
        Helpdesk Agent
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      help@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98204 10013
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      2 assigned
    </span>,

    <StatusBadge
      text="On"
      color="bg-emerald-500/15 text-emerald-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5005
    </span>,

    <UserActionButtons />,
  ],

  [
    <div className="flex items-center gap-4">
      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-orange-500/15 font-semibold text-orange-400">
        EA
      </div>

      <span className="font-semibold text-slate-100">
        Energy Analyst
      </span>
    </div>,

    <span className="font-semibold text-slate-100">
      energy@kafm.io
    </span>,

    <span className="font-mono text-sky-300">
      +91 98430 30030
    </span>,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      1 assigned
    </span>,

    <StatusBadge
      text="On"
      color="bg-emerald-500/15 text-emerald-400"
    />,

    <span className="rounded-md border border-slate-700 bg-slate-900 px-3 py-1 font-mono text-slate-300">
      USR-5006
    </span>,

    <UserActionButtons />,
  ],
];

export default function UserPortal() {
  const [searchQuery, setSearchQuery] = useState('');

  return (
    <div className="my-15 text-slate-100 font-sans ">
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono">
            <span className="text-teal-400">PLATFORM</span>
            <span className="text-slate-500">•</span>
            <span className="text-slate-500">USERS</span>
          </div>
          <h1 className="text-3xl font-bold text-white tracking-tight mt-1">
            Users
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
            All platform user accounts. Create credentials, assign tenants, and manage passwords. This is the single account store — Operations role access reads from here.
          </p>
        </div>

        {/* --- HEADER BUTTON --- */}
        <div className="flex items-center gap-3 self-start md:mt-2">
          <Button className="bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-xs px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors shadow-lg shadow-emerald-500/10">
            <Plus className="w-4 h-4 text-slate-950 stroke-[3]" />
            <span>Add user</span>
          </Button>
        </div>
      </div>

      {/* --- TABLE CONTAINER WITH UPPER BAR --- */}
      <div className="bg-slate-900/60 border border-slate-800/80 rounded-xl p-4 space-y-4">
        {/* Table Upper UI (Full-width Search Bar matching screenshot) */}
        <div className="flex items-center w-full">
          <div className="relative w-full">
            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search users by name, email or ID..."
              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/80 border border-slate-800 rounded-lg text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-slate-700 transition"
            />
          </div>
        </div>

        {/* --- TABLE --- */}
        <Table headers={userHeaders} rows={userRows} />

        {/* Footer Record Count */}
        <div className="text-xs text-slate-500 font-mono pt-1">
          {userRows.length} records
        </div>
      </div>

     
    </div>
  );
}