"use client";

import { useEffect, useState } from "react";
import { AppShell } from "../../components/app-shell";

type ApiResponse<T> = {
  data: T;
  meta: { timestamp: string; version: "v1" };
  error: null | { message: string; code?: string };
};

type RuleRow = {
  id: string;
  name: string;
  priority: number;
  isActive: boolean;
  conditions: Record<string, unknown>;
  actions: Record<string, unknown>;
};

type Suggestion = {
  id: string;
  name: string;
  conditions: Record<string, unknown>;
  actions: Record<string, unknown>;
  confidence: number;
};

export default function RulesPage() {
  const [rules, setRules] = useState<RuleRow[]>([]);
  const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
  const [status, setStatus] = useState("Loading rules...");
  const [showNew, setShowNew] = useState(false);
  const [form, setForm] = useState({
    name: "",
    priority: "",
    textContains: "",
    amountGreater: "",
    amountLess: "",
    setCategory: "",
    setHidden: false,
    isActive: true
  });

  const load = async () => {
    const userId = localStorage.getItem("ledgerone_user_id");
    const query = userId ? `?user_id=${encodeURIComponent(userId)}` : "";
    try {
      const [rulesRes, suggestionsRes] = await Promise.all([
        fetch(`/api/rules${query}`),
        fetch(`/api/rules/suggestions${query}`)
      ]);
      const rulesPayload = (await rulesRes.json()) as ApiResponse<RuleRow[]>;
      const suggestionsPayload = (await suggestionsRes.json()) as ApiResponse<Suggestion[]>;
      if (!rulesRes.ok || rulesPayload.error) {
        setStatus(rulesPayload.error?.message ?? "Unable to load rules.");
        return;
      }
      setRules(rulesPayload.data);
      setSuggestions(suggestionsPayload.data ?? []);
      setStatus(rulesPayload.data.length ? "" : "No rules yet.");
    } catch {
      setStatus("Unable to load rules.");
    }
  };

  useEffect(() => {
    load();
  }, []);

  const onCreate = async () => {
    const userId = localStorage.getItem("ledgerone_user_id");
    if (!userId) {
      setStatus("Missing user id.");
      return;
    }
    const payload = {
      userId,
      name: form.name || "Untitled rule",
      priority: form.priority ? Number(form.priority) : undefined,
      isActive: form.isActive,
      conditions: {
        textContains: form.textContains || undefined,
        amountGreaterThan: form.amountGreater ? Number(form.amountGreater) : undefined,
        amountLessThan: form.amountLess ? Number(form.amountLess) : undefined
      },
      actions: {
        setCategory: form.setCategory || undefined,
        setHidden: form.setHidden
      }
    };
    try {
      const res = await fetch("/api/rules", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });
      const data = (await res.json()) as ApiResponse<RuleRow>;
      if (!res.ok || data.error) {
        setStatus(data.error?.message ?? "Unable to create rule.");
        return;
      }
      setShowNew(false);
      setForm({
        name: "",
        priority: "",
        textContains: "",
        amountGreater: "",
        amountLess: "",
        setCategory: "",
        setHidden: false,
        isActive: true
      });
      setRules((prev) => [data.data, ...prev]);
      setStatus("");
    } catch {
      setStatus("Unable to create rule.");
    }
  };

  return (
    <AppShell title="Rules" subtitle="Priority-ordered rules with full transparency.">
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
          <span className="px-4 py-2 rounded-full bg-secondary/50 border border-border">Active rules</span>
          <span className="px-4 py-2 rounded-full bg-secondary/50 border border-border">Priority ordered</span>
          <span className="px-4 py-2 rounded-full bg-secondary/50 border border-border">Auto applied</span>
        </div>
        <button
          type="button"
          onClick={() => setShowNew((prev) => !prev)}
          className="rounded-full bg-primary px-4 py-2 text-xs font-bold text-primary-foreground hover:bg-primary/90 transition-colors"
        >
          {showNew ? "Close" : "New rule"}
        </button>
      </div>
      <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
        <div className="glass-panel p-6 rounded-2xl shadow-sm">
          {showNew ? (
            <div className="mb-6 rounded-xl border border-border bg-background/50 p-4">
              <p className="text-sm font-bold text-foreground">Create a rule</p>
              <div className="mt-4 grid gap-3 md:grid-cols-2">
                <input
                  type="text"
                  value={form.name}
                  onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
                  placeholder="Rule name"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
                <input
                  type="number"
                  value={form.priority}
                  onChange={(event) =>
                    setForm((prev) => ({ ...prev, priority: event.target.value }))
                  }
                  placeholder="Priority (optional)"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
                <input
                  type="text"
                  value={form.textContains}
                  onChange={(event) =>
                    setForm((prev) => ({ ...prev, textContains: event.target.value }))
                  }
                  placeholder="Description contains"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
                <input
                  type="text"
                  value={form.setCategory}
                  onChange={(event) =>
                    setForm((prev) => ({ ...prev, setCategory: event.target.value }))
                  }
                  placeholder="Set category"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
                <input
                  type="number"
                  value={form.amountGreater}
                  onChange={(event) =>
                    setForm((prev) => ({ ...prev, amountGreater: event.target.value }))
                  }
                  placeholder="Amount greater than"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
                <input
                  type="number"
                  value={form.amountLess}
                  onChange={(event) =>
                    setForm((prev) => ({ ...prev, amountLess: event.target.value }))
                  }
                  placeholder="Amount less than"
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-foreground focus:border-primary focus:ring-primary"
                />
              </div>
              <div className="mt-4 flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={form.setHidden}
                    onChange={(event) =>
                      setForm((prev) => ({ ...prev, setHidden: event.target.checked }))
                    }
                    className="rounded border-border text-primary focus:ring-primary"
                  />
                  Hide matching transactions
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={form.isActive}
                    onChange={(event) =>
                      setForm((prev) => ({ ...prev, isActive: event.target.checked }))
                    }
                    className="rounded border-border text-primary focus:ring-primary"
                  />
                  Rule is active
                </label>
              </div>
              <div className="mt-4 flex flex-wrap gap-3">
                <button
                  type="button"
                  onClick={onCreate}
                  className="rounded-full bg-primary px-4 py-2 text-xs font-bold text-primary-foreground hover:bg-primary/90 transition-colors"
                >
                  Save rule
                </button>
                <button
                  type="button"
                  onClick={() => setShowNew(false)}
                  className="rounded-full border border-border bg-background px-4 py-2 text-xs font-semibold text-foreground hover:bg-secondary transition-colors"
                >
                  Cancel
                </button>
              </div>
            </div>
          ) : null}
          {status ? <p className="text-sm text-muted-foreground">{status}</p> : null}
          {rules.length ? (
            <div className="mt-4 space-y-4">
              {rules.map((rule) => (
                <div
                  key={rule.id}
                  className="rounded-xl border border-border bg-background/50 p-4"
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="font-bold text-foreground">{rule.name}</p>
                      <p className="text-xs text-muted-foreground">
                        Priority {rule.priority} - {rule.isActive ? "Active" : "Paused"}
                      </p>
                    </div>
                    <span className={`rounded-full border border-border px-2 py-1 text-xs font-medium ${rule.isActive ? "bg-primary/10 text-primary" : "bg-secondary text-muted-foreground"}`}>
                      {rule.isActive ? "Live" : "Paused"}
                    </span>
                  </div>
                  <div className="mt-3 text-xs text-muted-foreground">
                    <span className="font-semibold text-foreground">Conditions:</span> {JSON.stringify(rule.conditions)}
                  </div>
                  <div className="mt-1 text-xs text-muted-foreground">
                    <span className="font-semibold text-foreground">Actions:</span> {JSON.stringify(rule.actions)}
                  </div>
                </div>
              ))}
            </div>
          ) : null}
        </div>

        <div className="glass-panel p-6 rounded-2xl shadow-sm">
          <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground font-bold">AI Suggestions</p>
          <h2 className="mt-3 text-xl font-bold text-foreground">Pattern-based rule ideas</h2>
          <div className="mt-4 space-y-4">
            {suggestions.length ? (
              suggestions.map((item) => (
                <div
                  key={item.id}
                  className="rounded-xl border border-border bg-background/50 p-4"
                >
                  <p className="font-bold text-foreground">{item.name}</p>
                  <p className="mt-2 text-xs text-muted-foreground">
                    <span className="font-semibold text-foreground">Conditions:</span> {JSON.stringify(item.conditions)}
                  </p>
                  <p className="mt-1 text-xs text-muted-foreground">
                    <span className="font-semibold text-foreground">Actions:</span> {JSON.stringify(item.actions)}
                  </p>
                  <p className="mt-2 text-xs font-medium text-primary">
                    Confidence: {(item.confidence * 100).toFixed(0)}%
                  </p>
                </div>
              ))
            ) : (
              <p className="text-sm text-muted-foreground">No suggestions yet.</p>
            )}
          </div>
        </div>
      </div>
    </AppShell>
  );
}