import { motion } from 'framer-motion';
import type { CanvasComponent } from '../../types/canvas';
import { RendererWrapper, type ComponentRenderContext } from './RendererWrapper';
import { CalendarClock, Mail, Phone, Users, MessageCircle } from 'lucide-react';

interface Props { component: CanvasComponent; ctx: ComponentRenderContext }

const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  email: Mail,
  call: Phone,
  meeting: Users,
  whatsapp: MessageCircle,
  appointment: CalendarClock,
};

export function TimelineRenderer({ component, ctx }: Props) {
  const rows = (component.dataRows ?? []) as Array<Record<string, unknown>>;

  return (
    <RendererWrapper component={component} ctx={ctx} minHeight={300}>
      <div className="relative space-y-4 pl-6">
        {/* Timeline spine */}
        <div className="absolute left-[18px] top-2 bottom-4 w-[2px] bg-gradient-to-b from-blue-500 via-cyan-400/40 to-transparent shadow-[0_0_8px_#3b82f6]" />

        {rows.map((row, i) => {
          const typeKey = String(row.type ?? '').toLowerCase();
          const Icon = ICONS[typeKey] ?? CalendarClock;
          return (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.09 }}
              className="relative pl-5 group cursor-pointer"
            >
              {/* Timeline dot */}
              <div className="absolute -left-[3px] top-1.5 h-3.5 w-3.5 rounded-full bg-zinc-950 border-2 border-blue-400 shadow-[0_0_12px_#3b82f6] z-10" />

              <div
                className="p-4 rounded-xl relative overflow-hidden"
                style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.07)' }}
              >
                {/* Hover shimmer */}
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/[0.04] to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
                <div className="flex items-start justify-between gap-3 relative z-10">
                  <div>
                    <div className="flex items-center gap-2 mb-1.5">
                      <Icon className="w-3.5 h-3.5 text-blue-400" />
                      <span className="text-[10px] font-bold uppercase tracking-widest text-blue-300">
                        {String(row.type ?? row.title ?? '')}
                      </span>
                    </div>
                    <p className="text-sm text-zinc-200 font-medium leading-tight">
                      {String(row.summary ?? row.title ?? '')}
                    </p>
                    {row.actor !== undefined && (
                      <p className="text-xs text-zinc-500 mt-1">{String(row.actor)}</p>
                    )}
                  </div>
                  <span className="text-[11px] font-mono text-zinc-500 whitespace-nowrap flex-shrink-0 pt-0.5">
                    {String(row.date ?? row.when ?? '')}
                  </span>
                </div>
              </div>
            </motion.div>
          );
        })}

        {rows.length === 0 && (
          <p className="text-sm text-zinc-600 pl-2">No timeline events found.</p>
        )}
      </div>
    </RendererWrapper>
  );
}
