"use client";

import { useEffect, useState } from "react";
import { CheckCircle2, Loader2, Save, Truck } from "lucide-react";
import { formatPrice } from "@/lib/format";

type CargoProvider = {
  id: string;
  name: string;
  price: number;
  freeLimit: number;
  enabled: boolean;
};

const DEFAULT_PROVIDERS: CargoProvider[] = [
  { id: "aras", name: "Aras Kargo", price: 7990, freeLimit: 150000, enabled: true },
  { id: "yurtici", name: "Yurtiçi Kargo", price: 8990, freeLimit: 150000, enabled: true },
  { id: "mng", name: "MNG Kargo", price: 7490, freeLimit: 150000, enabled: false },
  { id: "ptt", name: "PTT Kargo", price: 5990, freeLimit: 200000, enabled: false },
  { id: "surat", name: "Sürat Kargo", price: 6990, freeLimit: 150000, enabled: false },
];

export default function AdminCargoPage() {
  const [providers, setProviders] = useState<CargoProvider[]>(DEFAULT_PROVIDERS);
  const [loading, setLoading] = useState(false);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    async function loadSettings() {
      try {
        const res = await fetch("/api/admin/settings?key=cargo");
        const data = await res.json();
        if (data?.value?.providers && Array.isArray(data.value.providers)) {
          setProviders(data.value.providers);
        }
      } catch (e) {
        console.error("Kargo ayarları yüklenemedi:", e);
      }
    }
    loadSettings();
  }, []);

  function toggle(id: string) {
    setProviders(
      providers.map((p) => (p.id === id ? { ...p, enabled: !p.enabled } : p))
    );
  }

  function update(id: string, field: "price" | "freeLimit", value: string) {
    const num = Math.round(parseFloat(value || "0") * 100);
    setProviders(
      providers.map((p) => (p.id === id ? { ...p, [field]: num } : p))
    );
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setSaved(false);

    try {
      const res = await fetch("/api/admin/settings", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          key: "cargo",
          value: {
            providers,
            updatedAt: new Date().toISOString(),
          },
        }),
      });

      if (res.ok) {
        setSaved(true);
        setTimeout(() => setSaved(false), 3000);
      } else {
        alert("Kargo ayarları kaydedilemedi.");
      }
    } catch {
      alert("Bağlantı hatası.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div>
      <div className="flex items-center gap-3">
        <Truck className="size-7 text-brand-500" />
        <div>
          <h2 className="text-2xl font-extrabold text-ink">Kargo Ayarları</h2>
          <p className="text-sm font-bold text-mocha">
            Kargo firmalarını ve ücretsiz kargo eşiklerini yapılandırın
          </p>
        </div>
      </div>

      <form onSubmit={handleSave} className="mt-8 space-y-4">
        {providers.map((p) => (
          <div
            key={p.id}
            className={`flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-sm ring-1 transition-all sm:flex-row sm:items-center ${
              p.enabled ? "ring-brand-300 bg-brand-50/30" : "ring-slate-200 opacity-70"
            }`}
          >
            <div className="flex flex-1 items-center gap-4">
              <label className="relative inline-flex cursor-pointer items-center">
                <input
                  type="checkbox"
                  checked={p.enabled}
                  onChange={() => toggle(p.id)}
                  className="peer sr-only"
                />
                <div className="h-6 w-11 rounded-full bg-slate-300 after:absolute after:left-[2px] after:top-[2px] after:size-5 after:rounded-full after:bg-white after:transition-all peer-checked:bg-brand-500 peer-checked:after:translate-x-5" />
              </label>
              <div>
                <p className="font-extrabold text-ink">{p.name}</p>
                <p className="text-xs font-bold text-mocha">
                  {p.enabled ? "Aktif" : "Pasif"}
                </p>
              </div>
            </div>

            <div className="flex flex-wrap gap-3">
              <div>
                <label className="mb-1 block text-[10px] font-extrabold uppercase tracking-wider text-mocha">
                  Kargo Ücreti (₺)
                </label>
                <input
                  type="number"
                  step="0.01"
                  value={(p.price / 100).toFixed(2)}
                  onChange={(e) => update(p.id, "price", e.target.value)}
                  disabled={!p.enabled}
                  className="w-28 rounded-xl border-2 border-slate-200 bg-slate-50 px-3 py-2 text-sm font-bold text-ink outline-none focus:border-brand-400 disabled:opacity-40"
                />
              </div>
              <div>
                <label className="mb-1 block text-[10px] font-extrabold uppercase tracking-wider text-mocha">
                  Ücretsiz Kargo Eşiği (₺)
                </label>
                <input
                  type="number"
                  step="0.01"
                  value={(p.freeLimit / 100).toFixed(2)}
                  onChange={(e) => update(p.id, "freeLimit", e.target.value)}
                  disabled={!p.enabled}
                  className="w-32 rounded-xl border-2 border-slate-200 bg-slate-50 px-3 py-2 text-sm font-bold text-ink outline-none focus:border-brand-400 disabled:opacity-40"
                />
              </div>
            </div>
          </div>
        ))}

        <button
          type="submit"
          disabled={loading}
          className="flex w-full items-center justify-center gap-2 rounded-xl bg-ink py-4 text-sm font-extrabold text-white shadow-xl transition-all hover:bg-brand-600 active:scale-95 disabled:opacity-50"
        >
          {loading ? (
            <Loader2 className="size-5 animate-spin" />
          ) : saved ? (
            <>
              <CheckCircle2 className="size-5" /> Kaydedildi!
            </>
          ) : (
            <>
              <Save className="size-5" /> Kargo Ayarlarını Kaydet
            </>
          )}
        </button>
      </form>
    </div>
  );
}