import { useState } from "react";
import { useNavigate, Link } from "react-router";
import { Hexagon, User, Lock, Smartphone, ShieldCheck, Eye, EyeOff } from "lucide-react";
import { toast } from "sonner";
import { Button } from "../components/ui/button";
import { cn } from "../components/ui/utils";
import { XiaobinAssistant } from "../components/XiaobinAssistant";

type Mode = "employee" | "vendor";
type Tab = "account" | "mobile";
type LoginRole = "purchaser" | "supplier" | "expert" | "other";

const ROLE_BUTTONS: { id: LoginRole; label: string; en: string }[] = [
  { id: "purchaser", label: "采购人", en: "Purchaser" },
  { id: "supplier", label: "供应商", en: "Supplier" },
  { id: "expert", label: "专家", en: "Expert" },
  { id: "other", label: "其他", en: "Other" },
];

export function LoginPage() {
  const navigate = useNavigate();
  const [mode, setMode] = useState<Mode>("vendor");
  const [tab, setTab] = useState<Tab>("account");
  const [loginRole, setLoginRole] = useState<LoginRole>("supplier");
  const [account, setAccount] = useState("zhangwei");
  const [pwd, setPwd] = useState("123456");
  const [showPwd, setShowPwd] = useState(false);
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [remember, setRemember] = useState(true);
  const [countdown, setCountdown] = useState(0);

  function sendCode() {
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      toast.error("请输入正确的手机号");
      return;
    }
    toast.success("验证码已发送，请注意查收");
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown((c) => {
        if (c <= 1) {
          clearInterval(timer);
          return 0;
        }
        return c - 1;
      });
    }, 1000);
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    if (mode === "employee") {
      toast.info("正在跳转至集团 IAM 统一身份认证…");
      setTimeout(() => navigate("/app"), 800);
      return;
    }
    navigate("/app");
  }

  function selectRole(role: LoginRole) {
    setLoginRole(role);
    // 与现有登录逻辑联动：供应商走外部账号，其他角色默认走内部员工
    if (role === "supplier") {
      setMode("vendor");
      setTab("account");
    } else {
      setMode("employee");
      setTab("account");
    }
  }

  return (
    <div className="min-h-screen bg-[#f3f5f8]">
      <header className="border-b bg-[#0f4ea6] text-white">
        <div className="mx-auto flex h-14 max-w-[1200px] items-center justify-between px-6">
          <Link to="/portal" className="flex items-center gap-2">
            <Hexagon className="size-5" />
            <span className="text-base font-semibold">滨化电子招标投标交易网</span>
          </Link>
          <div className="text-xs text-white/80">欢迎登录 STP 系统</div>
        </div>
      </header>

      <main className="mx-auto grid max-w-[1200px] grid-cols-12 gap-4 px-6 py-8">
        <section className="col-span-12 border bg-white p-5 lg:col-span-4">
          <h2 className="text-lg font-semibold">用户登录</h2>
          <p className="mt-1 text-xs text-muted-foreground">
            还没有账号？
            <Link to="/register" className="ml-1 text-primary hover:underline">去注册</Link>
          </p>

          {/* 角色登录按钮：对齐万华站点风格 */}
          <div className="mt-4 grid grid-cols-2 gap-2">
            {ROLE_BUTTONS.map((r) => (
              <button
                key={r.id}
                type="button"
                onClick={() => selectRole(r.id)}
                className={cn(
                  "border px-3 py-3 text-center transition-colors",
                  loginRole === r.id
                    ? "border-primary bg-[#eef5ff] text-primary"
                    : "border-[#d9dee7] bg-white text-[#374151] hover:border-primary/60 hover:bg-[#f8fbff]",
                )}
              >
                <div className="text-sm font-medium leading-none">{r.label}</div>
                <div className="mt-1 text-[11px] text-[#6b7280]">{r.en}</div>
              </button>
            ))}
          </div>

          <div className="mt-4 flex border bg-[#f8fafc] p-1">
            {(
              [
                { id: "employee" as Mode, label: "内部员工" },
                { id: "vendor" as Mode, label: "外部账号" },
              ]
            ).map((m) => (
              <button
                key={m.id}
                type="button"
                onClick={() => setMode(m.id)}
                className={cn(
                  "flex-1 py-2 text-sm",
                  mode === m.id ? "bg-primary font-medium text-white" : "text-muted-foreground",
                )}
              >
                {m.label}
              </button>
            ))}
          </div>
          <p className="mt-1 text-[11px] text-muted-foreground">
            当前角色：{ROLE_BUTTONS.find((x) => x.id === loginRole)?.label}
          </p>

          <div className="mt-3 flex border-b border-border">
            {(
              [
                { id: "account" as Tab, label: "账号登录" },
                { id: "mobile" as Tab, label: "手机验证码" },
              ]
            ).map((t) => (
              <button
                key={t.id}
                type="button"
                onClick={() => setTab(t.id)}
                className={cn(
                  "relative px-4 py-2 text-sm",
                  tab === t.id ? "font-medium text-primary" : "text-muted-foreground",
                )}
              >
                {t.label}
                {tab === t.id && <span className="absolute inset-x-1 bottom-0 h-0.5 bg-primary" />}
              </button>
            ))}
          </div>

          <form className="mt-4 space-y-3" onSubmit={submit}>
            {tab === "account" ? (
              <>
                <div>
                  <label className="mb-1.5 block text-sm text-[#4a5568]">账号 / 手机号</label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <input
                      value={account}
                      onChange={(e) => setAccount(e.target.value)}
                      className="h-11 w-full rounded-lg border bg-input-background pl-10 pr-3 text-sm outline-none transition-colors focus:border-primary"
                      placeholder="请输入您的账号"
                    />
                  </div>
                </div>
                <div>
                  <label className="mb-1.5 block text-sm text-[#4a5568]">密码</label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <input
                      type={showPwd ? "text" : "password"}
                      value={pwd}
                      onChange={(e) => setPwd(e.target.value)}
                      className="h-11 w-full rounded-lg border bg-input-background pl-10 pr-10 text-sm outline-none transition-colors focus:border-primary"
                      placeholder="请输入您的密码"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPwd((s) => !s)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                    >
                      {showPwd ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                    </button>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div>
                  <label className="mb-1.5 block text-sm text-[#4a5568]">手机号</label>
                  <div className="relative">
                    <Smartphone className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <input
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      className="h-11 w-full rounded-lg border bg-input-background pl-10 pr-3 text-sm outline-none transition-colors focus:border-primary"
                      placeholder="请输入11位手机号"
                    />
                  </div>
                </div>
                <div>
                  <label className="mb-1.5 block text-sm text-[#4a5568]">验证码</label>
                  <div className="flex gap-3">
                    <div className="relative flex-1">
                      <ShieldCheck className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                      <input
                        value={code}
                        onChange={(e) => setCode(e.target.value)}
                        className="h-11 w-full rounded-lg border bg-input-background pl-10 pr-3 text-sm outline-none transition-colors focus:border-primary"
                        placeholder="6 位验证码"
                      />
                    </div>
                    <button
                      type="button"
                      onClick={sendCode}
                      disabled={countdown > 0}
                      className="h-11 w-28 shrink-0 rounded-lg border border-primary text-sm font-medium text-primary transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:border-border disabled:text-muted-foreground"
                    >
                      {countdown > 0 ? `${countdown}s 后重发` : "发送验证码"}
                    </button>
                  </div>
                </div>
              </>
            )}

            <div className="flex items-center justify-between text-sm">
              <label className="flex items-center gap-2 text-muted-foreground">
                <input
                  type="checkbox"
                  checked={remember}
                  onChange={(e) => setRemember(e.target.checked)}
                  className="size-4 rounded border-border accent-[var(--primary)]"
                />
                记住我
              </label>
              <button type="button" className="text-primary hover:underline">
                忘记密码？
              </button>
            </div>

            <Button type="submit" className="h-10 w-full text-base">
              登 录
            </Button>
          </form>

          <div className="mt-4 text-center text-sm text-muted-foreground">
            还没有账号？
            {mode === "employee" ? (
              <span className="ml-1 text-muted-foreground/70">员工账号由 HR 系统统一同步</span>
            ) : (
              <Link to="/register" className="ml-1 font-medium text-primary hover:underline">
                立即注册
              </Link>
            )}
          </div>
          <div className="mt-4 border bg-[#fffbea] px-3 py-2 text-xs text-[#92400e]">
            原 SRM 注册用户，可直接使用 SRM 账号登录，无需重复注册。
          </div>

          <div className="mt-4 text-center">
            <Link to="/portal" className="text-xs text-muted-foreground hover:text-primary">
              返回门户首页
            </Link>
          </div>
        </section>

        <section className="col-span-12 space-y-4 lg:col-span-8">
          <div className="border bg-white">
            <div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">交易信息</div>
            <ul className="space-y-1 p-4 text-sm">
              {[
                ["[公开招标] 扣电测试柜框架", "2026-07-13"],
                ["[公开招标] 2026年橡胶密封件框架招标O型圈", "2026-07-13"],
                ["[公开招标] 万华莱州100MW分散式风电项目EPC工程总承包[变更公告]", "2026-07-13"],
                ["[公开招标] 万华旋塞阀框架包一 金属旋塞阀、包二 衬氟旋塞阀", "2026-07-10"],
                ["[公开招标] 改性TPU熟化料仓", "2026-07-09"],
              ].map(([title, date]) => (
                <li key={title} className="flex items-center gap-3 border-b border-dashed py-1.5">
                  <span className="line-clamp-1 flex-1 hover:text-primary">{title}</span>
                  <span className="text-xs text-muted-foreground">{date}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="border bg-white">
              <div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">通知公告</div>
              <div className="space-y-1 p-4 text-sm text-muted-foreground">
                <p>万华蓬莱园区高温管道耐火衬里类物资供应商招募</p>
                <p>万华化学桨叶冷却机类供应商招募</p>
                <p>万华化学洗车平台服务类供应商招募</p>
              </div>
            </div>
            <div className="border bg-white">
              <div className="border-b bg-[#f8fafc] px-4 py-3 text-sm font-semibold">操作指南</div>
              <div className="space-y-1 p-4 text-sm text-muted-foreground">
                <p>供应商注册操作指南</p>
                <p>投标文件制作软件操作手册</p>
                <p>系统使用常见问题处理</p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <XiaobinAssistant pageType="login" />
    </div>
  );
}