import Link from 'next/link'
import { ChevronRight, ExternalLink, CheckCircle, FileText, HelpCircle, AlertTriangle, BarChart3, Download, Phone, Mail, MapPin, Clock, Quote, GraduationCap, Briefcase } from 'lucide-react'
import { getImageUrl } from '@/lib/images'
import ContactForm from '@/components/ContactForm'

interface Block {
  id?: number
  type: string
  data: Record<string, any> | null
  settings: Record<string, any> | null
  sort_order?: number
  is_active?: boolean
}

interface PageRendererProps {
  blocks: Block[]
}

function HeadingBlock({ data }: { data: Record<string, any> }) {
  const level = data.level || 2
  const Tag = `h${level}` as keyof JSX.IntrinsicElements
  const sizeMap: Record<number, string> = {
    1: 'text-3xl sm:text-4xl',
    2: 'text-2xl sm:text-3xl',
    3: 'text-xl sm:text-2xl',
    4: 'text-lg sm:text-xl',
    5: 'text-base sm:text-lg',
    6: 'text-sm sm:text-base',
  }
  return (
    <div className="mb-6">
      <Tag className={`font-display font-bold text-gray-800 ${sizeMap[level] || 'text-2xl'}`}>
        {data.text}
      </Tag>
      {data.subtitle && (
        <p className="text-gray-500 text-sm mt-2">{data.subtitle}</p>
      )}
    </div>
  )
}

function TextBlock({ data }: { data: Record<string, any> }) {
  return (
    <div
      className="prose prose-lg max-w-none prose-headings:font-display prose-a:text-[#1e3a5f] prose-img:rounded-2xl"
      dangerouslySetInnerHTML={{ __html: data.content || '' }}
    />
  )
}

function ImageBlock({ data }: { data: Record<string, any> }) {
  return (
    <figure className="my-6">
      <img
        src={getImageUrl(data.src) || data.src}
        alt={data.alt || ''}
        className="w-full rounded-2xl object-cover"
        style={{ maxHeight: data.maxHeight || 600 }}
      />
      {data.caption && (
        <figcaption className="text-center text-sm text-gray-500 mt-3">{data.caption}</figcaption>
      )}
    </figure>
  )
}

function GalleryBlock({ data }: { data: Record<string, any> }) {
  const images = data.images || []
  const columns = data.columns || 3
  const gridMap: Record<number, string> = { 2: 'grid-cols-2', 3: 'grid-cols-2 md:grid-cols-3', 4: 'grid-cols-2 md:grid-cols-4' }
  return (
    <div className={`grid ${gridMap[columns] || 'grid-cols-3'} gap-4 my-6`}>
      {images.map((img: any, i: number) => (
        <figure key={i} className="overflow-hidden rounded-2xl">
          <img src={getImageUrl(img.src) || img.src} alt={img.alt || ''} className="w-full h-48 object-cover hover:scale-105 transition-transform duration-300" />
          {img.caption && (
            <figcaption className="text-xs text-gray-500 mt-1 px-1">{img.caption}</figcaption>
          )}
        </figure>
      ))}
    </div>
  )
}

function HtmlBlock({ data }: { data: Record<string, any> }) {
  return (
    <div
      className="my-6"
      dangerouslySetInnerHTML={{ __html: data.content || '' }}
    />
  )
}

function DividerBlock({ data }: { data: Record<string, any> }) {
  if (data.style === 'dots') {
    return <div className="flex justify-center gap-2 my-8"><span className="w-2 h-2 rounded-full bg-[#1e3a5f]" /><span className="w-2 h-2 rounded-full bg-[#c8102e]" /><span className="w-2 h-2 rounded-full bg-[#f59e0b]" /></div>
  }
  return <hr className="my-8 border-gray-200" />
}

function ListBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  const iconMap: Record<string, any> = { check: CheckCircle, info: FileText, warning: AlertTriangle, help: HelpCircle }
  return (
    <div className="my-6">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      <ul className="space-y-3">
        {items.map((item: any, i: number) => {
          const Icon = item.icon ? iconMap[item.icon] || CheckCircle : null
          return (
            <li key={i} className="flex items-start gap-3 text-gray-600">
              {Icon && <Icon size={18} className="text-[#1e3a5f] mt-0.5 shrink-0" />}
              {!Icon && item.bullet !== false && <span className="w-1.5 h-1.5 rounded-full bg-[#1e3a5f] mt-2 shrink-0" />}
              <span>{item.text}</span>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

function CardsBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  const columns = data.columns || 3
  const gridMap: Record<number, string> = { 2: 'grid-cols-1 md:grid-cols-2', 3: 'grid-cols-1 md:grid-cols-3', 4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4', 6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6' }
  return (
    <div className="my-6">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      <div className={`grid ${gridMap[columns] || 'grid-cols-3'} gap-4`}>
        {items.map((item: any, i: number) => {
          const cardContent = (
            <>
              {item.icon && (
                <div className="w-12 h-12 rounded-xl bg-[#1e3a5f]/10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                  <span className="text-xl">{item.icon}</span>
                </div>
              )}
              {item.image && (
                <img src={getImageUrl(item.image) || item.image} alt={item.title || ''} className="w-full h-32 object-cover rounded-xl mb-3" />
              )}
              <h4 className="font-bold text-sm text-gray-800 font-display">{item.title}</h4>
              {item.description && <p className="text-xs text-gray-500 mt-1">{item.description}</p>}
              {item.link && (
                <span className="inline-flex items-center gap-1 text-xs text-[#1e3a5f] font-medium mt-2 group-hover:gap-2 transition-all">
                  Selengkapnya <ChevronRight size={12} />
                </span>
              )}
            </>
          )

          if (item.link) {
            return (
              <Link key={i} href={item.link} target={item.external ? '_blank' : undefined}
                className="bg-white p-5 rounded-2xl border border-gray-100 hover:shadow-lg transition-all group">
                {cardContent}
              </Link>
            )
          }

          return (
            <div key={i} className="bg-white p-5 rounded-2xl border border-gray-100 hover:shadow-lg transition-all group">
              {cardContent}
            </div>
          )
        })}
      </div>
    </div>
  )
}

function CtaBlock({ data }: { data: Record<string, any> }) {
  const bgMap: Record<string, string> = {
    primary: 'from-[#1e3a5f] to-[#0f2942]',
    danger: 'from-[#c8102e] to-[#8b0c20]',
    dark: 'from-gray-800 to-gray-900',
  }
  return (
    <div className={`relative my-8 rounded-2xl overflow-hidden bg-gradient-to-br ${bgMap[data.color || 'primary']}`}>
      <div className="relative p-8 sm:p-12 text-center">
        <h2 className="text-2xl sm:text-3xl font-display font-bold text-white mb-3">{data.title}</h2>
        {data.description && <p className="text-white/70 mb-6 max-w-xl mx-auto">{data.description}</p>}
        {data.button_text && data.button_url && (
          <Link
            href={data.button_url}
            className="inline-flex items-center gap-2 bg-white text-[#1e3a5f] px-6 py-3 rounded-xl font-medium hover:shadow-lg transition-all"
          >
            {data.button_text}
            {data.external ? <ExternalLink size={14} /> : <ChevronRight size={14} />}
          </Link>
        )}
      </div>
    </div>
  )
}

function StatsBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  return (
    <div className="my-6">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {items.map((item: any, i: number) => (
          <div key={i} className="bg-white p-5 rounded-2xl border border-gray-100 text-center">
            {item.icon && <span className="text-2xl mb-2 block">{item.icon}</span>}
            <div className="text-2xl font-display font-bold text-[#1e3a5f]">{item.value}</div>
            <div className="text-sm text-gray-600 mt-1">{item.label}</div>
            {item.unit && <div className="text-xs text-gray-400">{item.unit}</div>}
          </div>
        ))}
      </div>
    </div>
  )
}

function TableBlock({ data }: { data: Record<string, any> }) {
  const headers = data.headers || []
  const rows = data.rows || []
  return (
    <div className="my-6 overflow-x-auto">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      <table className="w-full text-sm border border-gray-200 rounded-2xl overflow-hidden">
        <thead>
          <tr className="bg-[#1e3a5f] text-white">
            {headers.map((h: string, i: number) => (
              <th key={i} className="px-4 py-3 text-left font-medium">{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row: string[], i: number) => (
            <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
              {row.map((cell: string, j: number) => (
                <td key={j} className="px-4 py-3 border-t border-gray-100">{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function ContactBlock({ data }: { data: Record<string, any> }) {
  return (
    <div className="bg-gray-50 rounded-2xl p-6 my-6">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      <div className="grid sm:grid-cols-2 gap-4">
        {data.items?.map((item: any, i: number) => (
          <div key={i} className="flex items-start gap-3">
            <div className="w-10 h-10 rounded-xl bg-[#1e3a5f]/10 flex items-center justify-center shrink-0">
              {item.type === 'phone' && <Phone size={16} className="text-[#1e3a5f]" />}
              {item.type === 'email' && <Mail size={16} className="text-[#1e3a5f]" />}
              {item.type === 'address' && <MapPin size={16} className="text-[#1e3a5f]" />}
              {item.type === 'hours' && <Clock size={16} className="text-[#1e3a5f]" />}
              {!item.type && <FileText size={16} className="text-[#1e3a5f]" />}
            </div>
            <div>
              <div className="text-xs text-gray-500 uppercase tracking-wider">{item.label}</div>
              <div className="text-sm font-medium text-gray-800">{item.value}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function SidebarBlock({ data }: { data: Record<string, any> }) {
  return (
    <div className="bg-gray-50 rounded-2xl p-6 sticky top-24">
      {data.title && <h3 className="font-display font-bold text-lg text-[#1e3a5f] mb-4">{data.title}</h3>}
      <div className="space-y-1">
        {data.items?.map((item: any, i: number) => (
          <Link
            key={i}
            href={item.href || '#'}
            className={`flex items-center gap-2 px-3 py-2.5 rounded-xl text-sm transition-all ${
              item.active ? 'bg-[#1e3a5f] text-white font-medium' : 'text-gray-600 hover:bg-gray-100 hover:text-[#1e3a5f]'
            }`}
          >
            {item.label}
            <ChevronRight size={14} className="ml-auto opacity-50" />
          </Link>
        ))}
      </div>
    </div>
  )
}

function TwoColumnBlock({ data }: { data: Record<string, any> }) {
  return (
    <div className="grid lg:grid-cols-3 gap-8 my-6">
      <div className="lg:col-span-2">
        {data.left && (
          <div className="prose prose-lg max-w-none" dangerouslySetInnerHTML={{ __html: data.left }} />
        )}
      </div>
      <div>
        {data.right_type === 'sidebar' && data.right_sidebar && (
          <SidebarBlock data={data.right_sidebar} />
        )}
      </div>
    </div>
  )
}

function FaqBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  return (
    <div className="space-y-4 my-6">
      {data.title && <h3 className="font-display font-bold text-lg text-gray-800 mb-4">{data.title}</h3>}
      {items.map((item: any, i: number) => (
        <details key={i} className="bg-white border border-gray-100 rounded-2xl overflow-hidden group">
          <summary className="px-6 py-4 cursor-pointer font-medium text-gray-800 hover:text-[#1e3a5f] transition-colors flex items-center justify-between">
            <span>{item.question}</span>
            <ChevronRight size={16} className="transition-transform group-open:rotate-90" />
          </summary>
          <div className="px-6 pb-4 text-sm text-gray-600 leading-relaxed">{item.answer}</div>
        </details>
      ))}
    </div>
  )
}

function AlertBlock({ data }: { data: Record<string, any> }) {
  const colorMap: Record<string, string> = {
    info: 'bg-blue-50 border-blue-200 text-blue-800',
    success: 'bg-green-50 border-green-200 text-green-800',
    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    danger: 'bg-red-50 border-red-200 text-red-800',
  }
  return (
    <div className={`rounded-2xl border p-4 my-6 ${colorMap[data.color || 'info']}`}>
      {data.title && <strong className="block mb-1">{data.title}</strong>}
      <div className="text-sm">{data.content}</div>
    </div>
  )
}

function ProfileCardBlock({ data }: { data: Record<string, any> }) {
  const photo = data.photo
  const name = data.name || 'Nama'
  const title = data.title || 'Jabatan'
  const period = data.period || ''
  const initial = data.initial || name.charAt(0)
  return (
    <div className="bg-white rounded-2xl shadow-sm border overflow-hidden my-6">
      <div className="flex flex-col sm:flex-row">
        <div className="sm:w-48 md:w-56 shrink-0">
          <div className="aspect-[3/4] sm:aspect-auto sm:h-full bg-gradient-to-br from-[#2a4f7a] to-[#0f2942] flex flex-col items-center justify-center p-6 text-center">
            {photo ? (
              <img src={getImageUrl(photo) || photo} alt={name} className="w-full h-full object-cover rounded-xl" />
            ) : (
              <>
                <div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-[#c8102e]/20 border-4 border-[#c8102e]/40 flex items-center justify-center mb-3">
                  <span className="text-3xl sm:text-4xl font-bold text-white/90">{initial}</span>
                </div>
                <h3 className="text-base sm:text-lg font-bold text-white font-display">{name}</h3>
                <p className="text-xs sm:text-sm text-white/60">{title}</p>
                {period && <p className="text-xs text-[#f59e0b] mt-1 font-medium">Periode {period}</p>}
              </>
            )}
          </div>
        </div>
        <div className="flex-1 p-5 sm:p-6">
          <h3 className="font-display font-bold text-lg sm:text-xl text-[#1e3a5f] mb-1">{name}</h3>
          <p className="text-sm text-gray-500 mb-1">{title}</p>
          {period && <p className="text-xs text-[#f59e0b] font-medium">Periode {period}</p>}
        </div>
      </div>
    </div>
  )
}

function ProfileBioBlock({ data }: { data: Record<string, any> }) {
  return (
    <div className="bg-white rounded-2xl shadow-sm border p-5 sm:p-8 my-6">
      {data.title && <h2 className="text-lg sm:text-xl font-display font-bold text-[#1e3a5f] mb-3 sm:mb-4">{data.title}</h2>}
      <div className="prose prose-sm sm:prose-lg max-w-none text-gray-600" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
    </div>
  )
}

function ProfileEducationBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  if (!items.length) return null
  return (
    <div className="bg-white rounded-2xl shadow-sm border p-5 sm:p-8 my-6">
      <div className="flex items-center gap-2.5 sm:gap-3 mb-4 sm:mb-5">
        <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-[#1e3a5f]/10 flex items-center justify-center">
          <GraduationCap size={18} className="text-[#1e3a5f] sm:w-5 sm:h-5" />
        </div>
        <h2 className="text-lg sm:text-xl font-display font-bold text-[#1e3a5f]">Pendidikan</h2>
      </div>
      <div className="space-y-2.5 sm:space-y-3">
        {items.map((item: any, i: number) => (
          <div key={i} className="flex items-start gap-2.5 sm:gap-3">
            <div className="w-2 h-2 rounded-full bg-[#c8102e] mt-1.5 sm:mt-2 shrink-0" />
            <span className="text-sm sm:text-base text-gray-600">{item.text}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

function ProfileCareerBlock({ data }: { data: Record<string, any> }) {
  const items = data.items || []
  if (!items.length) return null
  return (
    <div className="bg-white rounded-2xl shadow-sm border p-5 sm:p-8 my-6">
      <div className="flex items-center gap-2.5 sm:gap-3 mb-4 sm:mb-5">
        <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-[#c8102e]/10 flex items-center justify-center">
          <Briefcase size={18} className="text-[#c8102e] sm:w-5 sm:h-5" />
        </div>
        <h2 className="text-lg sm:text-xl font-display font-bold text-[#1e3a5f]">Pengalaman Kerja</h2>
      </div>
      <div className="space-y-2.5 sm:space-y-3">
        {items.map((item: any, i: number) => (
          <div key={i} className="flex items-start gap-2.5 sm:gap-3">
            <div className="w-2 h-2 rounded-full bg-[#1e3a5f] mt-1.5 sm:mt-2 shrink-0" />
            <span className="text-sm sm:text-base text-gray-600">{item.text}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

function ProfileSpeechBlock({ data }: { data: Record<string, any> }) {
  const isDark = data.style !== 'light'
  if (isDark) {
    return (
      <div className="relative bg-gradient-to-br from-[#1e3a5f] to-[#0f2942] rounded-2xl overflow-hidden my-6">
        <div className="absolute inset-0 line-pattern opacity-30" />
        <div className="relative p-5 sm:p-8 md:p-10">
          <Quote size={32} className="text-[#f59e0b]/30 mb-3 sm:mb-4 sm:w-10 sm:h-10" />
          {data.title && <h2 className="text-base sm:text-lg font-display font-bold text-white mb-3 sm:mb-4">{data.title}</h2>}
          <div className="prose prose-sm sm:prose-lg prose-invert max-w-none whitespace-pre-line text-white/80" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
        </div>
      </div>
    )
  }
  return (
    <div className="bg-white rounded-2xl shadow-sm border p-5 sm:p-8 my-6">
      <div className="flex items-center gap-2.5 sm:gap-3 mb-4 sm:mb-5">
        <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-[#f59e0b]/10 flex items-center justify-center">
          <Quote size={18} className="text-[#f59e0b] sm:w-5 sm:h-5" />
        </div>
        {data.title && <h2 className="text-lg sm:text-xl font-display font-bold text-[#1e3a5f]">{data.title}</h2>}
      </div>
      <div className="prose prose-sm sm:prose-lg max-w-none whitespace-pre-line text-gray-600" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
    </div>
  )
}

function renderBlock(block: Block) {
  const { type, data } = block
  const d = data || {}

  switch (type) {
    case 'heading': return <HeadingBlock data={d} />
    case 'text': return <TextBlock data={d} />
    case 'image': return <ImageBlock data={d} />
    case 'gallery': return <GalleryBlock data={d} />
    case 'html': return <HtmlBlock data={d} />
    case 'divider': return <DividerBlock data={d} />
    case 'list': return <ListBlock data={d} />
    case 'cards': return <CardsBlock data={d} />
    case 'cta': return <CtaBlock data={d} />
    case 'stats': return <StatsBlock data={d} />
    case 'table': return <TableBlock data={d} />
    case 'contact': return <ContactBlock data={d} />
    case 'contact_form': return <ContactForm />
    case 'sidebar': return <SidebarBlock data={d} />
    case 'two_column': return <TwoColumnBlock data={d} />
    case 'faq': return <FaqBlock data={d} />
    case 'alert': return <AlertBlock data={d} />
    case 'profile_card': return <ProfileCardBlock data={d} />
    case 'profile_bio': return <ProfileBioBlock data={d} />
    case 'profile_education': return <ProfileEducationBlock data={d} />
    case 'profile_career': return <ProfileCareerBlock data={d} />
    case 'profile_speech': return <ProfileSpeechBlock data={d} />
    default: return <div className="my-4 p-4 bg-gray-50 rounded-xl text-sm text-gray-400">Block type: {type}</div>
  }
}

export default function PageRenderer({ blocks }: PageRendererProps) {
  const activeBlocks = blocks.filter(b => b.is_active !== false)
  return <>{activeBlocks.map((block, i) => <div key={block.id || i}>{renderBlock(block)}</div>)}</>
}

export type { Block }