import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { useTranslation, Trans } from 'react-i18next';
import {
  listBrowserSessionProfiles, deleteBrowserSessionProfile, testBrowserSessionProfile,
  type BrowserSessionProfile,
} from '../../api';
import { AddBrowserSessionDialog } from './AddBrowserSessionDialog';

function StatusPill({ status }: { status: BrowserSessionProfile['status'] }) {
  const { t } = useTranslation('userfolder');
  const map: Record<BrowserSessionProfile['status'], string> = {
    pending: 'bg-slate-200 text-slate-700',
    active: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
    expired: 'bg-amber-100 dark:bg-amber-500/15 text-amber-800 dark:text-amber-300',
    revoked: 'bg-slate-200 text-slate-500',
    error: 'bg-rose-100 dark:bg-rose-500/15 text-rose-700 dark:text-rose-300',
  };
  return <span className={`inline-flex items-center rounded px-2 py-0.5 text-2xs font-medium ${map[status]}`}>{t(`browserSessions.status.${status}`)}</span>;
}

export function BrowserSessionsPanel() {
  const { t } = useTranslation('userfolder');
  const qc = useQueryClient();
  const { data: profiles = [], isLoading } = useQuery({
    queryKey: ['browser-session-profiles'],
    queryFn: listBrowserSessionProfiles,
  });
  const del = useMutation({
    mutationFn: (id: number) => deleteBrowserSessionProfile(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['browser-session-profiles'] }),
  });
  const test = useMutation({
    mutationFn: (id: number) => testBrowserSessionProfile(id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['browser-session-profiles'] }),
  });
  const [adding, setAdding] = useState(false);
  const [reLoginProfileId, setReLoginProfileId] = useState<number | null>(null);

  return (
    <div className="h-full overflow-y-auto p-6">
      <div className="max-w-2xl space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold text-slate-800">{t('browserSessions.title')}</h2>
          <button onClick={() => { setReLoginProfileId(null); setAdding(true); }}
            className="rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-fg hover:bg-accent-deep">
            {t('browserSessions.add')}
          </button>
        </div>
        <p className="text-xs text-slate-500">
          <Trans t={t} i18nKey="browserSessions.intro" components={{ code: <code className="font-mono text-2xs bg-slate-100 px-1 py-0.5 rounded" /> }} />
        </p>

        {isLoading && <div className="text-xs text-slate-500">{t('browserSessions.loading')}</div>}

        <div className="rounded-md border border-hairline divide-y divide-hairline">
          {profiles.length === 0 && !isLoading && (
            <div className="px-3 py-6 text-center text-xs text-slate-400">
              <div>{t('browserSessions.emptyTitle')}</div>
              <div className="mt-1 text-slate-400">{t('browserSessions.emptyHint')}</div>
            </div>
          )}
          {profiles.map(p => (
            <div key={p.id} className="flex items-center justify-between px-3 py-2">
              <div className="min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-[13px] font-medium text-slate-800 truncate">{p.label}</span>
                  <StatusPill status={p.status} />
                  <span className="text-[10px] font-mono text-slate-400">id={p.id}</span>
                </div>
                <div className="text-2xs text-slate-500 truncate">{p.startUrl}</div>
                {p.lastError && <div className="text-2xs text-rose-600 truncate">{p.lastError}</div>}
                <div className="text-2xs text-slate-400">
                  {p.lastSavedAt ? t('browserSessions.saved', { time: new Date(p.lastSavedAt).toLocaleString() }) : t('browserSessions.notSaved')}
                  {p.lastUsedAt && t('browserSessions.lastUsed', { time: new Date(p.lastUsedAt).toLocaleString() })}
                </div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <button onClick={() => test.mutate(p.id)} disabled={test.isPending}
                  className="text-xs text-slate-700 hover:text-slate-900 px-2 py-1 rounded hover:bg-surface disabled:opacity-50">{t('browserSessions.test')}</button>
                <button onClick={() => { setReLoginProfileId(p.id); setAdding(true); }}
                  className="text-xs text-slate-700 hover:text-slate-900 px-2 py-1 rounded hover:bg-surface">{t('browserSessions.reLogin')}</button>
                <button onClick={() => { if (confirm(t('browserSessions.confirmDelete', { label: p.label }))) del.mutate(p.id); }}
                  className="text-xs text-rose-600 hover:text-rose-800 dark:hover:text-rose-300 px-2 py-1 rounded hover:bg-rose-50 dark:hover:bg-rose-500/15">{t('browserSessions.delete')}</button>
              </div>
            </div>
          ))}
        </div>

        {adding && (
          <AddBrowserSessionDialog
            existingProfile={reLoginProfileId ? profiles.find(p => p.id === reLoginProfileId) ?? null : null}
            onClose={() => { setAdding(false); setReLoginProfileId(null); }}
          />
        )}
      </div>
    </div>
  );
}
