import { useState, useEffect } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { Globe, Users, ShieldAlert, FileX, Clock } from 'lucide-react'
import { isAxiosError } from 'axios'
import { sessionsApi } from '@/api/sessions'
import { Spinner } from '@/components/common/Spinner'
import { BrandLogo } from '@/components/common/BrandLogo'
import { PageMeta } from '@/components/common/PageMeta'
import { SessionTimeline } from '@/components/session/SessionTimeline'
import { SharedSessionTreePreview } from '@/components/session/SharedSessionTreePreview'
import type { SharedSessionView } from '@/types'

function formatDate(dateString: string) {
  return new Date(dateString).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  })
}

function formatDuration(startedAt: string, completedAt: string): string {
  const start = new Date(startedAt).getTime()
  const end = new Date(completedAt).getTime()
  const totalSeconds = Math.floor((end - start) / 1000)
  if (totalSeconds < 0) return '0s'
  if (totalSeconds < 60) return `${totalSeconds}s`
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60
  if (hours > 0) {
    return seconds > 0 ? `${hours}h ${minutes}m ${seconds}s` : `${hours}h ${minutes}m`
  }
  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
}

type ErrorState = {
  type: 'access_denied' | 'not_found' | 'expired' | 'generic'
  message: string
}

function ErrorCard({ error }: { error: ErrorState }) {
  const iconMap = {
    access_denied: ShieldAlert,
    not_found: FileX,
    expired: Clock,
    generic: FileX,
  }
  const titleMap = {
    access_denied: 'Access Denied',
    not_found: 'Not Found',
    expired: 'Link Expired',
    generic: 'Error',
  }

  const Icon = iconMap[error.type]

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4">
      <div className="bg-card border border-border w-full max-w-md rounded-xl p-8 text-center">
        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
          <Icon className="h-8 w-8 text-muted-foreground" />
        </div>
        <h1 className="mb-2 text-xl font-heading font-semibold text-foreground">{titleMap[error.type]}</h1>
        <p className="mb-6 text-sm text-muted-foreground">{error.message}</p>
        <Link
          to="/"
          className="inline-block rounded-lg bg-gradient-brand px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
        >
          Go to ResolutionFlow
        </Link>
      </div>
    </div>
  )
}

export function SharedSessionPage() {
  const { shareToken } = useParams<{ shareToken: string }>()
  const navigate = useNavigate()
  const [data, setData] = useState<SharedSessionView | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<ErrorState | null>(null)

  useEffect(() => {
    if (!shareToken) return

    let cancelled = false

    async function fetchSharedSession() {
      try {
        const result = await sessionsApi.getSharedSession(shareToken!)
        if (!cancelled) {
          setData(result)
          setLoading(false)
        }
      } catch (err) {
        if (cancelled) return

        if (isAxiosError(err)) {
          const status = err.response?.status
          if (status === 401) {
            navigate('/login', {
              state: { from: { pathname: `/share/${shareToken}` } },
              replace: true,
            })
            return
          }
          if (status === 403) {
            setError({
              type: 'access_denied',
              message:
                'This session is private to the account. You need to be a member of the account to view it.',
            })
          } else if (status === 404) {
            setError({
              type: 'not_found',
              message: 'This share link was not found or has been revoked.',
            })
          } else if (status === 410) {
            setError({
              type: 'expired',
              message: 'This share link has expired.',
            })
          } else {
            setError({
              type: 'generic',
              message: 'Failed to load shared session. Please try again.',
            })
          }
        } else {
          setError({
            type: 'generic',
            message: 'Failed to load shared session. Please try again.',
          })
        }
        setLoading(false)
      }
    }

    fetchSharedSession()
    return () => {
      cancelled = true
    }
  }, [shareToken, navigate])

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="flex flex-col items-center gap-4">
          <Spinner />
          <p className="text-sm text-muted-foreground">Loading shared session...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return <ErrorCard error={error} />
  }

  if (!data) {
    return null
  }

  return (
    <div className="min-h-screen bg-background">
      <PageMeta
        title={data ? `Shared Session - ${data.tree_name}` : 'Shared Session'}
        description="View a shared troubleshooting session on ResolutionFlow"
      />
      {/* Minimal header */}
      <header className="border-b border-border px-6 py-4">
        <div className="mx-auto flex max-w-7xl items-center justify-between">
          <Link to="/" className="flex items-center gap-2">
            <BrandLogo size="sm" />
            <span className="text-lg font-heading font-semibold text-foreground">ResolutionFlow</span>
          </Link>
          <Link
            to="/login"
            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            Sign In
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="container mx-auto max-w-7xl px-4 py-8">
        {/* Metadata section */}
        <div className="mb-8">
          {data.share_name && (
            <h1 className="mb-2 text-2xl font-heading font-bold text-foreground">{data.share_name}</h1>
          )}
          <p className="text-lg text-muted-foreground">
            <span className="text-muted-foreground">Tree:</span> {data.tree_name}
          </p>

          {(data.ticket_number || data.client_name) && (
            <p className="mt-1 text-sm text-muted-foreground">
              {data.ticket_number && (
                <span>Ticket: #{data.ticket_number}</span>
              )}
              {data.ticket_number && data.client_name && (
                <span className="mx-1.5">&middot;</span>
              )}
              {data.client_name && (
                <span>Client: {data.client_name}</span>
              )}
            </p>
          )}

          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
            <span>Started: {formatDate(data.started_at)}</span>
            {data.completed_at && (
              <>
                <span>Completed: {formatDate(data.completed_at)}</span>
                <span>Duration: {formatDuration(data.started_at, data.completed_at)}</span>
              </>
            )}
            <span className="inline-flex items-center gap-1">
              {data.visibility === 'public' ? (
                <>
                  <Globe className="h-3.5 w-3.5" />
                  Public
                </>
              ) : (
                <>
                  <Users className="h-3.5 w-3.5" />
                  Account
                </>
              )}
            </span>
          </div>
        </div>

        {/* Two-column layout */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
          {/* Decision Timeline (2 cols) */}
          <div className="lg:col-span-2">
            <SessionTimeline
              decisions={data.decisions}
              treeType={data.tree_structure?.tree_type as string | undefined}
              startedAt={data.started_at}
              completedAt={data.completed_at}
              showCopyButtons={false}
            />
          </div>

          {/* Tree Preview (1 col) */}
          <div className="lg:col-span-1">
            <SharedSessionTreePreview
              treeStructure={data.tree_structure}
              pathTaken={data.path_taken}
            />
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="py-8 text-center text-sm text-muted-foreground">
        Powered by{' '}
        <Link to="/" className="underline hover:text-foreground">
          ResolutionFlow
        </Link>
      </footer>
    </div>
  )
}

export default SharedSessionPage