"use client";

import { useState } from "react";
import type {
  AdminSnapshot,
  AdminUserSummary,
  SettingsSnapshot,
  UserRole,
} from "@/lib/types";

interface SettingsResponse {
  ok?: boolean;
  error?: string;
  settings?: SettingsSnapshot;
}

interface UserResponse {
  ok?: boolean;
  error?: string;
  user?: AdminUserSummary;
}

interface SettingsFormState {
  defaultMonthlyQuota: string;
}

interface CreateUserDraft {
  username: string;
  password: string;
  role: UserRole;
  monthlyQuota: string;
}

type EditableAdminUser = Omit<AdminUserSummary, "monthlyQuota"> & {
  monthlyQuota: string | null;
  passwordDraft: string;
};

function toEditableUser(user: AdminUserSummary): EditableAdminUser {
  return {
    ...user,
    monthlyQuota: user.monthlyQuota === null ? null : String(user.monthlyQuota),
    passwordDraft: "",
  };
}

function getErrorMessage(error: unknown, fallbackMessage: string): string {
  return error instanceof Error ? error.message : fallbackMessage;
}

export default function AdminDashboard({
  initialSnapshot,
}: {
  initialSnapshot: AdminSnapshot;
}) {
  const [settings, setSettings] = useState<SettingsFormState>({
    defaultMonthlyQuota: String(initialSnapshot.settings.defaultMonthlyQuota),
  });
  const [users, setUsers] = useState<EditableAdminUser[]>(
    initialSnapshot.users.map(toEditableUser),
  );
  const [feedback, setFeedback] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isSavingSettings, setIsSavingSettings] = useState(false);
  const [createDraft, setCreateDraft] = useState<CreateUserDraft>({
    username: "",
    password: "",
    role: "user",
    monthlyQuota: settings.defaultMonthlyQuota,
  });

  async function saveSettings(): Promise<void> {
    setFeedback("");
    setErrorMessage("");
    setIsSavingSettings(true);

    try {
      const response = await fetch("/api/admin/settings", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          defaultMonthlyQuota: settings.defaultMonthlyQuota,
        }),
      });
      const payload = (await response.json()) as SettingsResponse;

      if (!response.ok || payload.ok !== true || !payload.settings) {
        throw new Error(payload.error || "保存默认额度失败。");
      }

      setSettings({
        defaultMonthlyQuota: String(payload.settings.defaultMonthlyQuota),
      });
      setFeedback("默认额度已更新。");
    } catch (error) {
      setErrorMessage(getErrorMessage(error, "保存默认额度失败。"));
    } finally {
      setIsSavingSettings(false);
    }
  }

  async function createUser(): Promise<void> {
    setFeedback("");
    setErrorMessage("");

    try {
      const response = await fetch("/api/admin/users", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(createDraft),
      });
      const payload = (await response.json()) as UserResponse;

      if (!response.ok || payload.ok !== true || !payload.user) {
        throw new Error(payload.error || "创建用户失败。");
      }

      const createdUser = payload.user;

      setUsers((currentUsers) => [
        ...currentUsers,
        toEditableUser(createdUser),
      ]);
      setCreateDraft({
        username: "",
        password: "",
        role: "user",
        monthlyQuota: settings.defaultMonthlyQuota,
      });
      setFeedback("用户已创建。");
    } catch (error) {
      setErrorMessage(getErrorMessage(error, "创建用户失败。"));
    }
  }

  async function saveUser(user: EditableAdminUser): Promise<void> {
    setFeedback("");
    setErrorMessage("");

    try {
      const response = await fetch(`/api/admin/users/${user.id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          role: user.role,
          monthlyQuota: user.role === "admin" ? null : user.monthlyQuota,
          isActive: user.isActive,
          password: user.passwordDraft || undefined,
        }),
      });
      const payload = (await response.json()) as UserResponse;

      if (!response.ok || payload.ok !== true || !payload.user) {
        throw new Error(payload.error || "保存用户失败。");
      }

      const savedUser = payload.user;

      setUsers((currentUsers) =>
        currentUsers.map((item) =>
          item.id === user.id ? toEditableUser(savedUser) : item,
        ),
      );
      setFeedback(`已保存 ${savedUser.username}。`);
    } catch (error) {
      setErrorMessage(getErrorMessage(error, "保存用户失败。"));
    }
  }

  return (
    <div className="admin-grid">
      <section className="card settings-card">
        <div className="section-heading">
          <div>
            <p className="section-kicker">Policy</p>
            <h3>默认额度设置</h3>
          </div>
          <span className="subtle-pill">{initialSnapshot.periodKey}</span>
        </div>

        <label className="field">
          <span>默认月额度</span>
          <input
            type="number"
            min="0"
            value={settings.defaultMonthlyQuota}
            onChange={(event) =>
              setSettings((current) => ({
                ...current,
                defaultMonthlyQuota: event.target.value,
              }))
            }
          />
        </label>

        <p className="muted block-copy">
          没有单独指定额度的普通用户，将继承这里的月额度。
        </p>

        <button
          type="button"
          className="primary-button"
          onClick={saveSettings}
          disabled={isSavingSettings}
        >
          {isSavingSettings ? "保存中..." : "保存默认额度"}
        </button>
      </section>

      <section className="card create-user-card">
        <div className="section-heading">
          <div>
            <p className="section-kicker">Users</p>
            <h3>创建用户</h3>
          </div>
        </div>

        <div className="form-grid">
          <label className="field">
            <span>用户名</span>
            <input
              type="text"
              value={createDraft.username}
              onChange={(event) =>
                setCreateDraft((current) => ({
                  ...current,
                  username: event.target.value,
                }))
              }
            />
          </label>

          <label className="field">
            <span>密码</span>
            <input
              type="password"
              value={createDraft.password}
              onChange={(event) =>
                setCreateDraft((current) => ({
                  ...current,
                  password: event.target.value,
                }))
              }
            />
          </label>

          <label className="field">
            <span>角色</span>
            <select
              value={createDraft.role}
              onChange={(event) =>
                setCreateDraft((current) => ({
                  ...current,
                  role: event.target.value as UserRole,
                }))
              }
            >
              <option value="user">普通用户</option>
              <option value="admin">管理员</option>
            </select>
          </label>

          <label className="field">
            <span>月额度</span>
            <input
              type="number"
              min="0"
              value={createDraft.monthlyQuota}
              onChange={(event) =>
                setCreateDraft((current) => ({
                  ...current,
                  monthlyQuota: event.target.value,
                }))
              }
            />
          </label>
        </div>

        <button type="button" className="primary-button" onClick={createUser}>
          创建用户
        </button>
      </section>

      {(feedback || errorMessage) && (
        <div className={errorMessage ? "error-banner" : "success-banner"}>
          {errorMessage || feedback}
        </div>
      )}

      <section className="card user-table-card">
        <div className="section-heading">
          <div>
            <p className="section-kicker">Manage</p>
            <h3>用户管理</h3>
          </div>
        </div>

        <div className="user-table">
          <div className="user-table-head">
            <span>用户</span>
            <span>角色</span>
            <span>额度</span>
            <span>本月已用</span>
            <span>状态</span>
            <span>重置密码</span>
            <span>操作</span>
          </div>

          {users.map((user) => (
            <div key={user.id} className="user-table-row">
              <div className="user-cell user-cell-name">
                <strong>{user.username}</strong>
                <small>
                  {user.isUnlimited ? "无限额" : `剩余 ${user.remaining}`}
                </small>
              </div>

              <select
                value={user.role}
                onChange={(event) =>
                  setUsers((currentUsers) =>
                    currentUsers.map((item) =>
                      item.id === user.id
                        ? { ...item, role: event.target.value as UserRole }
                        : item,
                    ),
                  )
                }
              >
                <option value="user">普通用户</option>
                <option value="admin">管理员</option>
              </select>

              <input
                type="number"
                min="0"
                value={user.monthlyQuota ?? ""}
                placeholder={String(settings.defaultMonthlyQuota)}
                onChange={(event) =>
                  setUsers((currentUsers) =>
                    currentUsers.map((item) =>
                      item.id === user.id
                        ? {
                            ...item,
                            monthlyQuota:
                              event.target.value === ""
                                ? null
                                : event.target.value,
                          }
                        : item,
                    ),
                  )
                }
              />

              <span>{user.usedThisPeriod}</span>

              <select
                value={String(user.isActive)}
                onChange={(event) =>
                  setUsers((currentUsers) =>
                    currentUsers.map((item) =>
                      item.id === user.id
                        ? {
                            ...item,
                            isActive: event.target.value === "true",
                          }
                        : item,
                    ),
                  )
                }
              >
                <option value="true">启用</option>
                <option value="false">禁用</option>
              </select>

              <input
                type="password"
                value={user.passwordDraft}
                placeholder="留空则不修改"
                onChange={(event) =>
                  setUsers((currentUsers) =>
                    currentUsers.map((item) =>
                      item.id === user.id
                        ? { ...item, passwordDraft: event.target.value }
                        : item,
                    ),
                  )
                }
              />

              <button
                type="button"
                className="ghost-button"
                onClick={() => saveUser(user)}
              >
                保存
              </button>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}