import { useState, useEffect } from 'react'
import { adminApi, type SurveyResponseDetail, type SurveyResponseListResponse } from '@/api/admin'
import { PageHeader } from '@/components/admin'
import { ChevronDown, Download, User, Link2, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

const QUESTIONS: { id: string; num: string; text: string; type: 'mc' | 'mc-multi' | 'range' | 'text' | 'rank' }[] = [
  { id: 'prereqs', num: '1', text: 'Before you start troubleshooting, what info do you need?', type: 'mc-multi' },
  { id: 'verify_fix', num: '2', text: 'After you apply a fix, how do you verify it actually worked?', type: 'mc' },
  { id: 'steps_at_a_time', num: '3', text: 'How many steps do you prefer to see at once?', type: 'range' },
  { id: 'first_step', num: '4', text: 'A vague ticket comes in: "Internet is down." What\'s your FIRST move?', type: 'mc' },
  { id: 'junior_mistake', num: '5', text: 'Most common mistake you see junior engineers make?', type: 'mc' },
  { id: 'pivot', num: '6', text: 'How do you decide when to stop pursuing one theory and pivot?', type: 'mc' },
  { id: 'scenario_approach', num: '7', text: 'Walk through your first 3 diagnostic steps for this ticket.', type: 'text' },
  { id: 'scenario_deeper', num: '8', text: 'Server pings fine, you can RDP in. What do you check next?', type: 'text' },
  { id: 'doc_pct', num: '9', text: 'What percentage of troubleshooting steps do you actually document?', type: 'range' },
  { id: 'go_to_commands', num: '10', text: 'Top 3 go-to PowerShell commands or one-liners?', type: 'text' },
  { id: 'secret_weapon', num: '11', text: 'Secret weapon command/tool/technique?', type: 'text' },
  { id: 'gotcha', num: '12', text: 'Issue where the obvious diagnosis was WRONG?', type: 'text' },
  { id: 'hard_rules', num: '13', text: 'Which "rules" do you follow?', type: 'mc-multi' },
  { id: 'prioritization', num: '14', text: 'Rank factors by diagnostic priority influence.', type: 'rank' },
  { id: 'detail_level', num: '15', text: 'How specific should AI diagnostic suggestions be?', type: 'mc' },
  { id: 'ai_personality', num: '16', text: 'What makes an AI feel like a useful colleague?', type: 'mc' },
]

function AnswerDisplay({ value, type }: { value: string | string[] | undefined; type: string }) {
  if (!value || (Array.isArray(value) && value.length === 0)) {
    return <p className="text-sm italic text-muted-foreground/60">No answer</p>
  }

  if (type === 'mc-multi' && Array.isArray(value)) {
    return (
      <div className="flex flex-wrap gap-1.5">
        {value.map((v, i) => (
          <span
            key={i}
            className="inline-block rounded-full bg-primary/10 px-2.5 py-0.5 font-label text-[0.625rem] uppercase tracking-wider text-primary"
          >
            {v}
          </span>
        ))}
      </div>
    )
  }

  if (type === 'rank' && Array.isArray(value)) {
    return (
      <ol className="space-y-1">
        {value.map((v, i) => (
          <li key={i} className="flex items-start gap-2 text-sm text-foreground/90">
            <span className="font-label text-xs font-bold text-primary">{i + 1}.</span>
            {v}
          </li>
        ))}
      </ol>
    )
  }

  if (type === 'text') {
    return (
      <div className="border-l-2 border-primary/30 pl-3">
        <p className="text-sm text-foreground/90 whitespace-pre-wrap">{String(value)}</p>
      </div>
    )
  }

  return <p className="text-sm text-foreground/90">{String(value)}</p>
}

function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
  return (
    <tr>
      <td colSpan={6} className="p-0">
        <div
          className="px-6 py-5"
          style={{
            background: 'rgba(0, 0, 0, 0.15)',
            borderTop: '1px solid rgba(6, 182, 212, 0.1)',
          }}
        >
          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
            {QUESTIONS.map((q) => (
              <div
                key={q.id}
                className="rounded-[10px] p-4"
                style={{
                  background: 'rgba(24, 26, 31, 0.6)',
                  border: '1px solid var(--glass-border)',
                }}
              >
                <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-primary mb-1">
                  Q{q.num}
                </p>
                <p className="text-xs text-muted-foreground mb-2">{q.text}</p>
                <AnswerDisplay value={response.responses[q.id]} type={q.type} />
              </div>
            ))}
          </div>
        </div>
      </td>
    </tr>
  )
}

