import { useCallback, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeft, RefreshCw } from 'lucide-react';
import { toast } from 'sonner';
import { api } from '@/api';
import { cn, errMessage } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { MarkdownText } from '@/components/MarkdownText';
import { EmptyState, PageHeader } from '@/components/ui/app-primitives';

interface ReleaseHistoryData {
  history?: string;
  version?: string;
  updated_at?: string;
}

function formatDateTime(value: string | null | undefined): string | null {
  if (!value) return null;
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString();
}

function parseImageLine(line: string): { alt: string; src: string } | null {
  const match = line.match(/^!\[([^\]\n]*)\]\(([^)\s]+)\)$/);
  if (!match) return null;
  return { alt: match[1] ?? '', src: match[2] ?? '' };
}

function HistoryLine({ line, index }: { line: string; index: number }) {
  const trimmed = line.trim();
  const image = parseImageLine(trimmed);

  if (!trimmed) return <div key={index} className="h-3" />;
  if (trimmed === '---') return <div key={index} className="my-5 border-t border-border" />;
  if (image) {
    return (
      <figure key={index} className="my-6 flex justify-center">
        <div className="w-full max-w-2xl overflow-hidden rounded-xl border border-border bg-muted/20 shadow-sm">
          <img
            src={image.src}
            alt={image.alt}
            loading="lazy"
            className="aspect-[16/10] w-full object-contain"
          />
        </div>
      </figure>
    );
  }

  if (trimmed.startsWith('# ')) {
    return (
      <h1 key={index} className="text-2xl font-bold tracking-tight mb-5">
        <MarkdownText text={trimmed.slice(2)} />
      </h1>
    );
  }

  if (trimmed.startsWith('## ')) {
    return (
      <h2 key={index} className="text-lg font-semibold tracking-tight mt-6 mb-3">
        <MarkdownText text={trimmed.slice(3)} />
      </h2>
    );
  }

  if (trimmed.startsWith('### ')) {
    return (
      <h3 key={index} className="text-xs font-bold uppercase tracking-widest text-muted-foreground mt-5 mb-2">
        <MarkdownText text={trimmed.slice(4)} />
      </h3>
    );
  }

  if (trimmed.startsWith('- ')) {
    return (
      <div key={index} className="flex items-start gap-2 py-1.5 text-sm leading-6">
        <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70" />
        <p><MarkdownText text={trimmed.slice(2)} /></p>
      </div>
    );
  }

  return (
    <p key={index} className="text-sm leading-6 text-muted-foreground">
      <MarkdownText text={line} />
    </p>
  );
}

export default function ReleaseNotesPage() {
  const [data, setData] = useState<ReleaseHistoryData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      setData(await api.releaseHistory() as ReleaseHistoryData);
    } catch (err) {
      setError(errMessage(err, 'Failed to load release notes.'));
      toast.error(errMessage(err, 'Failed to load release notes.'));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => { load(); }, [load]);

  const history = data?.history || '';

  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,oklch(var(--primary)/0.10),transparent_32rem),radial-gradient(circle_at_top_right,oklch(var(--accent)/0.08),transparent_24rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] px-4 py-8 text-foreground sm:px-6">
      <main className="mx-auto w-full max-w-4xl space-y-5">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link to="/about">
            <ArrowLeft className="h-3.5 w-3.5" />
            About
          </Link>
        </Button>

        <PageHeader
          eyebrow="Product history"
          title="Release Notes"
          description={(
            <>
              {data?.version ? `Current version v${data.version}` : 'Full project changelog'}
              {data?.updated_at ? ` · Updated ${formatDateTime(data.updated_at)}` : ''}
            </>
          )}
          glyph="analytics"
          actions={(
            <Button variant="outline" size="sm" onClick={load} disabled={loading}>
              <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', loading && 'animate-spin')} />
              Refresh
            </Button>
          )}
        />

      <div className="table-surface">
        {loading ? (
          <div className="p-6 space-y-3 animate-pulse">
            <div className="h-4 w-40 rounded bg-muted" />
            <div className="h-3 w-full rounded bg-muted" />
            <div className="h-3 w-5/6 rounded bg-muted" />
            <div className="h-3 w-3/4 rounded bg-muted" />
          </div>
        ) : error ? (
          <EmptyState
            title="Unable to load release notes"
            description={error}
            className="border-0 shadow-none"
          />
        ) : !history.trim() ? (
          <EmptyState
            title="No release notes are available"
            description="Check back after the next release."
            className="border-0 shadow-none"
          />
        ) : (
          <div className="p-6">
            {history.split('\n').map((line, index) => (
              <HistoryLine key={`${index}-${line}`} line={line} index={index} />
            ))}
          </div>
        )}
      </div>
      </main>
    </div>
  );
}
