import { useEffect, useState } from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { AlertTriangle, LogOut, Monitor, Smartphone } from 'lucide-react'
import { SettingsPage, SettingsRow, ComingWithBackend } from '#/components/settings/settings-page'
import { authService, isUsingMockData } from '#/lib/services/service-factory'
import type { Session } from '#/types'
import { Button } from '#/components/ui/primitives'
import { ConfirmDialog } from '#/components/ui/dialog'
import { useAuth } from '#/context/auth-context'

export const Route = createFileRoute('/_app/settings/security')({ component: SecuritySettings })

function SecuritySettings() {
  const { logout } = useAuth()
  const [sessions, setSessions] = useState<Session[]>([])
  const [confirmLogoutAll, setConfirmLogoutAll] = useState(false)

  useEffect(() => {
    authService.getActiveSessions().then(setSessions)
  }, [])

  return (
    <SettingsPage title="Security" description="Review devices signed in to your account and manage authentication.">
      {isUsingMockData && (
        <div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2.5 text-sm text-amber-700 dark:text-amber-400">
          <AlertTriangle className="mt-0.5 size-4 shrink-0" />
          <span>This is a frontend-only preview. Session data resets when you refresh; it is not a real security boundary.</span>
        </div>
      )}

      <div>
        <p className="mb-3 text-sm font-medium text-primary">Active sessions</p>
        <ul className="space-y-2">
          {sessions.map((s) => (
            <li key={s.id} className="flex items-center gap-3 rounded-lg border border-subtle p-3">
              {s.device?.toLowerCase().includes('mobile') ? (
                <Smartphone className="size-5 text-tertiary" />
              ) : (
                <Monitor className="size-5 text-tertiary" />
              )}
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium text-primary">{s.device ?? 'Unknown device'}</p>
                <p className="text-xs text-tertiary">
                  Signed in {new Date(s.createdAt).toLocaleString()} {s.current && '· This device'}
                </p>
              </div>
            </li>
          ))}
        </ul>
        <Button variant="secondary" size="sm" className="mt-3" onClick={() => setConfirmLogoutAll(true)}>
          <LogOut className="size-4" /> Log out of all sessions
        </Button>
      </div>

      <SettingsRow label="Password" description="Change your account password">
        <ComingWithBackend />
      </SettingsRow>
      <SettingsRow label="Two-factor authentication" description="Add an extra layer of security">
        <ComingWithBackend />
      </SettingsRow>
      <SettingsRow label="Login history" description="See recent sign-in activity">
        <ComingWithBackend />
      </SettingsRow>
      <SettingsRow label="Suspicious login notifications" description="Get alerted about unusual sign-in activity">
        <ComingWithBackend />
      </SettingsRow>

      <ConfirmDialog
        open={confirmLogoutAll}
        onClose={() => setConfirmLogoutAll(false)}
        onConfirm={() => logout()}
        title="Log out of all sessions?"
        description="You'll be signed out on this and all other devices."
        confirmLabel="Log out everywhere"
      />
    </SettingsPage>
  )
}