"use client";

import { useEffect, useState, useCallback } from "react";
import AdminLayout from "@/components/admin/AdminLayout";
import {
  PlusIcon,
  EditIcon,
  TrashIcon,
  CheckIcon,
  XIcon,
  SpinnerIcon,
  MessageIcon,
} from "@/components/Icons";

interface Testimonial {
  id: number;
  clientName: string;
  clientRole: string | null;
  clientCompany: string | null;
  clientAvatar: string | null;
  content: string;
  rating: number | null;
  featured: boolean | null;
  published: boolean | null;
  sortOrder: number | null;
  createdAt: string;
}

export default function TestimonialsPage() {
  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<Testimonial | null>(null);
  const [saving, setSaving] = useState(false);

  const [formData, setFormData] = useState({
    clientName: "",
    clientRole: "",
    clientCompany: "",
    content: "",
    rating: 5,
    featured: false,
    published: true,
  });

  const fetchTestimonials = useCallback(async () => {
    try {
      const res = await fetch("/api/admin/testimonials");
      if (res.ok) {
        const data = await res.json();
        setTestimonials(data.testimonials);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const openForm = (testimonial?: Testimonial) => {
    if (testimonial) {
      setEditing(testimonial);
      setFormData({
        clientName: testimonial.clientName,
        clientRole: testimonial.clientRole || "",
        clientCompany: testimonial.clientCompany || "",
        content: testimonial.content,
        rating: testimonial.rating || 5,
        featured: testimonial.featured || false,
        published: testimonial.published !== false,
      });
    } else {
      setEditing(null);
      setFormData({
        clientName: "",
        clientRole: "",
        clientCompany: "",
        content: "",
        rating: 5,
        featured: false,
        published: true,
      });
    }
    setShowForm(true);
  };

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);

    try {
      const url = editing
        ? `/api/admin/testimonials/${editing.id}`
        : "/api/admin/testimonials";
      const method = editing ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });

      if (res.ok) {
        setShowForm(false);
        fetchTestimonials();
      }
    } catch (e) {
      console.error(e);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Delete this testimonial?")) return;

    try {
      await fetch(`/api/admin/testimonials/${id}`, { method: "DELETE" });
      setTestimonials(testimonials.filter((t) => t.id !== id));
    } catch (e) {
      console.error(e);
    }
  };

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <span key={i} className={i < rating ? "text-amber-400" : "text-text-muted"}>
        ★
      </span>
    ));
  };

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Testimonials</h1>
            <p className="text-text-muted mt-1">
              Manage client testimonials and reviews
            </p>
          </div>
          <button
            onClick={() => openForm()}
            className="px-4 py-2.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2 text-sm"
          >
            <PlusIcon size={16} />
            Add Testimonial
          </button>
        </div>

        {/* Testimonials grid */}
        {loading ? (
          <div className="py-20 text-center">
            <SpinnerIcon size={40} className="text-primary mx-auto" />
          </div>
        ) : testimonials.length === 0 ? (
          <div className="glass rounded-xl p-12 text-center">
            <MessageIcon size={48} className="text-text-muted mx-auto mb-4" />
            <p className="text-text-muted text-lg mb-4">No testimonials yet</p>
            <button
              onClick={() => openForm()}
              className="inline-flex items-center gap-1 text-primary-light hover:text-accent"
            >
              <PlusIcon size={14} /> Add your first testimonial
            </button>
          </div>
        ) : (
          <div className="grid md:grid-cols-2 gap-4">
            {testimonials.map((t) => (
              <div
                key={t.id}
                className="glass rounded-xl p-6 relative group"
              >
                {/* Status badges */}
                <div className="absolute top-4 right-4 flex items-center gap-2">
                  {t.featured && (
                    <span className="px-2 py-0.5 text-[10px] bg-amber-500/10 text-amber-400 rounded font-semibold">
                      ⭐ Featured
                    </span>
                  )}
                  <span
                    className={`w-2 h-2 rounded-full ${
                      t.published ? "bg-success" : "bg-warning"
                    }`}
                  />
                </div>

                {/* Content */}
                <div className="flex items-start gap-4 mb-4">
                  <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white text-lg font-bold shrink-0">
                    {t.clientName.charAt(0)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-bold text-text-primary">{t.clientName}</h3>
                    <p className="text-sm text-text-muted">
                      {t.clientRole}
                      {t.clientCompany && ` at ${t.clientCompany}`}
                    </p>
                    <div className="flex items-center gap-0.5 mt-1">
                      {renderStars(t.rating || 5)}
                    </div>
                  </div>
                </div>

                <p className="text-text-secondary text-sm leading-relaxed italic mb-4">
                  &ldquo;{t.content}&rdquo;
                </p>

                {/* Actions */}
                <div className="flex items-center gap-2 pt-4 border-t border-border opacity-0 group-hover:opacity-100 transition-opacity">
                  <button
                    onClick={() => openForm(t)}
                    className="flex-1 py-2 text-sm font-medium text-text-secondary hover:text-primary-light rounded-lg hover:bg-white/5 transition-colors flex items-center justify-center gap-1"
                  >
                    <EditIcon size={14} /> Edit
                  </button>
                  <button
                    onClick={() => handleDelete(t.id)}
                    className="flex-1 py-2 text-sm font-medium text-text-secondary hover:text-danger rounded-lg hover:bg-danger/10 transition-colors flex items-center justify-center gap-1"
                  >
                    <TrashIcon size={14} /> Delete
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Form Modal */}
        {showForm && (
          <div
            className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
            onClick={(e) => {
              if (e.target === e.currentTarget) setShowForm(false);
            }}
          >
            <div className="bg-surface-card rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto border border-border">
              <div className="sticky top-0 bg-surface-card border-b border-border p-6 flex items-center justify-between">
                <h2 className="text-lg font-bold text-text-primary">
                  {editing ? "Edit Testimonial" : "Add Testimonial"}
                </h2>
                <button
                  onClick={() => setShowForm(false)}
                  className="p-2 text-text-muted hover:text-text-primary rounded-lg"
                >
                  <XIcon size={18} />
                </button>
              </div>

              <form onSubmit={handleSave} className="p-6 space-y-5">
                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Client Name *
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.clientName}
                    onChange={(e) =>
                      setFormData({ ...formData, clientName: e.target.value })
                    }
                    placeholder="John Doe"
                    className="w-full"
                  />
                </div>

                <div className="grid sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Role/Position
                    </label>
                    <input
                      type="text"
                      value={formData.clientRole}
                      onChange={(e) =>
                        setFormData({ ...formData, clientRole: e.target.value })
                      }
                      placeholder="CEO"
                      className="w-full"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-text-secondary mb-1.5">
                      Company
                    </label>
                    <input
                      type="text"
                      value={formData.clientCompany}
                      onChange={(e) =>
                        setFormData({ ...formData, clientCompany: e.target.value })
                      }
                      placeholder="Acme Inc"
                      className="w-full"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Testimonial *
                  </label>
                  <textarea
                    rows={4}
                    required
                    value={formData.content}
                    onChange={(e) =>
                      setFormData({ ...formData, content: e.target.value })
                    }
                    placeholder="Write the testimonial content..."
                    className="w-full"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-text-secondary mb-1.5">
                    Rating
                  </label>
                  <div className="flex items-center gap-2">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <button
                        key={star}
                        type="button"
                        onClick={() => setFormData({ ...formData, rating: star })}
                        className={`text-2xl transition-colors ${
                          star <= formData.rating
                            ? "text-amber-400"
                            : "text-text-muted hover:text-amber-300"
                        }`}
                      >
                        ★
                      </button>
                    ))}
                    <span className="text-sm text-text-muted ml-2">
                      {formData.rating}/5
                    </span>
                  </div>
                </div>

                <div className="flex items-center gap-6">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.featured}
                      onChange={(e) =>
                        setFormData({ ...formData, featured: e.target.checked })
                      }
                      className="w-4 h-4 rounded"
                    />
                    <span className="text-sm text-text-secondary">Featured</span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.published}
                      onChange={(e) =>
                        setFormData({ ...formData, published: e.target.checked })
                      }
                      className="w-4 h-4 rounded"
                    />
                    <span className="text-sm text-text-secondary">Published</span>
                  </label>
                </div>

                <div className="flex justify-end gap-3 pt-4 border-t border-border">
                  <button
                    type="button"
                    onClick={() => setShowForm(false)}
                    className="px-5 py-2.5 border border-border text-text-secondary rounded-xl hover:bg-white/5 transition-colors text-sm"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={saving}
                    className="px-5 py-2.5 bg-primary text-white font-semibold rounded-xl hover:bg-primary-dark transition-colors flex items-center gap-2 text-sm disabled:opacity-50"
                  >
                    {saving ? (
                      <>
                        <SpinnerIcon size={16} />
                        Saving...
                      </>
                    ) : (
                      <>
                        <CheckIcon size={16} />
                        {editing ? "Update" : "Create"}
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </AdminLayout>
  );
}