import { ArrowRight, GitBranch, GitPullRequest, MessagesSquare, Moon, ShieldCheck, Sun } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useEffect, useState } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'

const features: { icon: LucideIcon; title: string; description: string; className: string }[] = [
  {
    icon: GitBranch,
    title: 'Git 仓库',
    description: '分支、提交、差异与 LFS 大文件由同一套服务承载，克隆与推送使用标准 Git 协议。',
    className: 'md:col-span-4',
  },
  {
    icon: GitPullRequest,
    title: '评审与看板',
    description: '合并请求、Issue 与看板按空间组织，讨论和变更放在同一处。',
    className: 'md:col-span-2',
  },
  {
    icon: MessagesSquare,
    title: '团队聊天',
    description: '按空间划分的聊天房间，消息与通知直达相关成员。',
    className: 'md:col-span-2',
  },
  {
    icon: ShieldCheck,
    title: '统一身份',
    description: '一个账户登录所有空间，二次验证、SSH 密钥与访问密钥集中管理，随时撤销可疑会话。',
    className: 'md:col-span-4',
  },
]

function useTheme() {
  const [theme, setTheme] = useState(() => {
    try {
      return localStorage.getItem('auth-theme') || 'system'
    } catch {
      return 'system'
    }
  })
  const [systemDark, setSystemDark] = useState(() => matchMedia('(prefers-color-scheme: dark)').matches)
  const dark = theme === 'dark' || (theme === 'system' && systemDark)
  useEffect(() => {
    const media = matchMedia('(prefers-color-scheme: dark)')
    const update = () => setSystemDark(media.matches)
    media.addEventListener('change', update)
    return () => media.removeEventListener('change', update)
  }, [])
  useEffect(() => {
    document.documentElement.dataset.theme = dark ? 'dark' : 'light'
  }, [dark])
  function toggle() {
    const next = dark ? 'light' : 'dark'
    setTheme(next)
    try {
      localStorage.setItem('auth-theme', next)
    } catch {}
  }
  return { dark, toggle }
}

