import { useEffect, useMemo, useState } from 'react'
import { Briefcase, Calendar, Building2, AlertCircle } from 'lucide-react'
import type { ExperienceItem } from '../utils/parseResume'
import { parseResumeDocx } from '../utils/parseResume'

// Fallback data if parsing fails
const fallbackExperience: ExperienceItem[] = [
  {
    date: '2016 – Present',
    role: 'Licensed Professional Counselor',
    org: 'Clinical Practice',
    details: [
      '10 years of clinical experience in integrated treatment for co-occurring mental health and substance use disorders',
      'Specializes in trauma-informed care, narrative therapy, and nature-based interventions',
      'Certified Nature-Informed Therapist utilizing nature as co-therapist in clinical practice',
    ],
  },
]

export default function Experience() {
  const [items, setItems] = useState<ExperienceItem[] | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      try {
        const parsed = await parseResumeDocx('/docs/Peter\'s Resume.docx')
        if (!cancelled) {
          setItems(parsed.length > 0 ? parsed : fallbackExperience)
          setLoading(false)
        }
      } catch (e) {
        if (!cancelled) {
          setError(String(e))
          setItems(fallbackExperience)
          setLoading(false)
        }
      }
    })()
    return () => {
      cancelled = true
    }
  }, [])

  const sorted = useMemo(() => {
    if (!items?.length) return []
    
    const pickEnd = (d: string) => {
      const m = d.match(/(19\d{2}|20\d{2})\s*[-–]\s*(19\d{2}|20\d{2})/)
      if (m) return Number(m[2])
      const y = d.match(/(19\d{2}|20\d{2})/)
      return y ? Number(y[0]) : 0
    }
    
    return [...items].sort((a, b) => pickEnd(b.date) - pickEnd(a.date))
  }, [items])

  return (
    <section id="experience" className="mx-auto max-w-6xl px-4 py-12 md:py-16">
      <div className="mb-8">
        <h2 className="font-serif text-2xl font-semibold text-slate-900 md:text-3xl">
          Counseling Experience
        </h2>
        <p className="mt-2 max-w-3xl text-slate-700">
          Professional timeline showcasing over a decade of clinical experience in mental health 
          and substance use disorder treatment.
        </p>
      </div>

      {error && (
        <div className="mb-6 flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50/60 p-4 text-sm text-amber-900">
          <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
          <div>
            <p className="font-medium">Resume parsing issue</p>
            <p className="mt-1 text-amber-800/80">
              Showing curated highlights instead. For full details, download the resume.
            </p>
          </div>
        </div>
      )}

      <div className="mt-8 space-y-6" aria-live="polite">
        {loading ? (
          <div className="space-y-4">
            {[1, 2, 3].map((i) => (
              <div
                key={i}
                className="rounded-3xl border border-slate-200 bg-white/70 p-6 animate-pulse"
              >
                <div className="h-6 w-1/3 rounded bg-slate-200" />
                <div className="mt-2 h-4 w-1/4 rounded bg-slate-200" />
                <div className="mt-4 space-y-2">
                  <div className="h-3 w-full rounded bg-slate-200" />
                  <div className="h-3 w-5/6 rounded bg-slate-200" />
                </div>
              </div>
            ))}
          </div>
        ) : sorted.length ? (
          sorted.map((item, idx) => (
            <article
              key={`${item.date}-${idx}`}
              className="group relative rounded-3xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-all hover:shadow-md hover:border-emerald-200/60"
            >
              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div className="flex-1">
                  <div className="flex items-start gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100/60 text-emerald-700">
                      <Briefcase className="h-5 w-5" />
                    </div>
                    <div>
                      <h3 className="font-serif text-lg font-semibold text-slate-900">
                        {item.role}
                      </h3>
                      {item.org && (
                        <div className="mt-1 flex items-center gap-1.5 text-sm text-slate-600">
                          <Building2 className="h-3.5 w-3.5" />
                          <span>{item.org}</span>
                        </div>
                      )}
                    </div>
                  </div>

                  {item.details?.length ? (
                    <ul className="mt-4 space-y-2">
                      {item.details.map((d, i) => (
                        <li 
                          key={i} 
                          className="flex items-start gap-2 text-sm text-slate-700"
                        >
                          <span className="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-emerald-500/60" />
                          <span className="leading-relaxed">{d}</span>
                        </li>
                      ))}
                    </ul>
                  ) : null}
                </div>

                <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-800/90 md:flex-col md:items-end md:text-right">
                  <Calendar className="h-4 w-4 md:hidden" />
                  <time className="whitespace-nowrap">{item.date}</time>
                </div>
              </div>
            </article>
          ))
        ) : (
          <div className="rounded-3xl border border-slate-200 bg-white/70 p-8 text-center">
            <p className="text-slate-600">No experience data available.</p>
          </div>
        )}
      </div>

      <div className="mt-6 flex items-center justify-between text-xs text-slate-500">
        <p>Data extracted from resume document</p>
        <a 
          href="/docs/Peter's Resume.docx" 
          className="text-emerald-700 hover:text-emerald-800 hover:underline"
          target="_blank"
          rel="noreferrer"
        >
          View full resume →
        </a>
      </div>
    </section>
  )
}
