"use client";

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

interface Review {
  _id: string;
  author: string;
  role?: string;
  content: string;
  rating: number;
  avatarFileId?: string | null;
}

export default function AdminReviewsPage() {
  const [reviews, setReviews] = useState<Review[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Review | null>(null);

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

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

  async function del(id: string) {
    if (!confirm("Yorum silinsin mi?")) return;
    await fetch(`/api/reviews/${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">
            <MessageSquare className="w-6 h-6 text-brand-300" />
            Müşteri Yorumları
          </h1>
          <p className="text-sm text-brand-300">
            Ana sayfada gösterilecek yorumları yönetin.
          </p>
        </div>
        <button
          className="btn-primary"
          onClick={() => {
            setEditing(null);
            setShowForm(true);
          }}
        >
          <Plus className="w-4 h-4" /> Yeni Yorum
        </button>
      </header>

      {loading ? (
        <p className="text-brand-300">Yükleniyor...</p>
      ) : reviews.length === 0 ? (
        <div className="glass rounded-2xl p-10 text-center">
          <p className="text-brand-300">Henüz yorum yok.</p>
        </div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2">
          {reviews.map((r) => (
            <div key={r._id} className="glass rounded-xl p-4">
              <div className="flex items-center gap-1 mb-2">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star
                    key={i}
                    className={`w-3.5 h-3.5 ${
                      i < r.rating
                        ? "text-amber-400 fill-amber-400"
                        : "text-brand-700"
                    }`}
                  />
                ))}
              </div>
              <p className="text-sm text-brand-100 line-clamp-3 mb-3">
                {r.content}
              </p>
              <div className="flex items-center gap-2 mb-3">
                {r.avatarFileId ? (
                  <img
                    src={`/api/files/${r.avatarFileId}`}
                    alt={r.author}
                    className="w-8 h-8 rounded-full object-cover"
                  />
                ) : (
                  <div className="w-8 h-8 rounded-full bg-brand-700/40 flex items-center justify-center text-xs font-bold text-white">
                    {r.author.slice(0, 2).toUpperCase()}
                  </div>
                )}
                <div className="flex-1 min-w-0">
                  <div className="text-xs font-bold text-white truncate">
                    {r.author}
                  </div>
                  {r.role && (
                    <div className="text-[10px] text-brand-400 truncate">
                      {r.role}
                    </div>
                  )}
                </div>
              </div>
              <div className="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 && (
        <ReviewFormModal
          review={editing}
          onClose={() => {
            setShowForm(false);
            setEditing(null);
          }}
          onSaved={() => {
            setShowForm(false);
            setEditing(null);
            load();
          }}
        />
      )}
    </div>
  );
}

function ReviewFormModal({
  review,
  onClose,
  onSaved,
}: {
  review: Review | null;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [author, setAuthor] = useState(review?.author ?? "");
  const [role, setRole] = useState(review?.role ?? "");
  const [content, setContent] = useState(review?.content ?? "");
  const [rating, setRating] = useState(review?.rating ?? 5);
  const [avatar, setAvatar] = useState<UploadResult | null>(
    review?.avatarFileId
      ? {
          fileId: review.avatarFileId,
          contentType: "",
          mediaType: "image",
          size: 0,
          name: "avatar",
        }
      : null,
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (!author.trim() || !content.trim()) {
      setError("İsim ve yorum gerekli");
      return;
    }
    setSaving(true);
    const payload = {
      author: author.trim(),
      role,
      content,
      rating,
      avatarFileId: avatar?.fileId ?? null,
    };
    const url = review ? `/api/reviews/${review._id}` : "/api/reviews";
    const method = review ? "PATCH" : "POST";
    const res = await fetch(url, {
      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">
            {review ? "Yorumu Düzenle" : "Yeni Yorum"}
          </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 className="grid gap-4 sm:grid-cols-2">
            <div>
              <label className="block text-sm text-brand-200 mb-1">İsim</label>
              <input
                value={author}
                onChange={(e) => setAuthor(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">
                Ünvan/Rol (opsiyonel)
              </label>
              <input
                value={role}
                onChange={(e) => setRole(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"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm text-brand-200 mb-1">Yorum</label>
            <textarea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              rows={4}
              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">Puan</label>
            <div className="flex items-center gap-1">
              {Array.from({ length: 5 }).map((_, i) => (
                <button
                  key={i}
                  type="button"
                  onClick={() => setRating(i + 1)}
                  className="p-1"
                >
                  <Star
                    className={`w-6 h-6 ${
                      i < rating
                        ? "text-amber-400 fill-amber-400"
                        : "text-brand-700"
                    }`}
                  />
                </button>
              ))}
            </div>
          </div>

          <MediaUploader
            value={avatar}
            onChange={setAvatar}
            label="Avatar (opsiyonel)"
            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..." : review ? "Güncelle" : "Oluştur"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}