// Dictionary, Style, Transforms views — each follows the same calm rhythm.

const { useState: uS_o } = React;

function PageShell({ title, subtitle, right, children, density }) {
  const pad = density === "compact" ? 24 : density === "airy" ? 56 : 36;
  return (
    <div style={{ padding: `${pad}px ${pad + 8}px`, maxWidth: 920, margin: "0 auto", width: "100%" }}>
      <div
        style={{
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "space-between",
          marginBottom: 20,
        }}
      >
        <div>
          <h1
            style={{
              margin: 0,
              fontSize: 24,
              fontWeight: 500,
              letterSpacing: "-0.02em",
            }}
          >
            {title}
          </h1>
          {subtitle && (
            <p
              style={{
                margin: "4px 0 0",
                fontSize: 13,
                color: "var(--ink-mute)",
              }}
            >
              {subtitle}
            </p>
          )}
        </div>
        <div>{right}</div>
      </div>
      {children}
    </div>
  );
}

function DictionaryView({ density }) {
  const [words, setWords] = uS_o(DICTIONARY);
  const [q, setQ] = uS_o("");
  const [add, setAdd] = uS_o("");
  const filtered = words.filter((w) => w.toLowerCase().includes(q.toLowerCase()));

  return (
    <PageShell
      title="Dictionary"
      subtitle="Custom words globefn should always spell correctly."
      density={density}
      right={
        <div style={{ display: "flex", gap: 8 }}>
          <InputShell style={{ width: 180 }}>
            <Ic.search width="13" height="13" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search"
              style={{ border: "none", outline: "none", background: "transparent", flex: 1, fontSize: 12.5 }}
            />
          </InputShell>
        </div>
      }
    >
      <div
        style={{
          borderRadius: 18,
          overflow: "hidden",
          background: "var(--card-bg)",
        }}
      >
        <div
          style={{
            padding: "16px 14px",
            borderBottom: "1px solid var(--line-soft)",
            display: "flex",
            alignItems: "center",
            gap: 8,
          }}
        >
          <Ic.plus width="14" height="14" />
          <input
            value={add}
            onChange={(e) => setAdd(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && add.trim()) {
                setWords([add.trim(), ...words]);
                setAdd("");
              }
            }}
            placeholder="Add a word · press Enter"
            style={{
              border: "none",
              outline: "none",
              flex: 1,
              fontSize: 13.5,
              background: "transparent",
            }}
          />
        </div>
        {filtered.map((w, i) => (
          <div
            key={i}
            style={{
              padding: "10px 14px",
              display: "flex",
              alignItems: "center",
              borderBottom: i < filtered.length - 1 ? "1px solid var(--line-soft)" : "none",
            }}
          >
            <span style={{ fontSize: 13.5, flex: 1 }}>{w}</span>
            <span style={{ fontSize: 11, color: "var(--ink-faint)", marginRight: 10 }}>
              {i === 0 ? "added just now" : "always preserved"}
            </span>
            <IconButton
              icon={<Ic.trash width="13" height="13" />}
              size={24}
              onClick={() => setWords(words.filter((x) => x !== w))}
            />
          </div>
        ))}
        {filtered.length === 0 && (
          <div style={{ padding: "40px 14px", textAlign: "center", color: "var(--ink-mute)", fontSize: 13 }}>
            No matches
          </div>
        )}
      </div>
    </PageShell>
  );
}

