'use client'

import { motion, useReducedMotion } from 'motion/react'
import { Inbox, GraduationCap, Mail, Pin, Bot, BarChart3 } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { RevisionHeatmap } from '@/components/flashcards/revision-heatmap'
import { UsageMeter } from '@/components/usage-meter'
import { DashboardWidgetTitleRow } from '@/components/dashboard-widget-title-row'
import { pathNoteTitle } from '@/lib/dashboard/path-title'
import type { DashboardWidgetId } from '@/lib/dashboard/layout'

interface DashboardWidgetShellProps {
  widgetId: DashboardWidgetId
  icon: React.ReactNode
  title: string
  children: React.ReactNode
  compact?: boolean
  headerActions?: React.ReactNode
}

export function DashboardWidgetShell({
  widgetId,
  icon,
  title,
  children,
  compact,
  headerActions,
}: DashboardWidgetShellProps) {
  return (
    <div className={`rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 h-full ${
      compact ? 'p-3' : 'p-4'
    }`}>
      <DashboardWidgetTitleRow
        widgetId={widgetId}
        icon={icon}
        title={title}
        actions={headerActions}
        className={compact ? 'mb-2' : 'mb-3'}
      />
      {children}
    </div>
  )
}

function inboxDisplayTitle(
  note: { title: string | null; excerpt?: string },
  fallback: string,
): string {
  const titled = note.title?.trim()
  if (titled) return titled
  const excerpt = note.excerpt?.trim()
  if (!excerpt) return fallback
  return excerpt.length > 80 ? `${excerpt.slice(0, 80).trim()}…` : excerpt
}

