"use client";

import { useEffect, useState } from "react";
import { Plus, Trash2, Pencil, X, Star } from "lucide-react";
import MediaUploader, { type UploadResult } from "@/components/admin/MediaUploader";

interface Reference {
  _id: string;
  name: string;
  logoFileId: string;
  url?: string;
}

export default function AdminReferencesPage() {
  const [refs, setRefs] = useState<Reference[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Reference | null>(null);

  async function load() {
    setLoading(true);
    const r = await fetch("/api/references").then((res) => res.json());
    setRefs(r);
    setLoading(false);
  }

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

  async function del(id: string) {
    if (!confirm("Referans silinsin mi?")) return;
    await fetch(`/api/references/${id}`, { method: "DELETE" });
    load();
  }

  return (
    <div>
      <header className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-white inline-flex items-center gap-2">
            <Star className="w-6 h-6 text-brand-300" />
            Referanslar
          </h1>
          <p className="text-sm text-brand-300">
            Birlikte çalıştığınız sunucuların logolarını yönetin.
          </p>
        </div>
        <button
          className="btn-primary"
          onClick={() => {
            setEditing(null);
            setShowForm(true);
          }}
        >
          <Plus className="w-4 h-4" /> Yeni Referans
        </button>
      </header>

      {loading ? (
        <p className="text-brand-300">Yükleniyor...</p>
      ) : refs.length === 0 ? (
        <div className="glass rounded-2xl p-10 text-center">
          <p className="text-brand-300">Henüz referans yok.</p>
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-4">
          {refs.map((r) => (
            <div key={r._id} className="glass rounded-xl p-4">
              <div className="aspect-square bg-black/30 rounded-lg flex items-center justify-center p-4">
                <img
                  src={`/api/files/${r.logoFileId}`}
                  alt={r.name}
                  className="max-w-full max-h-full object-contain"
                />
              </div>
              <div className="mt-3 text-sm font-semibold text-white text-center truncate">
                {r.name}
              </div>
              <div className="mt-3 flex gap-2">
                <button
                  onClick={() => {
                    setEditing(r);
                    setShowForm(true);
                  }}
                  className="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 rounded-md bg-brand-700/40 hover:bg-brand-700/60 text-xs text-white"
                >
                  <Pencil className="w-3 h-3" /> Düzenle
                </button>
                <button
                  onClick={() => del(r._id)}
                  className="px-2 py-1.5 rounded-md bg-red-500/20 hover:bg-red-500/40 text-xs text-red-200"
                >
                  <Trash2 className="w-3 h-3" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {showForm && (
        <ReferenceFormModal
          reference={editing}
          onClose={() => {
            setShowForm(false);
            setEditing(null);
          }}
          onSaved={() => {
            setShowForm(false);
            setEditing(null);
            load();
          }}
        />
      )}
    </div>
  );
}

function ReferenceFormModal({
  reference,
  onClose,
  onSaved,
}: {
  reference: Reference | null;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [name, setName] = useState(reference?.name ?? "");
  const [url, setUrl] = useState(reference?.url ?? "");
  const [logo, setLogo] = useState<UploadResult | null>(
    reference?.logoFileId
      ? {
          fileId: reference.logoFileId,
          contentType: "",
          mediaType: "image",
          size: 0,
          name: reference.name,
        }
      : null,
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!name.trim()) return setError("İsim gerekli");
    if (!logo) return setError("Logo yükleyin");

    setSaving(true);
    const payload = {
      name: name.trim(),
      url,
      logoFileId: logo.fileId,
    };
    const url2 = reference ? `/api/references/${reference._id}` : "/api/references";
    const method = reference ? "PATCH" : "POST";
    const res = await fetch(url2, {
      method,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setSaving(false);
    if (!res.ok) {
      const d = await res.json();
      setError(d.error || "Hata");
      return;
    }
    onSaved();
  }

  return (
    <div
      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
      onClick={onClose}
    >
      <div
        className="bg-[#0c1320] border border-brand-700/40 rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-5 border-b border-brand-700/30 flex items-center justify-between">
          <h3 className="text-lg font-bold text-white">
            {reference ? "Referansı Düzenle" : "Yeni Referans"}
          </h3>
          <button onClick={onClose} className="text-brand-300 hover:text-white">
            <X className="w-5 h-5" />
          </button>
        </div>
        <form onSubmit={submit} className="p-5 space-y-4">
          <div>
            <label className="block text-sm text-brand-200 mb-1">İsim</label>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full bg-brand-900/40 border border-brand-700/40 rounded-lg px-3 py-2 text-white outline-none focus:border-brand-400"
              required
            />
          </div>
          <div>
            <label className="block text-sm text-brand-200 mb-1">
              URL (opsiyonel)
            </label>
            <input
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="https://"
              className="w-full bg-brand-900/40 border border-brand-700/40 rounded-lg px-3 py-2 text-white outline-none focus:border-brand-400"
            />
          </div>

          <MediaUploader
            value={logo}
            onChange={setLogo}
            label="Logo"
            accept="image/png,image/jpeg,image/webp,image/gif"
          />

          {error && (
            <p className="text-sm text-red-300 bg-red-500/10 border border-red-500/30 rounded-lg p-3">
              {error}
            </p>
          )}

          <div className="flex justify-end gap-2 pt-2">
            <button type="button" onClick={onClose} className="btn-secondary">
              İptal
            </button>
            <button type="submit" className="btn-primary" disabled={saving}>
              {saving ? "Kaydediliyor..." : reference ? "Güncelle" : "Oluştur"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}