website-01/app/admin/login/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { adminApi } from '@/lib/admin-services';
import { useAdminStore } from '@/store/adminStore';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Building2,
  CheckCircle2,
  User,
  Lock,
  Loader2,
} from 'lucide-react';

const schema = z.object({
  username: z.string().min(1, '请输入账号'),
  password: z.string().min(1, '请输入密码'),
});
type FormData = z.infer<typeof schema>;

export default function AdminLoginPage() {
  const router = useRouter();
  const search = useSearchParams();
  const { setLogin, token } = useAdminStore();
  const [serverError, setServerError] = useState<string | null>(null);

  // 已登录则直接跳到后台
  useEffect(() => {
    if (token) {
      const redirect = search.get('redirect');
      router.replace(redirect || '/admin/dashboard');
    }
  }, [token, router, search]);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { username: 'admin', password: '' },
  });

  const onSubmit = async (data: FormData) => {
    setServerError(null);
    try {
      const res = await adminApi.login(data);
      setLogin(res.token, res.admin);
      const redirect = search.get('redirect');
      router.replace(redirect || '/admin/dashboard');
    } catch (e) {
      setServerError((e as Error).message);
    }
  };

  return (
    <div className="grid min-h-screen lg:grid-cols-2">
      {/* ===== 左侧：品牌展示区（深色，呼应首页 Hero）===== */}
      <div className="relative hidden overflow-hidden bg-[#0a0e27] lg:flex lg:flex-col lg:justify-between lg:p-12">
        {/* 渐变底 + 辉光 + 几何图形 */}
        <div className="pointer-events-none absolute inset-0">
          <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e27] via-[#0d1130] to-[#0a0e27]" />
          <div className="absolute -left-20 top-0 h-72 w-72 rounded-full bg-brand-600/15 blur-[120px]" />
          <div className="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-brand-700/15 blur-[120px]" />
          <div
            className="hero-anim-spin absolute right-10 top-16 h-32 w-32 rounded-full border-2 border-dashed border-white/10"
            style={{ animationDuration: '24s' }}
          />
          <div className="hero-anim-float absolute bottom-20 left-[8%] h-12 w-12 rounded-lg border border-white/10 bg-white/[0.03]" />
          <div className="hero-anim-pulse absolute left-[18%] top-[28%] h-2.5 w-2.5 rounded-full bg-brand-400/40" />
          <div className="hero-anim-float-rev absolute right-[14%] bottom-[24%] rotate-45 h-8 w-8 rounded-sm border border-white/10 bg-white/[0.03]" />
          <div className="hero-anim-float absolute right-[22%] top-[20%] text-2xl font-light text-white/10">+</div>
        </div>

        {/* Logo */}
        <div className="relative z-10 flex items-center gap-2">
          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-brand-500 to-brand-700 text-white shadow-lg shadow-brand-600/30 ring-1 ring-inset ring-white/10">
            <Building2 className="h-5 w-5" />
          </span>
          <span className="text-lg font-bold text-white">智管物业</span>
        </div>

        {/* 标语 */}
        <div className="relative z-10">
          <h2 className="text-3xl font-bold leading-tight text-white xl:text-4xl">
            让物业管理
            <br />
            <span className="bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
              像发微信一样简单
            </span>
          </h2>
          <p className="mt-4 text-lg text-slate-400">懂物业，更懂&ldquo;省&rdquo;心</p>

          <div className="mt-10 space-y-3">
            {[
              '一站式物业管理 SaaS 平台',
              '覆盖缴费、报修、公告、巡检全流程',
              '三端协同，助力物业降本增效',
            ].map((t) => (
              <div key={t} className="flex items-center gap-2.5 text-sm text-slate-300">
                <CheckCircle2 className="h-4 w-4 shrink-0 text-brand-400" />
                {t}
              </div>
            ))}
          </div>
        </div>

        {/* 版权 */}
        <div className="relative z-10 text-xs text-slate-500">
          © {new Date().getFullYear()} 智管物业 · 物业管理 SaaS 专家
        </div>
      </div>

      {/* ===== 右侧：表单区（干净浅色）===== */}
      <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
        <div className="w-full max-w-sm">
          {/* 移动端 Logo（左侧面板在小屏隐藏）*/}
          <div className="mb-10 flex items-center gap-2 lg:hidden">
            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 text-white shadow-md shadow-slate-900/25 ring-1 ring-inset ring-white/10">
              <Building2 className="h-5 w-5" />
            </span>
            <span className="text-lg font-bold text-slate-900">智管物业</span>
          </div>

          <div className="mb-8">
            <span className="text-xs font-semibold uppercase tracking-widest text-brand-600">
              Admin
            </span>
            <h1 className="mt-2 text-2xl font-bold text-slate-900">欢迎回来</h1>
            <p className="mt-1.5 text-sm text-slate-500">登录智管物业管理后台</p>
          </div>

          {search.get('expired') && (
            <div className="mb-5 rounded-lg border border-yellow-200 bg-yellow-50 px-3.5 py-2.5 text-sm text-yellow-700">
              登录已过期，请重新登录
            </div>
          )}

          <form
            onSubmit={(e) => {
              e.preventDefault();
              void handleSubmit(onSubmit)(e);
            }}
            className="space-y-5"
          >
            <div className="space-y-1.5">
              <Label htmlFor="username">账号</Label>
              <div className="relative">
                <User className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <Input
                  id="username"
                  className="pl-9"
                  placeholder="请输入账号"
                  {...register('username')}
                />
              </div>
              {errors.username && (
                <p className="text-xs text-red-600">{errors.username.message}</p>
              )}
            </div>

            <div className="space-y-1.5">
              <Label htmlFor="password">密码</Label>
              <div className="relative">
                <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <Input
                  id="password"
                  type="password"
                  className="pl-9"
                  placeholder="请输入密码"
                  {...register('password')}
                />
              </div>
              {errors.password && (
                <p className="text-xs text-red-600">{errors.password.message}</p>
              )}
            </div>

            {serverError && (
              <p className="text-sm text-red-600">{serverError}</p>
            )}

            <Button
              type="submit"
              className="w-full bg-slate-900 text-white hover:bg-black"
              disabled={isSubmitting}
            >
              {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              登录
            </Button>
          </form>

          {/* <p className="mt-8 text-center text-xs text-slate-400">
            初始账号：admin / 密码：123456
          </p> */}
        </div>
      </div>
    </div>
  );
}