import { useState } from 'react'
import {
  CheckCircle2, CircleCheckBig, CircleHelp, RotateCcw, X,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { RichText } from '@/lib/blocks/richText'
import type {
  AccordionData, TabsData, TimelineData, QuizData,
} from '@/lib/blocks/types'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Button } from '@/components/ui/button'
import { BlockRenderProps, EmptyHint, SectionTitle } from './shared'

// ---------- Acordeão ----------

export function AccordionBlock({ data }: BlockRenderProps<AccordionData>) {
  return (
    <div>
      <SectionTitle title={data.title} />
      {data.items.length === 0 ? (
        <EmptyHint label="Adicione perguntas no painel de propriedades" />
      ) : (
        <Accordion type="single" collapsible className="space-y-2.5">
          {data.items.map((item, i) => (
            <AccordionItem
              key={i}
              value={`item-${i}`}
              className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm data-[state=open]:border-[var(--cps)]"
            >
              <AccordionTrigger className="px-5 py-4 text-left text-[15px] font-semibold text-slate-900 hover:no-underline hover:bg-slate-50/60">
                <span className="flex items-center gap-3">
                  <span
                    className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold"
                    style={{ backgroundColor: 'var(--cpt)', color: 'var(--cpd)' }}
                  >
                    {i + 1}
                  </span>
                  {item.title || `Pergunta ${i + 1}`}
                </span>
              </AccordionTrigger>
              <AccordionContent className="border-t border-slate-100 px-5 pb-5 pt-4">
                <RichText text={item.content} className="text-sm leading-relaxed text-slate-600" />
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      )}
    </div>
  )
}

// ---------- Abas ----------

export function TabsBlock({ data }: BlockRenderProps<TabsData>) {
  const items = data.items.filter((i) => i.title?.trim() || i.content?.trim())
  if (items.length === 0) {
    return (
      <div>
        <SectionTitle title={data.title} />
        <EmptyHint label="Adicione abas no painel de propriedades" />
      </div>
    )
  }
  return (
    <div>
      <SectionTitle title={data.title} />
      <Tabs defaultValue={`tab-0`}>
        <TabsList className="h-auto flex-wrap justify-start gap-1 rounded-xl bg-slate-100 p-1.5">
          {items.map((item, i) => (
            <TabsTrigger
              key={i}
              value={`tab-${i}`}
              className="rounded-lg px-4 py-2 text-sm font-medium text-slate-500 data-[state=active]:bg-white data-[state=active]:text-[var(--cpd)] data-[state=active]:shadow-sm"
            >
              {item.title || `Aba ${i + 1}`}
            </TabsTrigger>
          ))}
        </TabsList>
        {items.map((item, i) => (
          <TabsContent key={i} value={`tab-${i}`} className="mt-4 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <RichText text={item.content} className="text-[15px] leading-relaxed text-slate-600" />
          </TabsContent>
        ))}
      </Tabs>
    </div>
  )
}

// ---------- Linha do tempo ----------

export function TimelineBlock({ data }: BlockRenderProps<TimelineData>) {
  return (
    <div>
      <SectionTitle title={data.title} />
      {data.items.length === 0 ? (
        <EmptyHint label="Adicione marcos no painel de propriedades" />
      ) : (
        <div className="relative ml-3">
          <div className="absolute top-2 bottom-2 left-[5px] w-0.5 rounded-full bg-slate-200" aria-hidden />
          <div className="space-y-8">
            {data.items.map((item, i) => (
              <div key={i} className="relative pl-9">
                <span
                  className="absolute top-1.5 left-0 h-3 w-3 rounded-full ring-4"
                  style={{ backgroundColor: 'var(--cp)', '--tw-ring-color': 'var(--cpt)' } as React.CSSProperties}
                  aria-hidden
                />
                {item.label?.trim() && (
                  <p className="text-xs font-bold tracking-widest uppercase" style={{ color: 'var(--cpd)' }}>
                    {item.label}
                  </p>
                )}
                <h4 className="mt-1 text-base font-semibold text-slate-900">{item.title || `Marco ${i + 1}`}</h4>
                <RichText text={item.description} className="mt-1 text-sm leading-relaxed text-slate-600" />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

// ---------- Quiz ----------

export function QuizBlock({ data }: BlockRenderProps<QuizData>) {
  const [selected, setSelected] = useState<number | null>(null)
  const [checked, setChecked] = useState(false)

  const isCorrect = selected !== null && data.options[selected]?.correct

  const reset = () => {
    setSelected(null)
    setChecked(false)
  }

  return (
    <div className="rounded-2xl border-2 border-slate-200 bg-white p-5 shadow-sm md:p-6">
      <div className="mb-4 flex items-center gap-3">
        <span
          className="flex h-9 w-9 items-center justify-center rounded-full text-white"
          style={{ backgroundColor: 'var(--cp)' }}
          aria-hidden
        >
          <CircleHelp className="h-5 w-5" />
        </span>
        <div>
          <p className="text-xs font-bold tracking-widest text-slate-400 uppercase">Quiz</p>
          {data.title?.trim() && <h4 className="text-sm font-semibold text-slate-900">{data.title}</h4>}
        </div>
      </div>

      <p className="mb-4 text-base font-semibold text-slate-900 md:text-lg">{data.question || 'Pergunta'}</p>

      <div className="space-y-2.5">
        {data.options.map((opt, i) => {
          const isSelected = selected === i
          const showCorrect = checked && opt.correct
          const showWrong = checked && isSelected && !opt.correct
          return (
            <button
              key={i}
              type="button"
              disabled={checked}
              onClick={() => setSelected(i)}
              className={cn(
                'flex w-full items-center justify-between gap-3 rounded-xl border-2 px-4 py-3 text-left text-sm font-medium transition-colors',
                showCorrect
                  ? 'border-emerald-500 bg-emerald-50 text-emerald-900'
                  : showWrong
                    ? 'border-red-400 bg-red-50 text-red-700'
                    : isSelected
                      ? 'border-[var(--cp)] bg-[var(--cpt)] text-slate-900'
                      : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
              )}
              aria-pressed={isSelected}
            >
              <span>{opt.text || `Alternativa ${i + 1}`}</span>
              {showCorrect && <CircleCheckBig className="h-5 w-5 shrink-0 text-emerald-600" />}
              {showWrong && <X className="h-5 w-5 shrink-0 text-red-500" />}
            </button>
          )
        })}
      </div>

      {!checked ? (
        <Button
          type="button"
          disabled={selected === null}
          onClick={() => setChecked(true)}
          className="mt-4 w-full text-white sm:w-auto"
          style={{ backgroundColor: 'var(--cp)' }}
        >
          <CheckCircle2 className="h-4 w-4" />
          Verificar resposta
        </Button>
      ) : (
        <div className="mt-4 space-y-3">
          <div
            className={cn(
              'flex items-center gap-2.5 rounded-xl border p-3.5 text-sm font-semibold',
              isCorrect
                ? 'border-emerald-200 bg-emerald-50 text-emerald-800'
                : 'border-red-200 bg-red-50 text-red-700'
            )}
          >
            {isCorrect ? (
              <CircleCheckBig className="h-5 w-5 shrink-0" />
            ) : (
              <X className="h-5 w-5 shrink-0" />
            )}
            {isCorrect ? 'Resposta correta. Muito bem!' : 'Resposta incorreta. Tente novamente!'}
          </div>
          {data.explanation?.trim() && (
            <div
              className="rounded-xl border-l-4 bg-slate-50 p-3.5 text-sm leading-relaxed text-slate-600"
              style={{ borderColor: 'var(--cp)' }}
            >
              <span className="font-semibold text-slate-800">Por quê? </span>
              {data.explanation}
            </div>
          )}
          <Button type="button" variant="outline" onClick={reset} className="gap-2">
            <RotateCcw className="h-4 w-4" />
            Tentar novamente
          </Button>
        </div>
      )}
    </div>
  )
}