function StyleView({ density }) {
  const [active, setActive] = uS_o("natural");
  const sample =
    "um so I think we should, we should probably push the launch to next Tuesday because the team hasn't had time to QA the onboarding flow properly";
  const renderPreview = (id) => {
    switch (id) {
      case "natural":
        return "I think we should push the launch to next Tuesday — the team hasn't had time to QA the onboarding flow properly.";
      case "crisp":
        return "Push the launch to next Tuesday. The team needs more time to QA onboarding.";
      case "casual":
        return "I think we should push the launch to next Tuesday — the team hasn't really had time to QA onboarding properly.";
      case "bullets":
        return "• Push the launch to next Tuesday\n• Team needs time to QA the onboarding flow";
      case "email":
        return "Hi team,\n\nI'd like to propose pushing the launch to next Tuesday. The team hasn't had time to fully QA the onboarding flow.\n\nThanks";
      default:
        return sample;
    }
  };

  return (
    <PageShell
      title="Style"
      subtitle="How globefn edits your speech before it reaches the cursor."
      density={density}
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 14,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {STYLE_PRESETS.map((p) => {
            const isActive = active === p.id;
            return (
              <button
                key={p.id}
                onClick={() => setActive(p.id)}
                style={{
                  textAlign: "left",
                  padding: "14px 16px",
                  borderRadius: 18,
                  border: isActive ? "1.5px solid var(--ink)" : "1.5px solid transparent",
                  background: "var(--card-bg)",
                  cursor: "pointer",
                  transition: "all 140ms ease",
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                }}
              >
                <div
                  style={{
                    width: 16,
                    height: 16,
                    borderRadius: 999,
                    border: "1.5px solid " + (isActive ? "var(--ink)" : "var(--ink-faint)"),
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    flexShrink: 0,
                  }}
                >
                  {isActive && (
                    <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--ink)" }} />
                  )}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 2 }}>{p.desc}</div>
                </div>
                {isActive && (
                  <span
                    style={{
                      fontSize: 10.5,
                      color: "var(--ink-mute)",
                      padding: "2px 8px",
                      borderRadius: 999,
                      background: "#f3f3f3",
                    }}
                  >
                    Active
                  </span>
                )}
              </button>
            );
          })}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ fontSize: 11.5, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
            You say
          </div>
          <div
            style={{
              padding: "16px 18px",
              borderRadius: 18,
              background: "var(--card-bg)",
              fontSize: 14,
              lineHeight: 1.55,
              color: "var(--ink-soft)",
              fontStyle: "italic",
            }}
          >
            "{sample}"
          </div>
          <div
            style={{
              fontSize: 11.5,
              color: "var(--ink-mute)",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
              marginTop: 8,
            }}
          >
            {STYLE_PRESETS.find((p) => p.id === active)?.name} produces
          </div>
          <div
            style={{
              padding: "16px 18px",
              borderRadius: 18,
              background: "var(--card-bg)",
              fontSize: 14,
              lineHeight: 1.55,
              color: "var(--ink)",
              whiteSpace: "pre-wrap",
              minHeight: 80,
            }}
          >
            {renderPreview(active)}
          </div>
        </div>
      </div>
    </PageShell>
  );
}

function TransformsView({ density }) {
  return (
    <PageShell
      title="Transforms"
      subtitle="One-shot AI actions you can trigger on your last dictation."
      density={density}
      right={
        <Pill icon={<Ic.plus width="13" height="13" />}>New transform</Pill>
      }
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 12,
        }}
      >
        {TRANSFORMS.map((t) => (
          <div
            key={t.id}
            style={{
              padding: "16px 18px",
              borderRadius: 18,
              background: "var(--card-bg)",
              display: "flex",
              flexDirection: "column",
              gap: 8,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div
                style={{
                  width: 26,
                  height: 26,
                  borderRadius: 7,
                  background: "#f3f3f3",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Ic.wand width="13" height="13" />
              </div>
              <div style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>{t.name}</div>
              <span
                style={{
                  fontSize: 10.5,
                  color: "var(--ink-mute)",
                  padding: "2px 7px",
                  borderRadius: 5,
                  background: "#f3f3f3",
                  fontFamily: "ui-monospace, Menlo, monospace",
                }}
              >
                {t.shortcut}
              </span>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--ink-mute)", lineHeight: 1.45 }}>
              {t.desc}
            </div>
          </div>
        ))}
      </div>
    </PageShell>
  );
}

Object.assign(window, { DictionaryView, StyleView, TransformsView });