/**
 * app/admin/commission-config/page.tsx
 * Admin — view and edit per-level MLM commission split percentages.
 * Changes take effect on all future sales.
 *
 * ADMIN MODULE — self-contained.
 */

"use client";

import { useEffect, useState } from "react";
import { Percent, Save, RefreshCw, Info } from "lucide-react";
import toast from "react-hot-toast";

const MAX_LEVELS = 20;
const LEVEL_LABELS: Record<number, string> = {
  0: "Direct Seller",
  1: "Level 1 (Direct Sponsor)",
  2: "Level 2",
  3: "Level 3",
  4: "Level 4",
  5: "Level 5",
  6: "Level 6",
  7: "Level 7",
};

export default function CommissionConfigPage() {
  const [rates, setRates] = useState<Record<string, number>>({});
  const [original, setOriginal] = useState<Record<string, number>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  const load = () => {
    setLoading(true);
    fetch("/api/admin/commission-config")
      .then((r) => r.json())
      .then((d) => {
        if (d.success) {
          setRates(d.data.levels);
          setOriginal(d.data.levels);
        } else toast.error(d.error ?? "Failed to load config");
      })
      .catch(() => toast.error("Server error"))
      .finally(() => setLoading(false));
  };

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

  // Build displayed rows: ensure 0–MAX_LEVELS are all shown
  const rows = Array.from({ length: MAX_LEVELS + 1 }, (_, i) => i);

  const handleChange = (level: number, value: string) => {
    const num = parseFloat(value);
    setRates((prev) => ({
      ...prev,
      [String(level)]: isNaN(num) ? 0 : Math.min(100, Math.max(0, num)),
    }));
  };

  const hasChanges = JSON.stringify(rates) !== JSON.stringify(original);

  const handleSave = async () => {
    setSaving(true);
    try {
      const res = await fetch("/api/admin/commission-config", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ levels: rates }),
      });
      const d = await res.json();
      if (d.success) {
        toast.success("Commission rates saved!");
        setOriginal(d.data.levels);
        setRates(d.data.levels);
      } else {
        toast.error(d.error ?? "Failed to save");
      }
    } catch {
      toast.error("Server error");
    } finally {
      setSaving(false);
    }
  };

  const reset = () => {
    setRates(original);
    toast("Changes reset", { icon: "↩️" });
  };

  // Preview: calculate how much of a ₹100 sale ends up at each level
  const preview = (() => {
    const results: { level: number; amount: number; rate: number }[] = [];
    const base = 100;
    const directRate = rates["0"] ?? 15;
    const directAmt = (base * directRate) / 100;
    results.push({ level: 0, amount: directAmt, rate: directRate });
    let prev = directAmt;
    for (let i = 1; i <= MAX_LEVELS; i++) {
      const rate = rates[String(i)] ?? (i <= 7 ? 20 : 0);
      const amt = (prev * rate) / 100;
      if (amt < 0.01) break;
      results.push({ level: i, amount: Math.round(amt * 100) / 100, rate });
      prev = amt;
    }
    return results;
  })();

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Admin</p>
          <h1 className="text-3xl font-black text-black tracking-tight">Commission Rates</h1>
          <p className="text-slate-500 text-sm mt-1 font-medium">
            Set per-level split percentages. Applied automatically to all future sales.
          </p>
        </div>
        <div className="flex gap-3">
          {hasChanges && (
            <button
              onClick={reset}
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-50 text-indigo-600 text-xs font-black uppercase tracking-widest hover:bg-indigo-100 transition-colors border border-indigo-100"
            >
              <RefreshCw className="h-3.5 w-3.5" /> Reset
            </button>
          )}
          <button
            onClick={handleSave}
            disabled={saving || !hasChanges}
            className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 text-white text-xs font-black uppercase tracking-widest hover:bg-indigo-700 transition-colors disabled:opacity-50 shadow-lg shadow-indigo-600/20"
          >
            {saving ? (
              <RefreshCw className="h-3.5 w-3.5 animate-spin" />
            ) : (
              <Save className="h-3.5 w-3.5" />
            )}
            {saving ? "Saving…" : "Save Rates"}
          </button>
        </div>
      </div>

      {/* Info banner */}
      <div className="flex items-start gap-3 p-4 rounded-xl bg-slate-50 border border-slate-100">
        <Info className="h-4 w-4 text-slate-500 mt-0.5 flex-shrink-0" />
        <p className="text-xs text-slate-500 font-medium leading-relaxed">
          <strong className="text-black">Level 0</strong> — percentage of the raw sale amount paid to the selling agent directly.{" "}
          <strong className="text-black">Levels 1–20</strong> — each level receives that % of the <em>previous level's payout</em> (cascading override model).
          Set a level to <strong>0%</strong> to stop the cascade at that point.
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Rate Editor */}
        <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
          <div className="px-6 py-4 border-b border-slate-100">
            <h2 className="font-black text-black text-sm uppercase tracking-widest flex items-center gap-2">
              <Percent className="h-4 w-4" /> Edit Rates
            </h2>
          </div>
          {loading ? (
            <div className="p-6 space-y-3">
              {[...Array(8)].map((_, i) => (
                <div key={i} className="h-12 rounded-xl bg-slate-50 animate-pulse" />
              ))}
            </div>
          ) : (
            <div className="divide-y divide-slate-50">
              {rows.map((level) => {
                const currentRate = rates[String(level)] ?? 0;
                const label = LEVEL_LABELS[level] ?? `Level ${level}`;
                return (
                  <div
                    key={level}
                    className={`flex items-center gap-4 px-6 py-3 hover:bg-indigo-50/30 transition-colors ${
                      level === 0 ? "bg-indigo-600/5" : ""
                    }`}
                  >
                    <div className="flex-1 min-w-0">
                      <p className={`text-sm font-bold truncate ${level === 0 ? "text-black" : "text-slate-700"}`}>
                        {label}
                      </p>
                      {level === 0 && (
                        <p className="text-[10px] text-slate-400 font-medium">% of sale amount</p>
                      )}
                      {level > 0 && (
                        <p className="text-[10px] text-slate-400 font-medium">% of Level {level - 1} payout</p>
                      )}
                    </div>
                    <div className="flex items-center gap-2 flex-shrink-0">
                      <input
                        type="number"
                        min="0"
                        max="100"
                        step="0.1"
                        value={currentRate}
                        onChange={(e) => handleChange(level, e.target.value)}
                        className={`w-20 text-right px-3 py-2 rounded-xl border text-sm font-black focus:outline-none focus:ring-2 focus:ring-indigo-600/10 transition-colors ${
                          rates[String(level)] !== original[String(level)]
                            ? "border-indigo-600 bg-indigo-600/5"
                            : "border-slate-200 bg-white text-slate-900"
                        }`}
                      />
                      <span className="text-slate-400 font-black text-sm w-4">%</span>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Live Preview */}
        <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden h-fit">
          <div className="px-6 py-4 border-b border-slate-100">
            <h2 className="font-black text-black text-sm uppercase tracking-widest">Live Preview</h2>
            <p className="text-xs text-slate-400 font-medium mt-0.5">Distribution on ₹100 sale</p>
          </div>
          <div className="divide-y divide-slate-50">
            {preview.map(({ level, amount, rate }) => (
              <div key={level} className="flex items-center justify-between px-6 py-3">
                <div>
                  <p className="text-sm font-bold text-black">
                    {LEVEL_LABELS[level] ?? `Level ${level}`}
                  </p>
                  <p className="text-[10px] text-slate-400 font-medium">{rate}% applied</p>
                </div>
                <span className="font-black text-black text-sm">₹{amount.toFixed(2)}</span>
              </div>
            ))}
          </div>
          <div className="px-6 py-4 border-t border-slate-100 bg-slate-50/50">
            <div className="flex justify-between items-center">
              <span className="text-xs font-black text-slate-500 uppercase tracking-widest">Total Distributed</span>
              <span className="font-black text-black">
                ₹{preview.reduce((a, b) => a + b.amount, 0).toFixed(2)}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}