import { LogOut, UserCheck } from '../../../lib/icons'
import { Section, Row, DangerButton } from '../_ui'
import { jellyfinClient } from '../../../api/jellyfin'

export function ServerSection({ serverHost, userName }: { serverHost: string; userName?: string }) {
  return (
    <Section id="server" title="Server" description="The server you're connected to">
      <Row label="Server" hint="Hostname and port">
        <span className="inline-flex items-center gap-2 text-[12.5px] text-text-1 font-mono tabular-nums">
          {serverHost}
        </span>
      </Row>
      <Row label="Connection" hint="Server reachability">
        <span className="inline-flex items-center gap-1.5 text-[12px] text-success font-medium">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full rounded-full bg-success animate-ping opacity-60" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-success" />
          </span>
          Online
        </span>
      </Row>
      <Row label="Account" hint="Currently signed in">
        <span className="text-[12.5px] text-text-1 font-medium">{userName || 'Unknown'}</span>
      </Row>
      <Row label="Switch user" hint="Sign in as a different user on this server">
        <button
          onClick={() => {
            jellyfinClient.logout()
            window.location.reload()
          }}
          className="inline-flex items-center gap-1.5 h-9 px-3 rounded-md text-[12px] font-medium bg-elevated/60 text-text-2 border border-border hover:border-border-hover hover:text-text-1 transition-all duration-150 focus-ring"
        >
          <UserCheck size={13} stroke={2} />
          Switch
        </button>
      </Row>
      <Row label="Sign out" hint="Disconnect this device from the server" danger>
        <DangerButton
          icon={LogOut}
          label="Sign out"
          onConfirm={() => {
            jellyfinClient.logout()
            try { localStorage.removeItem('jf_last_server') } catch { /* noop */ }
            window.location.reload()
          }}
        />
      </Row>
    </Section>
  )
}
