"use client";

import { useState } from "react";
import Link from "next/link";
import { CalendarDays, CalendarCheck, LogIn, Loader2 } from "lucide-react";
import { apiDoCheckin, type CheckinStatus } from "@/lib/api";

/**
 * 每日签到卡（右栏）。
 * initial 为 undefined 表示游客；否则为 SSR 注入的登录用户签到状态。
 */
export default function CheckinCard({ initial }: { initial?: CheckinStatus | null }) {
  const [status, setStatus] = useState<CheckinStatus | null>(initial ?? null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  // 游客态
  if (initial === undefined) {
    return (
      <section className="j13-module" aria-label="每日签到">
        <div className="flex items-center gap-3">
          <span
            className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
          >
            <CalendarDays size={19} />
          </span>
          <div className="min-w-0">
            <p className="text-[14px] font-bold" style={{ color: "var(--ink)" }}>
              每日签到
            </p>
            <p className="meta text-[12px] mt-0.5">登录后每日签到领积分</p>
          </div>
        </div>
        <Link href="/login?redirect=/" className="btn btn-line btn-sm w-full justify-center mt-3.5">
          <LogIn size={14} /> 登录后签到
        </Link>
      </section>
    );
  }

  const checked = status?.checked_today ?? false;

  async function doCheckin() {
    if (loading || checked) return;
    setLoading(true);
    setError("");
    try {
      setStatus(await apiDoCheckin());
    } catch (e) {
      setError(e instanceof Error ? e.message : "签到失败");
    } finally {
      setLoading(false);
    }
  }

  return (
    <section className="j13-module" aria-label="每日签到">
      <div className="flex items-center gap-3">
        <span
          className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
          style={{
            background: checked ? "var(--accent-soft)" : "var(--panel-2)",
            color: checked ? "var(--accent)" : "var(--ink-2)",
          }}
        >
          {checked ? <CalendarCheck size={19} /> : <CalendarDays size={19} />}
        </span>
        <div className="flex-1 min-w-0">
          <p className="text-[14px] font-bold" style={{ color: "var(--ink)" }}>
            每日签到
          </p>
          <p className="meta text-[12px] mt-0.5">
            {checked
              ? `已连续签到 ${status?.streak ?? 0} 天 · 累计 ${status?.total_points ?? 0} 积分`
              : `连续 ${status?.streak ?? 0} 天 · 今日可得 ${status?.today_points ?? 5} 积分`}
          </p>
        </div>
        {!checked && (
          <span className="text-[17px] font-extrabold tabular-nums shrink-0" style={{ color: "var(--accent)" }}>
            +{status?.today_points ?? 5}
          </span>
        )}
      </div>

      <button
        type="button"
        onClick={doCheckin}
        disabled={loading || checked}
        aria-disabled={loading || checked}
        className={`btn w-full justify-center mt-3.5 ${checked ? "btn-line" : "btn-primary"}`}
      >
        {loading ? (
          <>
            <Loader2 size={15} className="animate-spin" /> 签到中…
          </>
        ) : checked ? (
          <>
            <CalendarCheck size={15} /> 今日已签到
          </>
        ) : (
          "立即签到"
        )}
      </button>

      {error && (
        <p className="text-[12px] mt-2" style={{ color: "var(--clay)" }} role="alert">
          {error}
        </p>
      )}
    </section>
  );
}