'use client'

import { motion } from 'motion/react'
import { Layers, Zap, ArrowUpRight } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { DashboardWidgetTitleRow } from '@/components/dashboard-widget-title-row'

interface Cluster {
  clusterId: number
  name?: string
  noteIds: string[]
}

interface BridgeNote {
  noteId: string
  bridgeScore: number
  clusterNames?: string[]
  note?: { id: string; title: string | null }
}

const CLUSTER_COLORS = ['#F87171', '#60A5FA', '#34D399', '#FBBF24', '#A78BFA', '#F472B6', '#2DD4BF']
const EASE = [0.16, 1, 0.3, 1] as const

function clusterPoint(index: number, count: number): { x: number; y: number } {
  if (count === 1) return { x: 50, y: 42 }
  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / count
  const rx = count <= 3 ? 28 : 36
  const ry = count <= 3 ? 24 : 30
  return { x: 50 + Math.cos(angle) * rx, y: 44 + Math.sin(angle) * ry }
}

export interface DashboardMindOrbitProps {
  clusters: Cluster[]
  bridgeNotes: BridgeNote[]
  loading?: boolean
  onOpenInsights: () => void
  onOpenCluster?: (clusterId: number) => void
  onNoteSelect: (id: string) => void
  prefersReducedMotion?: boolean
}