function ResponseRow({
  response,
  index,
  isExpanded,
  onToggle,
}: {
  response: SurveyResponseDetail
  index: number
  isExpanded: boolean
  onToggle: () => void
}) {
  const answeredCount = QUESTIONS.filter((q) => {
    const val = response.responses[q.id]
    return val !== undefined && val !== null && val !== '' && !(Array.isArray(val) && val.length === 0)
  }).length

  return (
    <>
      <tr
        className="border-b border-border/50 hover:bg-[rgba(255,255,255,0.02)] transition-colors cursor-pointer"
        onClick={onToggle}
      >
        <td className="px-4 py-3 w-8">
          <ChevronDown
            className={cn(
              'h-4 w-4 text-muted-foreground transition-transform',
              isExpanded && 'rotate-180'
            )}
          />
        </td>
        <td className="px-4 py-3 font-label text-xs text-muted-foreground">{index + 1}</td>
        <td className="px-4 py-3 text-sm text-foreground">
          {response.respondent_name || <span className="text-muted-foreground italic">Anonymous</span>}
        </td>
        <td className="px-4 py-3">
          {response.source === 'invite' ? (
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wider bg-primary/10 text-primary">
              <User className="h-3 w-3" />
              Invite
              {response.invite_name && (
                <span className="text-primary/70">({response.invite_name})</span>
              )}
            </span>
          ) : (
            <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wider bg-[rgba(255,255,255,0.06)] text-muted-foreground">
              <Link2 className="h-3 w-3" />
              Direct
            </span>
          )}
        </td>
        <td className="px-4 py-3 font-label text-xs text-muted-foreground">
          {new Date(response.created_at).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric',
          })}
        </td>
        <td className="px-4 py-3 text-sm text-muted-foreground">
          {answeredCount} / {QUESTIONS.length}
        </td>
      </tr>
      {isExpanded && <ExpandedDetail response={response} />}
    </>
  )
}

export default function SurveyResponsesPage() {
  const [data, setData] = useState<SurveyResponseListResponse | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const [exporting, setExporting] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await adminApi.listSurveyResponses()
        setData(result)
      } catch {
        setError('Failed to load survey responses')
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])

  const handleExport = async () => {
    setExporting(true)
    try {
      const blob = await adminApi.exportSurveyResponsesCsv()
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'survey-responses.csv'
      a.click()
      URL.revokeObjectURL(url)
    } catch {
      setError('Export failed')
    } finally {
      setExporting(false)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="h-6 w-6 animate-spin text-primary" />
      </div>
    )
  }

  if (error && !data) {
    return (
      <div className="px-6 py-8">
        <div className="glass-card-static p-6 text-center text-rose-400">{error}</div>
      </div>
    )
  }

  const responses = data?.responses ?? []

  return (
    <div className="space-y-6 px-6 py-8">
      <PageHeader
        title="Survey Responses"
        description={`${data?.total ?? 0} total responses collected`}
        action={
          <button
            onClick={handleExport}
            disabled={exporting || responses.length === 0}
            className="inline-flex items-center gap-2 rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-[rgba(255,255,255,0.12)] disabled:opacity-50"
          >
            {exporting ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <Download className="h-4 w-4" />
            )}
            Export CSV
          </button>
        }
      />

      {error && (
        <div className="rounded-[10px] border border-rose-500/20 bg-rose-500/10 px-4 py-2 text-sm text-rose-400">
          {error}
        </div>
      )}

      {/* Stat cards */}
      <div className="flex gap-4">
        <div className="glass-card-static px-5 py-4 flex-1">
          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
            Total Responses
          </p>
          <p className="text-2xl font-heading font-bold text-gradient-brand">
            {data?.total ?? 0}
          </p>
        </div>
        <div className="glass-card-static px-5 py-4 flex-1">
          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
            This Week
          </p>
          <p className="text-2xl font-heading font-bold text-foreground">
            {data?.this_week ?? 0}
          </p>
        </div>
      </div>

      {/* Table */}
      <div className="glass-card-static overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-border/50">
              <th className="px-4 py-3 w-8" />
              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                #
              </th>
              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                Respondent
              </th>
              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                Source
              </th>
              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                Date
              </th>
              <th className="px-4 py-3 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
                Answered
              </th>
            </tr>
          </thead>
          <tbody>
            {responses.length === 0 ? (
              <tr>
                <td colSpan={6} className="px-4 py-12 text-center text-sm text-muted-foreground">
                  No survey responses yet.
                </td>
              </tr>
            ) : (
              responses.map((response, index) => (
                <ResponseRow
                  key={response.id}
                  response={response}
                  index={index}
                  isExpanded={expandedId === response.id}
                  onToggle={() =>
                    setExpandedId(expandedId === response.id ? null : response.id)
                  }
                />
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}