import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { SparkleIcon } from '@phosphor-icons/react'
import { Modal, Badge } from '@/ui'
import {
  useChangelog,
  readLastSeenVersion,
  writeLastSeenVersion,
  isVersionNewer,
  type ChangelogEntry,
  type ChangelogSection,
} from './useChangelog'
import { cn } from '@/lib/utils'

/**
 * «Что нового» — modal с release notes из public changelog.
 *
 * <p>Open state управляется снаружи (controlled component). Используется
 * двумя trigger'ами:
 * <ol>
 *   <li>{@link WhatsNewButton} в TopBar — 🎁 icon с unread counter</li>
 *   <li>{@link UpdateBanner} «Что нового» button — когда update detected</li>
 * </ol>
 *
 * <p>При open: marks latest version как seen в localStorage. На next visit
 * unread counter = 0 пока не shipped новая версия.
 *
 * <p>Source: `docs/changelog.md` через `useChangelog` hook (Vite `?raw` import).
 */
export type WhatsNewModalProps = {
  open: boolean
  onClose: () => void
}

export function WhatsNewModal({ open, onClose }: WhatsNewModalProps) {
  const { t } = useTranslation()
  const entries = useChangelog()
  const [lastSeen, setLastSeen] = useState<string | null>(() => readLastSeenVersion())

  // На modal open — persist latest version как seen (red dot disappears
  // для next session, пока новая версия не shipped).
  useEffect(() => {
    if (open && entries.length > 0) {
      const latest = entries[0].version
      writeLastSeenVersion(latest)
      setLastSeen(latest)
    }
  }, [open, entries])

  // Show только 10 recent entries — older releases в полном CHANGELOG.
  const recent = entries.slice(0, 10)

  return (
    <Modal
      isOpen={open}
      onClose={onClose}
      title={
        <span className="inline-flex items-center gap-2">
          <SparkleIcon size={18} weight="fill" className="text-accent" />
          {t('whatsnew.title', { defaultValue: 'Что нового в Ordinis' })}
        </span>
      }
      description={t('whatsnew.description', {
        defaultValue:
          'Последние релизы продукта. Обновления автоматически попадают на ваш сервер при следующем deploy.',
      })}
      maxWidth="max-w-2xl"
    >
      <div className="max-h-[60vh] overflow-y-auto -mx-1 px-1">
        {recent.length === 0 ? (
          <div className="text-mute text-body py-8 text-center">
            {t('whatsnew.empty', {
              defaultValue: 'Список релизов пока пуст.',
            })}
          </div>
        ) : (
          <ul className="space-y-5">
            {recent.map((entry) => (
              <li key={entry.version}>
                <EntryCard
                  entry={entry}
                  isUnread={isVersionNewer(entry.version, lastSeen)}
                />
              </li>
            ))}
          </ul>
        )}
      </div>
      <div className="mt-4 pt-3 border-t border-line-2 text-cap text-mute text-center">
        {t('whatsnew.footer', {
          defaultValue: 'Полный список изменений — см. CHANGELOG.md в репозитории.',
        })}
      </div>
    </Modal>
  )
}

function EntryCard({ entry, isUnread }: { entry: ChangelogEntry; isUnread: boolean }) {
  const { t } = useTranslation()
  return (
    <div
      className={cn(
        'rounded-lg border p-4 transition-colors',
        isUnread
          ? 'border-accent/40 bg-accent-bg/40'
          : 'border-line bg-surface',
      )}
    >
      <div className="flex items-baseline gap-2 mb-3">
        <span className="text-title-sm text-ink font-semibold tabular-nums">
          v{entry.version}
        </span>
        {entry.date && (
          <span className="text-cap text-mute tabular-nums">{entry.date}</span>
        )}
        {isUnread && (
          <Badge variant="info" className="ml-auto">
            {t('whatsnew.newBadge', { defaultValue: 'новое' })}
          </Badge>
        )}
      </div>
      {entry.sections.length === 0 ? (
        <div className="text-cell text-mute italic">
          {t('whatsnew.entryEmpty', {
            defaultValue: 'Описание не указано.',
          })}
        </div>
      ) : (
        <div className="space-y-3">
          {entry.sections.map((section, i) => (
            <SectionBlock key={i} section={section} />
          ))}
        </div>
      )}
    </div>
  )
}

function SectionBlock({ section }: { section: ChangelogSection }) {
  return (
    <div>
      <h4 className="text-cap text-mute font-semibold mb-1.5 inline-flex items-center gap-1.5">
        {section.emoji && <span aria-hidden>{section.emoji}</span>}
        <span>{section.title}</span>
      </h4>
      <ul className="space-y-1 ml-1">
        {section.items.map((item, i) => (
          <li key={i} className="text-body text-ink-2 flex items-start gap-1.5">
            <span className="text-mute mt-1 shrink-0" aria-hidden>•</span>
            <span className="min-w-0 flex-1">
              {item.scope && (
                <span className="text-mono text-cap text-accent mr-1.5">{item.scope}:</span>
              )}
              <span>{item.description}</span>
              {item.commit && item.commitUrl && (
                <a
                  href={item.commitUrl}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="text-mono text-cap text-mute hover:text-ink ml-1.5"
                  title={`Commit ${item.commit}`}
                >
                  {item.commit.substring(0, 7)}
                </a>
              )}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}
