'use client'

import { Columns3, Database, Table2, type LucideIcon } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { cn } from '@/lib/utils'
import type { BootstrapStructuredTarget } from '@/lib/structured-views/bootstrap-structured-notebook'

type StructuredViewsIntroProps = {
  target: BootstrapStructuredTarget
  enabling?: boolean
  onEnable: () => void
}

export function StructuredViewsIntro({ target, enabling, onEnable }: StructuredViewsIntroProps) {
  const { t } = useLanguage()

  return (
    <div className="max-w-2xl mx-auto space-y-8 py-6">
      <div className="space-y-3">
        <div className="flex items-center gap-2 text-brand-accent">
          <Database size={18} />
          <h2 className="font-memento-serif text-2xl text-foreground">{t('structuredViews.intro.databaseTitle')}</h2>
        </div>
        <p className="text-[14px] leading-relaxed text-muted-foreground">
          {t('structuredViews.intro.databaseBody')}
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <IntroCard
          icon={Table2}
          title={t('structuredViews.intro.tableTitle')}
          body={t('structuredViews.intro.tableBody')}
          active={target === 'table'}
        />
        <IntroCard
          icon={Columns3}
          title={t('structuredViews.intro.kanbanTitle')}
          body={t('structuredViews.intro.kanbanBody')}
          active={target === 'kanban'}
        />
      </div>

      <div className="rounded-2xl border border-border/50 bg-foreground/[0.02] px-5 py-4 space-y-4">
        <p className="text-[13px] text-muted-foreground leading-relaxed">
          {target === 'kanban'
            ? t('structuredViews.intro.activateKanbanHint')
            : t('structuredViews.intro.activateTableHint')}
        </p>
        <button
          type="button"
          disabled={enabling}
          onClick={onEnable}
          className={cn(
            'px-6 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all',
            'bg-foreground text-background hover:opacity-90 disabled:opacity-50',
          )}
        >
          {enabling
            ? t('structuredViews.intro.enabling')
            : target === 'kanban'
              ? t('structuredViews.intro.enableKanban')
              : t('structuredViews.intro.enableTable')}
        </button>
      </div>
    </div>
  )
}

function IntroCard({
  icon: Icon,
  title,
  body,
  active,
}: {
  icon: LucideIcon
  title: string
  body: string
  active?: boolean
}) {
  return (
    <div
      className={cn(
        'rounded-2xl border p-4 space-y-2 transition-colors',
        active ? 'border-brand-accent/40 bg-brand-accent/[0.04]' : 'border-border/40 bg-card/40',
      )}
    >
      <div className="flex items-center gap-2">
        <Icon size={16} className={active ? 'text-brand-accent' : 'text-muted-foreground'} />
        <h3 className="text-[13px] font-semibold text-foreground">{title}</h3>
      </div>
      <p className="text-[12px] leading-relaxed text-muted-foreground">{body}</p>
    </div>
  )
}