import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { api, type CurrentUser, type NameTheme } from "../api/client";
import CopyButton from "../components/CopyButton";
import { readableError } from "../utils/errors";
import {
  generateServerName,
  generateUsername,
  generatePassword,
  passwordEntropyBits,
  passwordStrengthLabel,
  type UsernameOptions,
  type PasswordOptions,
} from "../utils/generators";

const MIXED = "mixed";

export default function Generator({ user }: { user: CurrentUser }) {
  // ─── Server name ───────────────────────────────────────────────────────
  const [existingServerNames, setExistingServerNames] = useState<string[]>([]);
  const [themes, setThemes] = useState<NameTheme[] | null>(null);
  const [themesError, setThemesError] = useState<string | null>(null);
  const [theme, setTheme] = useState<string>(MIXED);
  const [serverName, setServerName] = useState("");

  useEffect(() => {
    api.servers
      .list()
      .then((res) => setExistingServerNames(res.servers.map((s) => s.name)))
      .catch(() => {
        // Best-effort — collision-avoidance just won't have anything to check against.
      });
  }, []);

  useEffect(() => {
    api.generator
      .themes()
      .then((res) => setThemes(res.themes))
      .catch((err) => setThemesError(readableError(err)));
  }, []);

  // "Mixed" is every list together, each name once even if it appears in several.
  const pool = useMemo(() => {
    if (!themes) return [];
    if (theme === MIXED) return [...new Set(themes.flatMap((t) => t.names))];
    return themes.find((t) => t.id === theme)?.names ?? [];
  }, [themes, theme]);

  function rollServerName() {
    setServerName(generateServerName(pool, existingServerNames));
  }

  // ─── Username ────────────────────────────────────────────────────────
  const [usernameOptions, setUsernameOptions] = useState<UsernameOptions>({ separator: "-", includeNumber: true });
  const [username, setUsername] = useState("");

  function rollUsername() {
    setUsername(generateUsername(usernameOptions));
  }

  // ─── Password ────────────────────────────────────────────────────────
  const [passwordOptions, setPasswordOptions] = useState<PasswordOptions>({
    length: 20,
    uppercase: true,
    lowercase: true,
    numbers: true,
    symbols: true,
    excludeAmbiguous: false,
  });
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  function rollPassword() {
    setPassword(generatePassword(passwordOptions));
  }

  const noCharsetSelected =
    !passwordOptions.uppercase && !passwordOptions.lowercase && !passwordOptions.numbers && !passwordOptions.symbols;
  const entropy = passwordEntropyBits(passwordOptions);
  const strength = passwordStrengthLabel(entropy);

  return (
    <>
      <h2 className="page-title mb-3">Generator</h2>
      <div className="text-secondary mb-3">
        Usernames and passwords are generated locally in your browser — nothing is sent to or stored on the server. Server names are
        picked in your browser too, from name lists the server hands out.
      </div>

      <div className="row row-cards">
        <div className="col-md-6 col-lg-4">
          <div className="card h-100">
            <div className="card-header">
              <h3 className="card-title">Server name</h3>
            </div>
            <div className="card-body">
              <p className="text-secondary">
                Picks from a list of names, avoiding names already in use.
                {user.role === "admin" && (
                  <>
                    {" "}
                    <Link to="/settings/names">Edit the lists</Link>.
                  </>
                )}
              </p>
              {themesError && <div className="alert alert-danger py-2">{themesError}</div>}
              <label className="form-label">Theme</label>
              <select className="form-select mb-1" value={theme} onChange={(e) => setTheme(e.target.value)} disabled={!themes}>
                <option value={MIXED}>Mixed — all lists</option>
                {(themes ?? []).map((t) => (
                  <option key={t.id} value={t.id}>
                    {t.label} ({t.names.length})
                  </option>
                ))}
              </select>
              <div className="form-hint mb-3">{themes ? `${pool.length} name${pool.length === 1 ? "" : "s"} to pick from.` : "Loading the lists…"}</div>
              <div className="input-group">
                <input type="text" className="form-control" readOnly value={serverName} placeholder="Click Generate…" />
                {serverName && <CopyButton text={serverName} />}
              </div>
            </div>
            <div className="card-footer">
              <button className="btn btn-primary" onClick={rollServerName} disabled={pool.length === 0}>
                Generate
              </button>
            </div>
          </div>
        </div>

        <div className="col-md-6 col-lg-4">
          <div className="card h-100">
            <div className="card-header">
              <h3 className="card-title">Username</h3>
            </div>
            <div className="card-body">
              <p className="text-secondary">An adjective + animal, optionally with a number — easy to say, hard to collide.</p>
              <div className="row g-2 mb-3">
                <div className="col-7">
                  <label className="form-label">Separator</label>
                  <select
                    className="form-select"
                    value={usernameOptions.separator}
                    onChange={(e) => setUsernameOptions((o) => ({ ...o, separator: e.target.value as UsernameOptions["separator"] }))}
                  >
                    <option value="-">Hyphen (clever-otter)</option>
                    <option value="_">Underscore (clever_otter)</option>
                    <option value=".">Dot (clever.otter)</option>
                    <option value="">None (cleverotter)</option>
                  </select>
                </div>
                <div className="col-5 d-flex align-items-end">
                  <label className="form-check mb-2">
                    <input
                      type="checkbox"
                      className="form-check-input"
                      checked={usernameOptions.includeNumber}
                      onChange={(e) => setUsernameOptions((o) => ({ ...o, includeNumber: e.target.checked }))}
                    />
                    <span className="form-check-label">Add number</span>
                  </label>
                </div>
              </div>
              <div className="input-group">
                <input type="text" className="form-control" readOnly value={username} placeholder="Click Generate…" />
                {username && <CopyButton text={username} />}
              </div>
            </div>
            <div className="card-footer">
              <button className="btn btn-primary" onClick={rollUsername}>
                Generate
              </button>
            </div>
          </div>
        </div>

        <div className="col-md-6 col-lg-4">
          <div className="card h-100">
            <div className="card-header">
              <h3 className="card-title">Password</h3>
            </div>
            <div className="card-body">
              <label className="form-label">Length: {passwordOptions.length}</label>
              <input
                type="range"
                className="form-range mb-3"
                min={8}
                max={64}
                value={passwordOptions.length}
                onChange={(e) => setPasswordOptions((o) => ({ ...o, length: Number(e.target.value) }))}
              />
              <div className="row g-2 mb-3">
                {(
                  [
                    ["uppercase", "A–Z"],
                    ["lowercase", "a–z"],
                    ["numbers", "0–9"],
                    ["symbols", "!@#$…"],
                  ] as const
                ).map(([key, label]) => (
                  <div className="col-6" key={key}>
                    <label className="form-check mb-0">
                      <input
                        type="checkbox"
                        className="form-check-input"
                        checked={passwordOptions[key]}
                        onChange={(e) => setPasswordOptions((o) => ({ ...o, [key]: e.target.checked }))}
                      />
                      <span className="form-check-label">{label}</span>
                    </label>
                  </div>
                ))}
              </div>
              <label className="form-check mb-3">
                <input
                  type="checkbox"
                  className="form-check-input"
                  checked={passwordOptions.excludeAmbiguous}
                  onChange={(e) => setPasswordOptions((o) => ({ ...o, excludeAmbiguous: e.target.checked }))}
                />
                <span className="form-check-label">Exclude ambiguous characters (0/O, 1/l/I…)</span>
              </label>
              {noCharsetSelected && <div className="alert alert-danger py-2">Pick at least one character type.</div>}
              <div className="input-group mb-2">
                <input
                  type={showPassword ? "text" : "password"}
                  className="form-control font-monospace"
                  readOnly
                  value={password}
                  placeholder="Click Generate…"
                />
                {password && (
                  <>
                    <button type="button" className="btn btn-outline-secondary" onClick={() => setShowPassword((v) => !v)}>
                      {showPassword ? "Hide" : "Show"}
                    </button>
                    <CopyButton text={password} />
                  </>
                )}
              </div>
              {password && (
                <div className={`small ${strength.className}`}>
                  {strength.label} (~{entropy} bits of entropy)
                </div>
              )}
            </div>
            <div className="card-footer">
              <button className="btn btn-primary" onClick={rollPassword} disabled={noCharsetSelected}>
                Generate
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}