function ProductPreview() {
  return (
    <div className="relative">
      <div aria-hidden className="absolute -inset-6 rounded-[32px] bg-accent/10 blur-3xl" />
      <div className="relative overflow-hidden rounded-2xl border border-line bg-field shadow-2xl">
        <div className="flex items-center gap-2 border-b border-line px-4 py-3">
          <span className="size-2.5 rounded-full bg-danger/70" />
          <span className="size-2.5 rounded-full bg-accent/70" />
          <span className="size-2.5 rounded-full bg-success/70" />
          <span className="ml-2 font-latin text-xs text-muted">gitdata.ai / api</span>
        </div>
        <div className="grid grid-cols-[112px_1fr]">
          <aside className="space-y-1 border-r border-line p-3 text-xs">
            <p className="mb-2 font-medium text-ink">仓库</p>
            <p className="rounded-md bg-page px-2 py-1.5 text-ink">api</p>
            <p className="px-2 py-1.5 text-muted">看板</p>
            <p className="px-2 py-1.5 text-muted">聊天</p>
            <p className="px-2 py-1.5 text-muted">成员</p>
          </aside>
          <div className="space-y-2 p-4">
            <div className="flex items-center gap-2 font-latin text-xs text-muted">
              <GitBranch size={12} />
              main
            </div>
            <div className="rounded-lg border border-line bg-page px-3 py-2 font-latin text-xs text-ink">
              feat: 统一仓库与看板的访问校验
            </div>
            <div className="rounded-lg border border-line bg-page px-3 py-2 font-latin text-xs text-muted">
              fix: 修正聊天房间通知去重
            </div>
            <div className="flex items-center gap-1.5 pt-1 text-xs text-success">
              <GitPullRequest size={12} />
              评审已通过
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function FeatureCard({
  icon: Icon,
  title,
  description,
  className = '',
}: {
  icon: LucideIcon
  title: string
  description: string
  className?: string
}) {
  return (
    <article className={`landing-card rounded-2xl border border-line bg-field/60 p-6 backdrop-blur ${className}`}>
      <span className="mb-4 flex size-10 items-center justify-center rounded-xl border border-line bg-page text-accent">
        <Icon size={18} strokeWidth={1.8} />
      </span>
      <h3 className="mb-2 text-base font-semibold">{title}</h3>
      <p className="text-sm leading-[1.7] text-muted">{description}</p>
    </article>
  )
}

function LandingPage() {
  return (
    <>
      <section className="grid items-center gap-12 py-14 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16 lg:py-24">
        <div className="flex flex-col items-start gap-6">
          <span className="inline-flex items-center gap-2 rounded-full border border-line bg-field/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
            <span className="size-1.5 rounded-full bg-accent" />
            代码托管 · 评审 · 聊天
          </span>
          <h1 className="text-[clamp(2.4rem,5vw,4rem)] leading-[1.08] font-semibold tracking-[-1.2px] text-balance">
            代码、协作与沟通
            <br className="hidden sm:block" />
            <span className="bg-gradient-to-r from-accent to-accent-text bg-clip-text text-transparent">
              集中在一个平台
            </span>
          </h1>
          <p className="max-w-xl text-base leading-[1.7] text-muted md:text-lg">
            GitDataAI 提供 Git 仓库托管、合并请求评审、Issue 看板与团队聊天，并用一套账户打通所有空间与应用的访问权限。
          </p>
          <div className="mt-1 flex flex-wrap items-center gap-3">
            {/* 跨应用整页跳转：/auth 是独立的 MPA 文档，不能走客户端路由。 */}
            <a
              href="/auth/login"
              className="group inline-flex min-h-12 items-center justify-center gap-2 rounded-lg bg-primary px-6 text-base font-semibold text-white shadow-[0_10px_30px_-12px_rgba(240,77,0,0.9)] transition-colors hover:bg-primary-hover active:bg-primary-pressed"
            >
              登录账户
              <ArrowRight size={18} className="transition-transform group-hover:translate-x-0.5" />
            </a>
            <a
              href="/auth/register"
              className="inline-flex min-h-12 items-center justify-center rounded-lg border border-control-border bg-field px-6 text-base font-semibold text-ink transition-colors hover:bg-elevated"
            >
              创建账户
            </a>
          </div>
        </div>
        <ProductPreview />
      </section>

      <section className="pb-20 md:pb-28">
        <div className="mb-10 max-w-2xl">
          <h2 className="text-2xl font-semibold tracking-[-0.4px] md:text-3xl">从提交到讨论，都在同一个空间里</h2>
          <p className="mt-3 text-sm leading-[1.7] text-muted md:text-base">
            仓库、评审、看板与聊天按空间组织，权限与身份统一，减少在多个工具之间切换的上下文成本。
          </p>
        </div>
        <div className="grid gap-4 md:grid-cols-6">
          {features.map((feature) => (
            <FeatureCard
              key={feature.title}
              icon={feature.icon}
              title={feature.title}
              description={feature.description}
              className={feature.className}
            />
          ))}
        </div>
      </section>
    </>
  )
}

export function LandingApp() {
  const { dark, toggle } = useTheme()
  const terms = import.meta.env.VITE_TERMS_URL
  const privacy = import.meta.env.VITE_PRIVACY_URL

  return (
    <div className="relative flex min-h-dvh flex-col overflow-hidden bg-page text-ink">
      <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 h-[720px]">
        <div className="landing-aurora absolute inset-0" />
        <div className="landing-grid absolute inset-0" />
      </div>

      <header className="relative z-10 mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-5 md:px-10">
        <a href="/" className="inline-flex items-center gap-2.75" aria-label="GitDataAI 首页">
          <img src="/media/gitdataai-red-panda.png" width={40} height={40} alt="" />
          <span className="font-latin text-[19px] font-semibold tracking-[-0.4px]">GitDataAI</span>
        </a>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={toggle}
            aria-label={dark ? '切换到浅色主题' : '切换到深色主题'}
            className="flex size-11 items-center justify-center rounded-lg border border-transparent text-icon transition-colors hover:border-line hover:bg-elevated hover:text-ink"
          >
            {dark ? <Sun size={18} strokeWidth={1.6} /> : <Moon size={18} strokeWidth={1.6} />}
          </button>
          <a
            href="/auth/login"
            className="inline-flex min-h-10 items-center rounded-lg border border-control-border bg-field/70 px-4 text-sm font-medium text-ink backdrop-blur transition-colors hover:bg-elevated"
          >
            登录
          </a>
        </div>
      </header>

      <main className="relative z-10 mx-auto w-full max-w-6xl flex-1 px-5 md:px-10">
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </main>

      <footer className="relative z-10 border-t border-line/70">
        <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-5 py-6 text-xs text-muted md:px-10">
          <span className="font-latin">© 2026 GitDataAI</span>
          {(terms || privacy) && (
            <nav className="flex items-center gap-4">
              {terms && (
                <a href={terms} target="_blank" rel="noopener noreferrer" className="hover:underline">
                  服务条款
                </a>
              )}
              {privacy && (
                <a href={privacy} target="_blank" rel="noopener noreferrer" className="hover:underline">
                  隐私政策
                </a>
              )}
            </nav>
          )}
        </div>
      </footer>
    </div>
  )
}