export function DashboardInboxWidget({
  notes,
  loading,
  onOpen,
  onSelect,
  formatRelativeTime,
}: {
  count: number
  notes: Array<{
    id: string
    title: string | null
    excerpt?: string
    notebookId: string | null
    updatedAt?: string
  }>
  loading: boolean
  onOpen: () => void
  onSelect: (id: string, notebookId: string | null) => void
  formatRelativeTime?: (date: string) => string
}) {
  const { t } = useLanguage()
  const reduced = !!useReducedMotion()
  const untitled = t('homeDashboard.untitled')
  return (
    <DashboardWidgetShell
      widgetId="inbox"
      icon={<Inbox size={12} className="text-brand-accent" />}
      title={t('homeDashboard.inbox')}
      compact
    >
      {loading ? (
        <div className="space-y-2">
          <div className="h-10 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
          <div className="h-8 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
        </div>
      ) : notes.length === 0 ? (
        <p className="text-[11px] text-concrete italic py-1">{t('homeDashboard.inboxEmpty')}</p>
      ) : (
        <div className="space-y-1.5">
          {notes.map((note, idx) => (
            <motion.button
              key={note.id}
              type="button"
              onClick={() => onSelect(note.id, note.notebookId)}
              initial={reduced ? false : { opacity: 0, x: 8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: reduced ? 0 : 0.22, delay: reduced ? 0 : Math.min(idx * 0.05, 0.15), ease: [0.16, 1, 0.3, 1] }}
              className="w-full text-start p-2.5 rounded-xl border border-border/20 hover:border-brand-accent/30 hover:bg-brand-accent/[0.03] transition-all"
            >
              <p className="text-[11px] text-ink dark:text-dark-ink truncate">
                {inboxDisplayTitle(note, untitled)}
              </p>
              <p className="text-[9px] text-concrete truncate mt-0.5">
                {t('homeDashboard.inbox')}
                {note.updatedAt && formatRelativeTime
                  ? ` · ${formatRelativeTime(note.updatedAt)}`
                  : ''}
              </p>
            </motion.button>
          ))}
          <button
            type="button"
            onClick={onOpen}
            className="w-full text-start px-1 pt-1 text-[9px] font-mono uppercase font-bold text-brand-accent hover:underline"
          >
            {t('homeDashboard.inboxOpenList')} →
          </button>
        </div>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardRevisionWidget({
  dueCount,
  loading,
  onOpen,
}: {
  dueCount: number
  loading: boolean
  onOpen: () => void
}) {
  const { t } = useLanguage()
  return (
    <DashboardWidgetShell
      widgetId="revision"
      icon={<GraduationCap size={12} className="text-brand-accent" />}
      title={t('homeDashboard.review')}
      compact
    >
      {loading ? (
        <div className="h-10 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
      ) : (
        <button
          type="button"
          onClick={onOpen}
          className="w-full flex items-center justify-between gap-3 p-3 rounded-xl border border-border/20 hover:border-brand-accent/30 hover:bg-brand-accent/[0.03] transition-all text-start"
        >
          <div>
            <p className="text-2xl font-serif font-bold text-ink dark:text-dark-ink leading-none">{dueCount}</p>
            <p className="text-[10px] text-concrete mt-1">{t('homeDashboard.cardsDue')}</p>
          </div>
          <span className="text-[9px] font-mono uppercase font-bold text-brand-accent">{t('homeDashboard.widgetOpen')} →</span>
        </button>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardStatsWidget({
  clusterCount,
  bridgeCount,
  noteCount,
  loading,
  onOpen,
}: {
  clusterCount: number
  bridgeCount: number
  noteCount: number
  loading: boolean
  onOpen: () => void
}) {
  const { t } = useLanguage()
  return (
    <DashboardWidgetShell
      widgetId="stats"
      icon={<BarChart3 size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.stats')}
      compact
    >
      {loading ? (
        <div className="grid grid-cols-3 gap-2">
          {[0, 1, 2].map(i => <div key={i} className="h-12 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />)}
        </div>
      ) : (
        <button type="button" onClick={onOpen} className="w-full text-start">
          <div className="grid grid-cols-3 gap-2">
            {[
              { label: t('homeDashboard.themes'), value: clusterCount },
              { label: t('homeDashboard.widgetStatsBridges'), value: bridgeCount },
              { label: t('homeDashboard.widgetStatsNotes'), value: noteCount },
            ].map(item => (
              <div key={item.label} className="p-2 rounded-xl border border-border/20 bg-stone-50/50 dark:bg-zinc-950/30 text-center">
                <p className="text-lg font-serif font-bold text-ink dark:text-dark-ink leading-none">{item.value}</p>
                <p className="text-[8px] font-mono uppercase text-concrete mt-1 truncate">{item.label}</p>
              </div>
            ))}
          </div>
        </button>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardAgentActivityWidget({
  actions,
  loading,
  onOpen,
}: {
  actions: { id: string; agentName: string; result: string | null; createdAt: string }[]
  loading: boolean
  onOpen: () => void
}) {
  const { t } = useLanguage()
  return (
    <DashboardWidgetShell
      widgetId="agent-activity"
      icon={<Bot size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.agent-activity')}
      compact
    >
      {loading ? (
        <div className="space-y-2">
          <div className="h-8 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
          <div className="h-8 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
        </div>
      ) : actions.length === 0 ? (
        <p className="text-[10px] text-concrete italic py-2">{t('homeDashboard.widgetAgentActivityEmpty')}</p>
      ) : (
        <div className="space-y-1.5">
          {actions.slice(0, 3).map(a => (
            <button
              key={a.id}
              type="button"
              onClick={onOpen}
              className="w-full p-2 rounded-xl border border-border/20 hover:border-brand-accent/25 text-start transition-all"
            >
              <p className="text-[10px] font-mono font-bold text-ink dark:text-dark-ink truncate">{a.agentName}</p>
              <p className="text-[9px] text-concrete truncate mt-0.5">
                {(a.result || t('homeDashboard.intelAgentNoResult')).slice(0, 80)}
              </p>
            </button>
          ))}
        </div>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardGmailWidget({
  connected,
  recentCaptures,
  loading,
  onOpen,
}: {
  connected: boolean
  recentCaptures: number
  loading: boolean
  onOpen: () => void
}) {
  const { t } = useLanguage()
  return (
    <DashboardWidgetShell
      widgetId="gmail"
      icon={<Mail size={12} className="text-brand-accent" />}
      title={t('homeDashboard.gmailCaptures')}
      compact
    >
      {loading ? (
        <div className="h-10 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
      ) : connected ? (
        <button
          type="button"
          onClick={onOpen}
          className="w-full flex items-center justify-between gap-2 p-2.5 rounded-xl border border-border/20 hover:border-brand-accent/25 transition-all text-start"
        >
          <span className="text-[10px] text-ink dark:text-dark-ink">{t('homeDashboard.gmailRecent', { count: recentCaptures })}</span>
          <span className="text-[8px] font-mono font-bold text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 rounded shrink-0">Gmail</span>
        </button>
      ) : (
        <button
          type="button"
          onClick={onOpen}
          className="w-full text-[10px] font-mono uppercase tracking-wider text-concrete hover:text-brand-accent transition-colors text-start py-2"
        >
          {t('homeDashboard.gmailConnect')} →
        </button>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardPinnedWidget({
  notes,
  loading,
  onSelect,
  formatRelativeTime,
}: {
  notes: {
    id: string
    title: string | null
    excerpt?: string
    notebookId: string | null
    updatedAt?: string
    notebook?: { name: string; color: string | null } | null
  }[]
  loading: boolean
  onSelect: (id: string, notebookId: string | null) => void
  formatRelativeTime?: (date: string) => string
}) {
  const { t } = useLanguage()
  const untitled = t('homeDashboard.untitled')
  return (
    <DashboardWidgetShell
      widgetId="pinned"
      icon={<Pin size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.pinned')}
      compact
    >
      {loading ? (
        <div className="space-y-2">
          <div className="h-8 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
        </div>
      ) : notes.length === 0 ? (
        <p className="text-[10px] text-concrete italic py-2">{t('homeDashboard.widgetPinnedEmpty')}</p>
      ) : (
        <div className="space-y-1.5">
          {notes.map(n => {
            const displayTitle = pathNoteTitle(n.title, n.excerpt) || untitled
            const notebookName = n.notebook?.name || t('homeDashboard.pinnedNoNotebook')
            const notebookColor = n.notebook?.color || '#C4A574'
            return (
              <button
                key={n.id}
                type="button"
                onClick={() => onSelect(n.id, n.notebookId)}
                className="w-full flex items-center gap-2.5 p-2 rounded-xl border border-border/20 hover:border-brand-accent/30 hover:bg-brand-accent/[0.03] transition-all text-start group"
              >
                <span
                  className="w-1 h-7 rounded-full shrink-0"
                  style={{ backgroundColor: notebookColor }}
                  aria-hidden
                />
                <div className="min-w-0 flex-1">
                  <p className="text-[11px] text-ink dark:text-dark-ink truncate group-hover:text-brand-accent transition-colors">
                    {displayTitle}
                  </p>
                  <p className="text-[9px] text-concrete truncate mt-0.5">
                    {notebookName}
                    {n.updatedAt && formatRelativeTime
                      ? ` · ${formatRelativeTime(n.updatedAt)}`
                      : ''}
                  </p>
                </div>
              </button>
            )
          })}
        </div>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardActivityWidget({
  data,
  loading,
}: {
  data: { date: string; count: number }[]
  loading: boolean
}) {
  const { t } = useLanguage()
  const hasActivity = data.some(d => d.count > 0)
  return (
    <DashboardWidgetShell
      widgetId="activity"
      icon={<BarChart3 size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.activity')}
    >
      {loading ? (
        <div className="h-24 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
      ) : !hasActivity ? (
        <div className="rounded-xl border border-dashed border-border/35 bg-stone-50/50 dark:bg-zinc-950/30 p-4 text-center">
          <p className="text-[10px] text-concrete leading-relaxed">{t('homeDashboard.activityEmptyHint')}</p>
        </div>
      ) : (
        <>
          <RevisionHeatmap data={data} kind="edits" />
        </>
      )}
    </DashboardWidgetShell>
  )
}

export function DashboardUsageWidget() {
  const { t } = useLanguage()
  return (
    <DashboardWidgetShell
      widgetId="usage"
      icon={<BarChart3 size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.usage')}
      compact
    >
      <UsageMeter className="px-0 py-0" />
      <p className="text-[9px] text-concrete mt-2">{t('homeDashboard.widgetUsageHint')}</p>
    </DashboardWidgetShell>
  )
}

export function DashboardFlashcardsProgressWidget({
  retentionRate,
  streak,
  totalCards,
  dueCount = 0,
  loading,
  onOpen,
}: {
  retentionRate: number
  streak: number
  totalCards: number
  dueCount?: number
  loading?: boolean
  onOpen: () => void
}) {
  const { t } = useLanguage()
  const retention = Math.max(0, Math.min(100, retentionRate))

  return (
    <DashboardWidgetShell
      widgetId="flashcards-progress"
      icon={<GraduationCap size={12} className="text-brand-accent" />}
      title={t('homeDashboard.widgets.flashcards-progress')}
      compact
    >
      {loading ? (
        <div className="space-y-2">
          <div className="h-12 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
          <div className="h-8 rounded-lg bg-stone-50 dark:bg-zinc-950/40 animate-pulse" />
        </div>
      ) : totalCards === 0 && dueCount === 0 ? (
        <div className="rounded-xl border border-dashed border-border/35 bg-stone-50/50 dark:bg-zinc-950/30 p-3 text-center">
          <p className="text-[10px] text-concrete leading-relaxed mb-2">
            {t('homeDashboard.flashEmptyHint')}
          </p>
          <button
            type="button"
            onClick={onOpen}
            className="text-[9px] font-mono font-bold uppercase text-brand-accent hover:underline"
          >
            {t('homeDashboard.flashEmptyCta')} →
          </button>
        </div>
      ) : (
        <button type="button" onClick={onOpen} className="w-full text-start group">
          <div className="grid grid-cols-3 gap-2 mb-2.5">
            <div className="text-center p-2 rounded-xl border border-border/20">
              <p className="text-lg font-serif font-bold text-ink dark:text-dark-ink">{retention}%</p>
              <p className="text-[8px] font-mono uppercase text-concrete">{t('homeDashboard.flashRetention')}</p>
            </div>
            <div className="text-center p-2 rounded-xl border border-border/20">
              <p className="text-lg font-serif font-bold text-ink dark:text-dark-ink">{streak}</p>
              <p className="text-[8px] font-mono uppercase text-concrete">{t('homeDashboard.flashStreak')}</p>
            </div>
            <div className="text-center p-2 rounded-xl border border-border/20">
              <p className="text-lg font-serif font-bold text-ink dark:text-dark-ink">{totalCards || dueCount}</p>
              <p className="text-[8px] font-mono uppercase text-concrete">{t('homeDashboard.flashTotal')}</p>
            </div>
          </div>
          <div className="h-1.5 rounded-full bg-stone-100 dark:bg-zinc-800 overflow-hidden mb-2">
            <div
              className="h-full rounded-full bg-brand-accent transition-all"
              style={{ width: `${retention}%` }}
            />
          </div>
          <p className="text-[9px] text-concrete leading-relaxed mb-2">
            {t('homeDashboard.flashRetentionHint')}
          </p>
          <p className="text-[10px] font-medium text-brand-accent group-hover:underline">
            {dueCount > 0 ? t('homeDashboard.flashDueCta') : t('homeDashboard.flashOpenCta')} →
          </p>
        </button>
      )}
    </DashboardWidgetShell>
  )
}