import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { PageMeta } from '@/components/common/PageMeta'
import { useAuthStore } from '@/store/authStore'
import { l1Api } from '@/api/l1'
import { toast } from '@/lib/toast'
import { EmptyStateCard } from '@/components/l1/EmptyStateCard'
import { ResumeInProgress } from '@/components/l1/ResumeInProgress'
import type { QueueRow } from '@/types/l1'

export default function L1Dashboard() {
  const user = useAuthStore((s) => s.user)
  const navigate = useNavigate()
  const [problem, setProblem] = useState('')
  const [customerName, setCustomerName] = useState('')
  const [customerContact, setCustomerContact] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [queue, setQueue] = useState<QueueRow[]>([])
  const [isEmpty, setIsEmpty] = useState(false)

  useEffect(() => {
    l1Api.queue('open').then(setQueue).catch(() => setQueue([]))
    // Phase 1: emptiness detection is just "is the queue empty AND no resumable sessions" —
    // we conservatively show the empty-state card on accounts with literally no L1 activity yet.
    // (A stricter KB-empty detection arrives in Phase 2 when the kb_documents table exists.)
  }, [])

  useEffect(() => {
    // Show empty-state ONLY for first-run state — no queue items and no active sessions
    if (queue.length === 0) {
      l1Api
        .listActiveSessions()
        .then((active) => setIsEmpty(active.length === 0))
        .catch(() => setIsEmpty(false))
    } else {
      setIsEmpty(false)
    }
  }, [queue])

  const handleStart = async () => {
    if (!problem.trim()) return
    setSubmitting(true)
    try {
      const response = await l1Api.intake({
        problem_statement: problem.trim(),
        customer_name: customerName.trim() || undefined,
        customer_contact: customerContact.trim() || undefined,
      })
      navigate(`/l1/walk/${response.session_id}`)
    } catch (err) {
      const detail = (err as { response?: { data?: { detail?: string } } }).response?.data?.detail
      const msg =
        typeof detail === 'string' ? detail : 'Failed to start walk. Try again.'
      toast.error(msg)
    } finally {
      setSubmitting(false)
    }
  }

  const now = new Date()
  const greeting =
    now.getHours() < 12 ? 'morning' : now.getHours() < 18 ? 'afternoon' : 'evening'
  const firstName = user?.name?.split(' ')[0] || 'there'

  return (
    <div className="overflow-y-auto h-full">
      <PageMeta title="L1 Workspace" />
      <div className="max-w-4xl mx-auto px-6 pt-12 pb-12 space-y-8">
        {/* Greeting */}
        <div>
          <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
            {now.toLocaleDateString('en-US', {
              weekday: 'long',
              month: 'long',
              day: 'numeric',
            })}
          </p>
          <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-heading leading-tight">
            Good {greeting}, {firstName}.
          </h1>
        </div>

        {/* Empty state (first-run) */}
        {isEmpty && <EmptyStateCard />}

        {/* Describe the problem */}
        <section>
          <div className="flex items-center gap-3 mb-3">
            <span className="w-1 h-4 bg-accent rounded-sm" />
            <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
              Describe the problem
            </span>
          </div>
          <div className="rounded-lg border border-default bg-card p-4 space-y-3">
            <textarea
              value={problem}
              onChange={(e) => setProblem(e.target.value)}
              placeholder="What's the user calling about?"
              autoFocus
              rows={3}
              className="w-full bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
            />
            <div className="grid grid-cols-2 gap-3">
              <input
                value={customerName}
                onChange={(e) => setCustomerName(e.target.value)}
                placeholder="Customer name (optional)"
                className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
              />
              <input
                value={customerContact}
                onChange={(e) => setCustomerContact(e.target.value)}
                placeholder="Email or phone (optional)"
                className="bg-page border border-default rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40"
              />
            </div>
            <div className="flex justify-end">
              <button
                type="button"
                onClick={handleStart}
                disabled={!problem.trim() || submitting}
                className="rounded-md bg-accent text-white px-5 py-2 text-sm font-medium hover:bg-accent/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {submitting ? 'Starting…' : 'Start walk →'}
              </button>
            </div>
          </div>
        </section>

        {/* Open tickets */}
        {queue.length > 0 && (
          <section>
            <div className="flex items-center gap-3 mb-3">
              <span className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
                Open tickets · {queue.length}
              </span>
              <div className="flex-1 h-px bg-border" />
            </div>
            <div className="rounded-lg border border-default bg-card overflow-hidden">
              {queue.map((row) => (
                /* Phase 1: display-only rows. Phase 2 makes them clickable to claim. */
                <div
                  key={row.ticket_id}
                  className="px-4 py-3 border-b border-default last:border-b-0"
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="font-mono text-xs text-muted-foreground mr-2">
                        #{row.ticket_id.slice(0, 8)}
                      </span>
                      <span className="text-sm">{row.problem_statement}</span>
                    </div>
                    <span className="text-xs px-2 py-0.5 rounded bg-elevated text-muted-foreground">
                      {row.ticket_kind === 'psa' ? 'PSA' : 'Internal'}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Resume in progress */}
        <ResumeInProgress />
      </div>
    </div>
  )
}