'use client';

import * as ActionIcons from './Icons';

import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react';
import { bulkUsers } from '@/app/actions';
import { SubmitButton } from './Actions';

export type ManagedUser = { id: number; email: string; name: string | null; role: string; mfaEnabled: boolean; isActive: boolean; lastLoginAt: string | null; createdAt: string; emailVerifiedAt: string | null; invitePending: boolean; activeSessions: number; deletedAt: string | null; purgeAt: string | null };
const label: Record<string,string> = { owner: 'Owner', admin: 'Admin', editor: 'Editor', verifier: 'Verifier', professional: 'Professional', firm_admin: 'Firm admin', client: 'Client' };
const stamp = (value: string | null) => value ? new Date(value).toLocaleString('en-GB', { timeZone: 'Asia/Karachi' }) : 'Never';

export function UsersManager({ users, viewerId, viewerRole, trash }: { users: ManagedUser[]; viewerId: number; viewerRole: string; trash: boolean }) {
  const [query,setQuery] = useState(''), [role,setRole] = useState('all'), [status,setStatus] = useState('all'), [mfa,setMfa] = useState('all'), [verified,setVerified] = useState('all');
  const [sort,setSort] = useState('name'), [size,setSize] = useState(25), [page,setPage] = useState(1), [selected,setSelected] = useState<number[]>([]);
  const manageable = (u: ManagedUser) => u.id !== viewerId && (viewerRole === 'owner' || !['owner','admin'].includes(u.role));
  useEffect(() => { setSelected(ids => ids.filter(id => users.some(u => u.id === id))); }, [users]);
  const filtered = useMemo(() => users.filter(u => (!query || `${u.name ?? ''} ${u.email} ${u.id}`.toLowerCase().includes(query.toLowerCase())) && (role === 'all' || u.role === role) && (status === 'all' || (status === 'invited' ? u.invitePending : status === 'active' ? u.isActive && !u.invitePending : !u.isActive)) && (mfa === 'all' || u.mfaEnabled === (mfa === 'on')) && (verified === 'all' || !!u.emailVerifiedAt === (verified === 'yes'))).sort((a,b) => {
    if (sort === 'newest') return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() || b.id-a.id;
    if (sort === 'oldest') return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() || a.id-b.id;
    if (sort === 'last-login') return new Date(b.lastLoginAt ?? 0).getTime() - new Date(a.lastLoginAt ?? 0).getTime() || a.id-b.id;
    if (sort === 'expiry') return new Date(a.purgeAt ?? 0).getTime() - new Date(b.purgeAt ?? 0).getTime() || a.id-b.id;
    return (sort === 'email' ? a.email.localeCompare(b.email) : (a.name ?? a.email).localeCompare(b.name ?? b.email)) || a.id-b.id;
  }), [users,query,role,status,mfa,verified,sort]);
  const pages = Math.max(1,Math.ceil(filtered.length/size)), currentPage = Math.min(page,pages), visible = filtered.slice((currentPage-1)*size,currentPage*size);
  const selectable = filtered.filter(manageable), visibleIds = visible.filter(manageable).map(u=>u.id), allVisible = visibleIds.length > 0 && visibleIds.every(id=>selected.includes(id));
  const toggle = (id:number) => setSelected(ids=>ids.includes(id)?ids.filter(x=>x!==id):[...ids,id].slice(0,500));
  const actionButtons = (single = false) => <>
    {trash ? <><SubmitButton name="operation" value="restore" className="btn btn-quiet btn-xs" disabled={!single && !selected.length}><ActionIcons.RestoreIcon />Restore{single ? '' : ' selected'}</SubmitButton><SubmitButton name="operation" value="purge" className="btn btn-danger-quiet btn-xs" disabled={!single && !selected.length} confirm="Permanently delete these accounts and their account data? This cannot be undone."><ActionIcons.TrashIcon />Delete permanently</SubmitButton></> : <>
      <SubmitButton name="operation" value="enable" className="btn btn-quiet btn-xs" disabled={!single && !selected.length}><ActionIcons.CheckCircleIcon />Activate</SubmitButton>
      <SubmitButton name="operation" value="disable" className="btn btn-quiet btn-xs" disabled={!single && !selected.length} confirm="Disable the selected accounts and sign them out?"><ActionIcons.XCircleIcon />Disable</SubmitButton>
      {!single && <SubmitButton name="operation" value="revoke-sessions" className="btn btn-quiet btn-xs" disabled={!selected.length}><ActionIcons.LogOutIcon />Sign out</SubmitButton>}
      <SubmitButton name="operation" value="trash" className="btn btn-danger-quiet btn-xs" disabled={!single && !selected.length} confirm="Move these accounts to Trash? They will be disabled now and permanently deleted after 30 days."><ActionIcons.TrashIcon />Move to Trash</SubmitButton>
    </>}
  </>;
  return <div className="rounded-xl border border-rule bg-surface">
    <div className="grid gap-3 border-b border-rule p-4 text-sm sm:grid-cols-2 lg:grid-cols-3">
      <label><span className="field-label"><ActionIcons.SearchIcon />Search accounts</span><input value={query} onChange={e=>{setQuery(e.target.value);setPage(1);}} placeholder="Name, email or user ID" className="field" /></label>
      <label><span className="field-label"><ActionIcons.ShieldCheckIcon />Role</span><select value={role} onChange={e=>{setRole(e.target.value);setPage(1);}} className="field"><option value="all">All roles</option>{Object.entries(label).map(([value,text])=><option key={value} value={value}>{text}</option>)}</select></label>
      {!trash && <label><span className="field-label"><ActionIcons.ActivityIcon />Status</span><select value={status} onChange={e=>{setStatus(e.target.value);setPage(1);}} className="field"><option value="all">All statuses</option><option value="active">Active</option><option value="disabled">Disabled</option><option value="invited">Invitation pending</option></select></label>}
      <label><span className="field-label"><ActionIcons.ShieldCheckIcon />Two-factor</span><select value={mfa} onChange={e=>{setMfa(e.target.value);setPage(1);}} className="field"><option value="all">All</option><option value="on">Enabled</option><option value="off">Disabled</option></select></label>
      <label><span className="field-label"><ActionIcons.BadgeCheckIcon />Email verified</span><select value={verified} onChange={e=>{setVerified(e.target.value);setPage(1);}} className="field"><option value="all">All</option><option value="yes">Verified</option><option value="no">Unverified</option></select></label>
      <label><span className="field-label"><ActionIcons.SortIcon />Sort</span><select value={sort} onChange={e=>setSort(e.target.value)} className="field"><option value="name">Name A–Z</option><option value="email">Email A–Z</option><option value="newest">Newest first</option><option value="oldest">Oldest first</option><option value="last-login">Last sign-in</option>{trash && <option value="expiry">Deletion date</option>}</select></label>
    </div>
    <div className="flex flex-wrap items-center gap-2 border-b border-rule p-4 text-xs">
      <span className="mr-2 text-muted">{filtered.length} accounts · {selected.length} selected (up to 500)</span>
      <button type="button" className="btn btn-quiet btn-xs" onClick={()=>setSelected([...new Set([...selected,...visibleIds])].slice(0,500))}><ActionIcons.ListChecksIcon />Select this page</button>
      <button type="button" className="btn btn-quiet btn-xs" onClick={()=>setSelected(selectable.map(u=>u.id).slice(0,500))}><ActionIcons.CheckCircleIcon />Select all filtered</button>
      <button type="button" className="btn btn-quiet btn-xs" onClick={()=>setSelected(selectable.filter(u=>!selected.includes(u.id)).map(u=>u.id).slice(0,500))}><ActionIcons.RefreshIcon />Invert selection</button>
      <button type="button" className="btn btn-quiet btn-xs" onClick={()=>setSelected([])}><ActionIcons.XIcon />Clear selection</button>
    </div>
    <form action={bulkUsers} className="flex flex-wrap items-center gap-2 border-b border-rule p-4">
      <input type="hidden" name="view" value={trash?'trash':'users'} />{selected.map(id=><input key={id} type="hidden" name="ids" value={id} />)}
      {actionButtons()}
    </form>
    <div className="overflow-x-auto"><table className="tbl"><thead><tr>
      <th><input type="checkbox" aria-label="Select visible accounts" checked={allVisible} disabled={!visibleIds.length} onChange={()=>setSelected(ids=>allVisible?ids.filter(id=>!visibleIds.includes(id)):[...new Set([...ids,...visibleIds])].slice(0,500))} /></th><th>User</th><th>Role</th><th>Status</th><th>{trash?'Deleted / permanent deletion':'Two-factor / sessions'}</th><th>{trash?'Time remaining':'Last sign-in'}</th><th>Actions</th>
    </tr></thead><tbody>{visible.map(u=><tr key={u.id}>
      <td><input type="checkbox" checked={selected.includes(u.id)} disabled={!manageable(u)} aria-label={`Select ${u.email}`} onChange={()=>toggle(u.id)} /></td>
      <td>{trash?<span className="block font-semibold">{u.name??u.email}</span>:<Link href={`/users/${u.id}`} className="block font-semibold hover:text-ledger">{u.name??u.email}{u.id===viewerId?' (you)':''}</Link>}<span className="block text-xs text-muted">{u.email}</span></td>
      <td>{label[u.role]??u.role}</td><td><span className={trash?'text-muted':u.isActive?'text-ledger':'text-danger'}>{trash?'Trash':u.invitePending?'Invited':u.isActive?'Active':'Disabled'}</span></td>
      <td className="text-xs text-muted">{trash?<>{stamp(u.deletedAt)}<br />{stamp(u.purgeAt)}</>:<>{u.mfaEnabled?'2FA on':'2FA off'} · {u.activeSessions} sessions</>}</td>
      <td className="text-xs text-muted">{trash?u.purgeAt?`${Math.max(0,Math.ceil((new Date(u.purgeAt).getTime()-Date.now())/86400000))} days`:'—':stamp(u.lastLoginAt)}</td>
      <td>{manageable(u)?<form action={bulkUsers} className="flex flex-wrap gap-1"><input type="hidden" name="view" value={trash?'trash':'users'} /><input type="hidden" name="ids" value={u.id} />{actionButtons(true)}</form>:<span className="text-xs text-muted">{u.id===viewerId?'Current account':'Owner access required'}</span>}</td>
    </tr>)}</tbody></table>{!visible.length && <p className="p-8 text-center text-sm text-muted">{trash?'Trash is empty or no accounts match these filters.':'No accounts match these filters.'}</p>}</div>
    <div className="flex flex-wrap items-center justify-between gap-3 border-t border-rule p-4 text-sm">
      <label>Per page <select value={size} onChange={e=>{setSize(Number(e.target.value));setPage(1);}} className="ml-2 rounded border border-rule bg-surface p-1"><option>25</option><option>50</option><option>100</option></select></label>
      <div className="flex items-center gap-3"><button type="button" className="btn btn-quiet btn-xs" disabled={currentPage<=1} onClick={()=>setPage(currentPage-1)}><ActionIcons.ChevronLeftIcon />Previous</button><span className="text-muted">Page {currentPage} of {pages}</span><button type="button" className="btn btn-quiet btn-xs" disabled={currentPage>=pages} onClick={()=>setPage(currentPage+1)}><ActionIcons.ChevronRightIcon />Next</button></div>
    </div>
  </div>;
}