import { useState } from 'react';
import { Button, Form, Input, Message } from '@arco-design/web-react';
import { IconLock, IconUser } from '@arco-design/web-react/icon';
import { useNavigate } from 'react-router-dom';
import { login } from '../api/auth';
import { API_BASE_URL, TOKEN_KEY } from '../api/client';

function LoginPage() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const onSubmit = async (values: { username: string; password: string }) => {
    setLoading(true);
    try {
      const data = await login(values);
      localStorage.setItem(TOKEN_KEY, data.accessToken);
      Message.success('登录成功');
      navigate('/dashboard', { replace: true });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="grid min-h-screen grid-cols-1 bg-[#f7f8fa] min-[901px]:grid-cols-[minmax(520px,0.95fr)_minmax(420px,1fr)]">
      <div className="relative hidden flex-col justify-between overflow-hidden px-14 pb-12 pt-11 text-white after:pointer-events-none after:absolute after:inset-0 after:bg-[linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0))] min-[901px]:flex bg-[linear-gradient(135deg,rgba(15,23,42,0.98)_0%,rgba(22,93,255,0.94)_54%,rgba(15,118,110,0.96)_100%),radial-gradient(circle_at_18%_18%,rgba(255,255,255,0.18),transparent_28%),radial-gradient(circle_at_82%_72%,rgba(255,255,255,0.12),transparent_32%)]">
        <div className="relative z-[1] flex items-center gap-2.5 font-bold">
          <span className="grid h-7 w-7 place-items-center rounded-md bg-brand text-sm text-white">CT</span>
          <span>cth-tk-admin</span>
        </div>
        <div className="relative z-[1] max-w-[640px]">
          <span className="mb-[18px] inline-flex rounded-full border border-white/20 px-3 py-1.5 text-[13px] text-white/80">TikTok 短剧运营后台</span>
          <h1 className="mb-4 mt-0 text-[42px] leading-[1.16]">CTH TikTok 短剧管理后台</h1>
          <p className="m-0 max-w-[560px] text-base leading-[1.8] text-white/75">集中处理短剧内容、剧集发布、订单支付、播放日志和系统权限，帮助运营人员稳定管理短剧业务。</p>
        </div>
        <div className="relative z-[1] grid max-w-[640px] grid-cols-3 gap-3">
          <div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">内容</strong><span className="text-white/70">短剧与剧集管理</span></div>
          <div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">权限</strong><span className="text-white/70">角色化后台授权</span></div>
          <div className="rounded-lg border border-white/20 bg-white/10 p-4 backdrop-blur-[10px]"><strong className="mb-1.5 block text-xl">日志</strong><span className="text-white/70">请求与播放追踪</span></div>
        </div>
      </div>
      <div className="flex items-center justify-center bg-[linear-gradient(180deg,rgba(255,255,255,0.86),rgba(247,248,250,0.94)),#f7f8fa] p-12">
        <div className="w-full max-w-[420px] rounded-lg border border-line bg-white p-9 shadow-login">
          <div className="mb-[30px] flex items-center gap-3.5">
            <span className="grid h-11 w-11 place-items-center rounded-lg bg-brand font-bold text-white">CT</span>
            <div>
              <h2 className="mb-2 mt-0 text-2xl">后台登录</h2>
              <p className="m-0 text-muted">使用管理员账号进入控制台。</p>
            </div>
          </div>
          <Form layout="vertical" onSubmit={onSubmit} initialValues={{ username: 'admin', password: 'admin123' }}>
            <Form.Item label="用户名" field="username" rules={[{ required: true }]}>
              <Input prefix={<IconUser />} placeholder="admin" />
            </Form.Item>
            <Form.Item label="密码" field="password" rules={[{ required: true }]}>
              <Input.Password prefix={<IconLock />} placeholder="admin123" />
            </Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} long>登录</Button>
          </Form>
          <div className="mt-[22px] border-t border-canvas pt-[18px] text-xs text-muted">API 服务：{API_BASE_URL}</div>
        </div>
      </div>
    </div>
  );
}

export default LoginPage;