import { useCallback, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  ArrowLeft,
  ArrowUpCircle,
  CheckCircle2,
  Info,
  Loader2,
  Sparkles,
  AlertCircle,
} from 'lucide-react';
import { api } from '@/api';
import { useAuth } from '@/hooks/useAuth';
import { APP_VERSION } from '@/lib/version';
import { BRAND } from '@/lib/brand';
import { BrandMark } from '@/components/brand/Brand';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { PageHeader } from '@/components/ui/app-primitives';

const REPOSITORY_URL = 'https://dream.scheller.ltd/null/BillTracker';

interface UpdateStatus {
  has_update?: boolean;
  latest_release_url?: string | null;
  latest_version?: string;
  up_to_date?: boolean | null;
  error?: string | null;
}

interface AboutInfo {
  version?: string;
  name?: string;
  description?: string;
  stack?: { backend?: string; database?: string };
}

function UpdateBadge({ status, loading }: { status: UpdateStatus | null; loading: boolean }) {
  if (loading) {
    return (
      <span className="inline-flex items-center gap-1 text-xs text-muted-foreground/60">
        <Loader2 className="h-3 w-3 animate-spin shrink-0" />
        Checking…
      </span>
    );
  }
  if (!status) return null;

  if (status.has_update) {
    return (
      <a
        href={status.latest_release_url || '#'}
        target="_blank"
        rel="noopener noreferrer"
        className="inline-flex items-center gap-1 text-xs font-medium text-amber-400 hover:text-amber-300 transition-colors"
      >
        <ArrowUpCircle className="h-3 w-3 shrink-0" />v{status.latest_version} available
      </a>
    );
  }

  if (status.up_to_date) {
    return (
      <span className="inline-flex items-center gap-1 text-xs text-emerald-500/80">
        <CheckCircle2 className="h-3 w-3 shrink-0" />
        Up to date
      </span>
    );
  }

  // up_to_date is null — check failed
  return (
    <span
      className="inline-flex items-center gap-1 text-xs text-muted-foreground/50"
      title={status.error || 'Update check failed'}
    >
      <AlertCircle className="h-3 w-3 shrink-0" />
      Could not check
    </span>
  );
}

export default function AboutPage() {
  const { user } = useAuth();

  const [about, setAbout] = useState<AboutInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
  const [updateLoading, setUpdateLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setAbout((await api.about()) as AboutInfo);
    } finally {
      setLoading(false);
    }
  }, []);

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

  useEffect(() => {
    setUpdateLoading(true);
    api
      .updateStatus()
      .then((d) => setUpdateStatus(d as UpdateStatus))
      .catch(() => setUpdateStatus(null))
      .finally(() => setUpdateLoading(false));
  }, []);

  // Use Vite-injected APP_VERSION as the immediate source of truth.
  // api.about() version is shown once loaded as a cross-check; they should always match.
  const displayVersion = about?.version ?? APP_VERSION;

  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-3xl space-y-5">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link to={user ? '/' : '/login'}>
            <ArrowLeft className="h-3.5 w-3.5" />
            {user ? 'Back to app' : 'Back'}
          </Link>
        </Button>

        <Card className="overflow-hidden border-border/70 bg-card/95 shadow-sm" id="about-card">
          <CardHeader>
            <div className="mb-4 flex justify-center rounded-xl border border-border/70 bg-[radial-gradient(circle_at_top,oklch(var(--primary)/0.14),transparent_70%),oklch(var(--muted)/0.20)] px-5 py-7">
              <BrandMark className="h-auto w-full max-w-[18rem] drop-shadow-[0_10px_30px_rgba(0,0,0,0.16)]" />
            </div>
            <PageHeader
              eyebrow="About"
              title={about?.name || BRAND.name}
              description={about?.description || BRAND.tagline}
              glyph="security"
            />
            <CardTitle className="sr-only">{about?.name || BRAND.name}</CardTitle>
            <CardDescription>
              <span className="sr-only">{about?.description || BRAND.tagline}</span>
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-5">
            <div className="grid gap-3 sm:grid-cols-3">
              {/* Version card — shows immediately via APP_VERSION, update status alongside */}
              <div className="rounded-xl border border-border/70 bg-background/65 p-4">
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Version
                </p>
                <p className="mt-1 font-mono text-lg font-bold">v{displayVersion}</p>
                <div className="mt-2">
                  <UpdateBadge status={updateStatus} loading={updateLoading} />
                </div>
              </div>

              <div className="rounded-xl border border-border/70 bg-background/65 p-4">
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Backend
                </p>
                <p className="mt-1 text-sm font-semibold">
                  {about?.stack?.backend || 'Node.js / Express'}
                </p>
              </div>
              <div className="rounded-xl border border-border/70 bg-background/65 p-4">
                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Storage
                </p>
                <p className="mt-1 text-sm font-semibold">{about?.stack?.database || 'SQLite'}</p>
              </div>
            </div>

            <div className="rounded-xl border border-border/70 bg-muted/35 p-4">
              <div className="flex items-start gap-3">
                <Info className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <div>
                  <p className="text-sm font-semibold">Private, practical, self-hosted</p>
                  <p className="mt-1 text-sm leading-6 text-muted-foreground">
                    {BRAND.name} is self-hosted software for personal bill planning and history. It
                    is built around local ownership, readable records, and calm monthly review.
                  </p>
                </div>
              </div>
            </div>

            <div className="rounded-xl border border-primary/20 bg-primary/6 p-4">
              <div className="flex items-start gap-3">
                <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <div>
                  <p className="text-sm font-semibold">{BRAND.tagline}</p>
                  <p className="mt-1 text-sm leading-6 text-muted-foreground">
                    The brand direction is premium calm: trustworthy, quiet, and focused on reducing
                    household money stress.
                  </p>
                </div>
              </div>
            </div>

            <div className="flex flex-col gap-2 sm:flex-row">
              <Button asChild>
                <Link to="/release-notes">Release Notes</Link>
              </Button>
              <Button asChild variant="outline">
                <a href={REPOSITORY_URL} target="_blank" rel="noopener noreferrer">
                  Repository
                </a>
              </Button>
              <Button asChild variant="outline">
                <Link to="/privacy">Privacy</Link>
              </Button>
              {user == null && (
                <Button asChild variant="outline">
                  <Link to="/login">Sign In</Link>
                </Button>
              )}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}