"use client";

import { useState, useEffect } from "react";

interface Portofolio {
  id: string;
  slugId: string;
  slugEn: string;
  titleId: string;
  titleEn: string;
  clientName: string | null;
  descriptionId: string | null;
  descriptionEn: string | null;
  images: string | null;
  category: string | null;
  year: number | null;
  link: string | null;
  isFeatured: boolean;
}

export default function PortofolioPage() {
  const [items, setItems] = useState<Portofolio[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingItem, setEditingItem] = useState<Portofolio | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [formData, setFormData] = useState({
    slugId: "",
    slugEn: "",
    titleId: "",
    titleEn: "",
    clientName: "",
    descriptionId: "",
    descriptionEn: "",
    images: "",
    category: "",
    year: new Date().getFullYear(),
    link: "",
    isFeatured: false,
  });

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

  async function fetchItems() {
    const res = await fetch("/api/admin/portofolio");
    const data = await res.json();
    setItems(data);
    setLoading(false);
  }

  function resetForm() {
    setFormData({ slugId: "", slugEn: "", titleId: "", titleEn: "", clientName: "", descriptionId: "", descriptionEn: "", images: "", category: "", year: new Date().getFullYear(), link: "", isFeatured: false });
    setEditingItem(null);
  }

  function handleEdit(item: Portofolio) {
    setEditingItem(item);
    setFormData({
      slugId: item.slugId, slugEn: item.slugEn, titleId: item.titleId, titleEn: item.titleEn,
      clientName: item.clientName || "", descriptionId: item.descriptionId || "", descriptionEn: item.descriptionEn || "",
      images: item.images || "", category: item.category || "", year: item.year || new Date().getFullYear(),
      link: item.link || "", isFeatured: item.isFeatured,
    });
    setShowForm(true);
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const url = editingItem ? `/api/admin/portofolio/${editingItem.id}` : "/api/admin/portofolio";
    const method = editingItem ? "PUT" : "POST";
    await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...formData, year: Number(formData.year) }) });
    setShowForm(false); resetForm(); fetchItems();
  }

  async function handleDelete(id: string) {
    if (!confirm("Yakin ingin menghapus?")) return;
    await fetch(`/api/admin/portofolio/${id}`, { method: "DELETE" });
    fetchItems();
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-800">Portofolio</h1>
          <p className="text-gray-500">Kelola portofolio proyek</p>
        </div>
        <button onClick={() => { resetForm(); setShowForm(true); }} className="px-4 py-2 bg-brand-blue text-white rounded-lg hover:bg-brand-blue-dark transition-colors">
          + Tambah Portofolio
        </button>
      </div>

      {showForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-gray-100">
              <h2 className="text-lg font-semibold">{editingItem ? "Edit Portofolio" : "Tambah Portofolio"}</h2>
            </div>
            <form onSubmit={handleSubmit} className="p-6 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Slug (ID)</label><input type="text" value={formData.slugId} onChange={(e) => setFormData({ ...formData, slugId: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" required /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Slug (EN)</label><input type="text" value={formData.slugEn} onChange={(e) => setFormData({ ...formData, slugEn: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" required /></div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Judul (ID)</label><input type="text" value={formData.titleId} onChange={(e) => setFormData({ ...formData, titleId: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" required /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Judul (EN)</label><input type="text" value={formData.titleEn} onChange={(e) => setFormData({ ...formData, titleEn: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" required /></div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Klien</label><input type="text" value={formData.clientName} onChange={(e) => setFormData({ ...formData, clientName: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Kategori</label><input type="text" value={formData.category} onChange={(e) => setFormData({ ...formData, category: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" placeholder="Website, Aplikasi, dll" /></div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Deskripsi (ID)</label><textarea value={formData.descriptionId} onChange={(e) => setFormData({ ...formData, descriptionId: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" rows={3} /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Deskripsi (EN)</label><textarea value={formData.descriptionEn} onChange={(e) => setFormData({ ...formData, descriptionEn: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" rows={3} /></div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Tahun</label><input type="number" value={formData.year} onChange={(e) => setFormData({ ...formData, year: Number(e.target.value) })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" /></div>
                <div><label className="block text-sm font-medium text-gray-700 mb-1">Link</label><input type="text" value={formData.link} onChange={(e) => setFormData({ ...formData, link: e.target.value })} className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-blue focus:border-transparent outline-none" /></div>
              </div>
              <div className="flex items-center gap-2"><input type="checkbox" id="isFeatured" checked={formData.isFeatured} onChange={(e) => setFormData({ ...formData, isFeatured: e.target.checked })} className="w-4 h-4 text-brand-blue rounded" /><label htmlFor="isFeatured" className="text-sm text-gray-700">Featured</label></div>
              <div className="flex gap-3 pt-4">
                <button type="submit" className="px-6 py-2 bg-brand-blue text-white rounded-lg hover:bg-brand-blue-dark transition-colors">Simpan</button>
                <button type="button" onClick={() => { setShowForm(false); resetForm(); }} className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">Batal</button>
              </div>
            </form>
          </div>
        </div>
      )}

      <div className="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Judul (ID)</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Klien</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kategori</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tahun</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Featured</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Aksi</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {items.map((item) => (
              <tr key={item.id} className="hover:bg-gray-50">
                <td className="px-6 py-4 text-sm font-medium text-gray-800">{item.titleId}</td>
                <td className="px-6 py-4 text-sm text-gray-500">{item.clientName || "-"}</td>
                <td className="px-6 py-4 text-sm text-gray-500">{item.category || "-"}</td>
                <td className="px-6 py-4 text-sm text-gray-500">{item.year || "-"}</td>
                <td className="px-6 py-4">{item.isFeatured ? <span className="px-2 py-1 text-xs font-medium rounded-full bg-brand-blue/10 text-brand-blue">Yes</span> : <span className="text-gray-400 text-xs">No</span>}</td>
                <td className="px-6 py-4">
                  <div className="flex gap-2">
                    <button onClick={() => handleEdit(item)} className="px-3 py-1 text-sm text-brand-blue hover:bg-brand-blue/10 rounded-lg transition-colors">Edit</button>
                    <button onClick={() => handleDelete(item.id)} className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors">Hapus</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}