export function DashboardMindOrbit({
  clusters,
  bridgeNotes,
  loading,
  onOpenInsights,
  onOpenCluster,
  onNoteSelect,
  prefersReducedMotion,
}: DashboardMindOrbitProps) {
  const { t } = useLanguage()
  const topClusters = [...clusters]
    .sort((a, b) => b.noteIds.length - a.noteIds.length)
    .slice(0, 5)
  const maxCount = topClusters[0]?.noteIds.length || 1
  const topBridge = bridgeNotes[0]
  const reduced = !!prefersReducedMotion
  const points = topClusters.map((_, idx) => clusterPoint(idx, topClusters.length))

  if (loading) {
    return <div className="h-[180px] rounded-2xl bg-stone-50 dark:bg-zinc-950/30 animate-pulse" />
  }

  if (topClusters.length === 0) {
    return (
      <button
        type="button"
        onClick={onOpenInsights}
        className="w-full h-[180px] rounded-2xl border border-dashed border-border/35 bg-white/50 dark:bg-zinc-900/50 flex flex-col items-center justify-center gap-2 p-6 text-center hover:border-brand-accent/30 transition-all"
      >
        <Layers size={22} className="text-concrete/35" />
        <p className="text-xs text-concrete italic max-w-[220px]">{t('homeDashboard.mindMapEmpty')}</p>
        <span className="text-[9px] font-mono uppercase font-bold text-brand-accent">{t('homeDashboard.mindMapOpen')}</span>
      </button>
    )
  }

  return (
    <div className="rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 p-4">
      <DashboardWidgetTitleRow
        widgetId="mind-map"
        icon={<Layers size={12} className="text-brand-accent" />}
        title={t('homeDashboard.mindMap')}
        actions={(
          <button
            type="button"
            onClick={onOpenInsights}
            className="inline-flex items-center gap-0.5 text-[8px] font-mono uppercase font-bold text-brand-accent hover:underline"
          >
            {t('homeDashboard.fullMap')}
            <ArrowUpRight size={10} />
          </button>
        )}
      />

      <motion.div
        className="relative h-[176px]"
        initial={reduced ? false : { clipPath: 'circle(0% at 50% 44%)' }}
        animate={{ clipPath: 'circle(120% at 50% 44%)' }}
        transition={{ duration: reduced ? 0 : 0.62, ease: EASE }}
      >
        <svg
          viewBox="0 0 100 100"
          preserveAspectRatio="none"
          className="absolute inset-0 w-full h-full pointer-events-none"
          aria-hidden
        >
          {points.map((point, idx) => {
            const color = CLUSTER_COLORS[topClusters[idx].clusterId % CLUSTER_COLORS.length]
            return (
              <motion.path
                key={`spoke-${topClusters[idx].clusterId}`}
                d={`M 50 44 L ${point.x} ${point.y}`}
                fill="none"
                stroke={color}
                strokeWidth={0.7}
                strokeLinecap="round"
                vectorEffect="non-scaling-stroke"
                initial={reduced ? false : { pathLength: 0, opacity: 0 }}
                animate={{ pathLength: 1, opacity: 0.4 }}
                transition={{ duration: reduced ? 0 : 0.45, delay: reduced ? 0 : 0.12 + idx * 0.05, ease: EASE }}
              />
            )
          })}
        </svg>

        <div
          className="absolute left-1/2 top-[44%] w-2.5 h-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-accent shadow-[0_2px_8px_rgba(164,113,72,0.45)] pointer-events-none"
          aria-hidden
        />

        {topClusters.map((cluster, idx) => {
          const color = CLUSTER_COLORS[cluster.clusterId % CLUSTER_COLORS.length]
          const scale = 0.65 + (cluster.noteIds.length / maxCount) * 0.55
          const size = Math.round(52 * scale)
          const label = cluster.name || `${t('homeDashboard.theme')} ${cluster.clusterId + 1}`
          const point = points[idx]
          return (
            <motion.button
              key={cluster.clusterId}
              type="button"
              whileHover={reduced ? undefined : { scale: 1.06 }}
              whileTap={reduced ? undefined : { scale: 0.97 }}
              onClick={() => (onOpenCluster ? onOpenCluster(cluster.clusterId) : onOpenInsights())}
              className="absolute flex flex-col items-center gap-1 group"
              style={{
                left: `${point.x}%`,
                top: `${point.y}%`,
                width: size + 16,
              }}
              initial={reduced ? { x: '-50%', y: '-50%' } : { x: '-50%', y: '-50%', scale: 0.82, opacity: 0.35 }}
              animate={{ x: '-50%', y: '-50%', scale: 1, opacity: 1 }}
              transition={{ duration: reduced ? 0 : 0.38, delay: reduced ? 0 : 0.18 + idx * 0.05, ease: EASE }}
            >
              <div
                className="rounded-full border-2 flex items-center justify-center font-mono font-bold text-white shadow-sm group-hover:shadow-md transition-shadow"
                style={{
                  width: size,
                  height: size,
                  backgroundColor: `${color}cc`,
                  borderColor: `${color}40`,
                  fontSize: Math.max(9, size * 0.22),
                }}
              >
                {cluster.noteIds.length}
              </div>
              <span className="text-[8px] font-medium text-ink/80 dark:text-dark-ink/80 text-center line-clamp-2 leading-tight max-w-[72px] group-hover:text-brand-accent transition-colors">
                {label}
              </span>
            </motion.button>
          )
        })}
      </motion.div>

      {topBridge?.note && (
        <motion.button
          type="button"
          onClick={() => onNoteSelect(topBridge.noteId)}
          className="w-full mt-2 p-2.5 rounded-xl border border-brand-accent/20 bg-brand-accent/[0.04] hover:bg-brand-accent/[0.08] transition-all text-start flex items-center gap-2 group"
          initial={reduced ? false : { opacity: 0, y: 6 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: reduced ? 0 : 0.32, delay: reduced ? 0 : 0.48, ease: EASE }}
        >
          <Zap size={11} className="text-brand-accent shrink-0" />
          <div className="min-w-0 flex-1">
            <p className="text-[10px] font-semibold text-ink dark:text-dark-ink truncate group-hover:text-brand-accent transition-colors">
              {topBridge.note.title || t('homeDashboard.untitled')}
            </p>
            <p className="text-[8px] font-mono uppercase text-concrete">{t('homeDashboard.bridgeNote')}</p>
          </div>
          <span className="text-[8px] font-mono font-bold text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 rounded-full shrink-0">
            {Math.round(topBridge.bridgeScore * 100)}%
          </span>
        </motion.button>
      )}
    </div>
  )
}