"use client";

import { useState } from "react";
import { Trash2, Save, Edit2, X } from "lucide-react";
import { updatePartner } from "../../actions";
import { useRouter } from "next/navigation";
import Image from "next/image";

export default function PartnerRow({ partner, onDelete }: { partner: any, onDelete: any }) {
    const [isEditing, setIsEditing] = useState(false);
    const [name, setName] = useState(partner.name);
    const [displayOrder, setDisplayOrder] = useState(partner.display_order);
    const [isLoading, setIsLoading] = useState(false);
    const router = useRouter();

    const handleSave = async () => {
        setIsLoading(true);
        const res = await updatePartner(partner.id, name, Number(displayOrder));
        setIsLoading(false);
        if (res.success) {
            setIsEditing(false);
            router.refresh();
        } else {
            alert("Güncellenirken bir hata oluştu");
        }
    };

    return (
        <tr className="hover:bg-white/[0.02] transition-colors border-b border-white/10 last:border-0">
            <td className="px-6 py-4">
                {isEditing ? (
                    <input
                        type="number"
                        value={displayOrder}
                        onChange={(e) => setDisplayOrder(e.target.value)}
                        className="w-16 bg-white/5 border border-white/10 rounded px-2 py-1 text-white focus:border-primary outline-none"
                    />
                ) : (
                    <span className="font-bold text-white/40">{partner.display_order}</span>
                )}
            </td>
            <td className="px-6 py-4">
                <div className="flex items-center gap-4">
                    {/* Logo Preview */}
                    <div className="w-24 h-16 bg-white/5 border border-white/10 rounded-lg flex items-center justify-center overflow-hidden p-2 group relative">
                        {partner.logo ? (
                            <img 
                                src={partner.logo} 
                                alt={partner.name}
                                className="w-full h-full object-contain opacity-90 group-hover:opacity-100 transition-opacity transform scale-[4]"
                            />
                        ) : (
                            <span className="text-[10px] text-white/20">Logo Yok</span>
                        )}
                    </div>
                    {/* Tiny Path Info */}
                    <div className="hidden xl:block">
                        <div className="text-[10px] text-white/20 font-mono max-w-[200px] truncate">
                            {partner.logo}
                        </div>
                    </div>
                </div>
            </td>
            <td className="px-6 py-4">
                {isEditing ? (
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        className="w-full max-w-md bg-white/5 border border-white/10 rounded px-3 py-1.5 text-white focus:border-primary outline-none"
                    />
                ) : (
                    <div className="font-bold text-white tracking-wide">{partner.name}</div>
                )}
            </td>
            <td className="px-6 py-4 text-right">
                <div className="flex justify-end items-center gap-2">
                    {isEditing ? (
                        <>
                            <button
                                onClick={handleSave}
                                disabled={isLoading}
                                className="p-2 bg-green-500/10 text-green-500 rounded-lg hover:bg-green-500 hover:text-white transition-all disabled:opacity-50"
                                title="Kaydet"
                            >
                                <Save className="w-4 h-4" />
                            </button>
                            <button
                                onClick={() => {
                                    setIsEditing(false);
                                    setName(partner.name);
                                    setDisplayOrder(partner.display_order);
                                }}
                                className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-white/10 hover:text-white transition-all"
                                title="İptal"
                            >
                                <X className="w-4 h-4" />
                            </button>
                        </>
                    ) : (
                        <>
                            <button
                                onClick={() => setIsEditing(true)}
                                className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-primary hover:text-white transition-all"
                                title="Düzenle"
                            >
                                <Edit2 className="w-4 h-4" />
                            </button>
                            <form action={onDelete} className="inline">
                                <input type="hidden" name="id" value={partner.id} />
                                <button 
                                    type="submit" 
                                    className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500 hover:text-white transition-all"
                                    title="Sil"
                                >
                                    <Trash2 className="w-4 h-4" />
                                </button>
                            </form>
                        </>
                    )}
                </div>
            </td>
        </tr>
    );
}