From 5a9b47c9f20ee43f18c3b80559d3d7fb4f15596e Mon Sep 17 00:00:00 2001
From: Harun CAN <haruncanmedia@gmail.com>
Date: Mon, 23 Mar 2026 01:19:37 +0300
Subject: [PATCH] main

---
 src/components/Admin.tsx   | 242 +++++++++++++++++++++++++++++++------
 src/components/Clients.tsx |  14 ++-
 2 files changed, 211 insertions(+), 45 deletions(-)

diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
index 99f81b9..576d261 100644
--- a/src/components/Admin.tsx
+++ b/src/components/Admin.tsx
@@ -32,8 +32,15 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
 
   // Client state
   const [newClientName, setNewClientName] = useState('');
+  const [newClientWebsite, setNewClientWebsite] = useState('');
   const [clientUploading, setClientUploading] = useState(false);
+  const [editingClientId, setEditingClientId] = useState<string | null>(null);
+  const [editingClientName, setEditingClientName] = useState('');
+  const [editingClientWebsite, setEditingClientWebsite] = useState('');
+  const [clientSaving, setClientSaving] = useState(false);
+  const [clientLogoUploading, setClientLogoUploading] = useState<string | null>(null);
   const clientFileRef = useRef<HTMLInputElement>(null);
+  const clientLogoChangeRef = useRef<HTMLInputElement>(null);
 
   // Audit Logs state
   const [auditLogs, setAuditLogs] = useState<api.AuditLogAPI[]>([]);
@@ -168,9 +175,10 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
         throw new Error('Sunucu görsel URL\'sini döndüremedi. Lütfen tekrar deneyin.');
       }
 
-      await api.createClient({ name: newClientName.trim(), logo: logoUrl });
+      await api.createClient({ name: newClientName.trim(), logo: logoUrl, website: newClientWebsite.trim() || undefined });
       await refreshClients();
       setNewClientName('');
+      setNewClientWebsite('');
       showMessage('Marka eklendi', 'success');
     } catch (err: any) {
       showMessage(err.message || 'Marka eklenemedi', 'error');
@@ -516,8 +524,8 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
 
                     <div className="p-4 bg-slate-900/50 border border-white/10 rounded-lg mb-6">
                       <h4 className="text-sm font-mono text-slate-400 mb-3">YENİ MARKA EKLE</h4>
-                      <div className="flex items-end gap-4">
-                        <div className="flex-1 space-y-2">
+                      <div className="grid md:grid-cols-2 gap-4 mb-4">
+                        <div className="space-y-2">
                           <label className="text-xs font-mono text-slate-500">MARKA ADI</label>
                           <input
                             type="text"
@@ -527,48 +535,204 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
                             placeholder="Netflix, Disney, Warner Bros..."
                           />
                         </div>
-                        <div>
+                        <div className="space-y-2">
+                          <label className="text-xs font-mono text-slate-500">WEB SİTESİ <span className="text-slate-600">(Opsiyonel — SEO backlink)</span></label>
                           <input
-                            ref={clientFileRef}
-                            type="file"
-                            accept="image/*"
-                            className="hidden"
-                            onChange={async (e) => {
-                              const file = e.target.files?.[0];
-                              if (file) await handleAddClient(file);
-                              e.target.value = '';
-                            }}
+                            type="url"
+                            value={newClientWebsite}
+                            onChange={(e) => setNewClientWebsite(e.target.value)}
+                            className="w-full bg-slate-950 border border-white/10 px-4 py-2.5 text-white focus:border-[#FF5733] outline-none transition-colors text-sm rounded-sm"
+                            placeholder="https://www.netflix.com"
                           />
-                          <button
-                            onClick={() => clientFileRef.current?.click()}
-                            disabled={clientUploading || !newClientName.trim()}
-                            className="flex items-center gap-2 px-4 py-2.5 bg-[#FF5733] text-white font-bold text-sm hover:bg-white hover:text-slate-950 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-sm"
-                          >
-                            <Upload className="w-4 h-4" />
-                            {clientUploading ? 'Yükleniyor...' : 'Logo Yükle & Ekle'}
-                          </button>
                         </div>
                       </div>
+                      <div className="flex items-center gap-4">
+                        <input
+                          ref={clientFileRef}
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (file) await handleAddClient(file);
+                            e.target.value = '';
+                          }}
+                        />
+                        <button
+                          onClick={() => clientFileRef.current?.click()}
+                          disabled={clientUploading || !newClientName.trim()}
+                          className="flex items-center gap-2 px-4 py-2.5 bg-[#FF5733] text-white font-bold text-sm hover:bg-white hover:text-slate-950 transition-colors disabled:opacity-50 disabled:cursor-not-allowed rounded-sm"
+                        >
+                          <Upload className="w-4 h-4" />
+                          {clientUploading ? 'Yükleniyor...' : 'Logo Yükle & Ekle'}
+                        </button>
+                        {newClientWebsite && (
+                          <span className="text-[10px] font-mono text-green-400/70 flex items-center gap-1">🔗 SEO backlink aktif</span>
+                        )}
+                      </div>
                     </div>
 
-                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                      {data.clients.map((client) => (
-                        <div key={client.id} className="relative group p-4 bg-slate-900/50 border border-white/10 rounded-lg flex flex-col items-center">
-                          <img
-                            src={api.getMediaUrl(client.logo)}
-                            alt={client.name}
-                            className="h-[60px] w-auto object-contain mb-3"
-                            style={{ maxWidth: '200px' }}
-                          />
-                          <span className="text-xs font-mono text-slate-400 text-center">{client.name}</span>
-                          <button
-                            onClick={() => handleRemoveClient(client.id)}
-                            className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1 text-red-400 hover:text-red-300"
-                          >
-                            <Trash2 className="w-4 h-4" />
-                          </button>
-                        </div>
-                      ))}
+                    {/* Hidden file input for logo change */}
+                    <input
+                      ref={clientLogoChangeRef}
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (file && editingClientId) {
+                          setClientLogoUploading(editingClientId);
+                          try {
+                            const response = await api.uploadFile(file);
+                            const media = (response as any).data || response;
+                            let logoUrl = '';
+                            if (media && typeof media === 'object') {
+                              if (media.url) logoUrl = media.url;
+                              else if (media.filename) logoUrl = `/uploads/${media.filename}`;
+                            }
+                            if (!logoUrl) throw new Error('Görsel URL alınamadı');
+                            await api.updateClient(editingClientId, { logo: logoUrl });
+                            await refreshClients();
+                            showMessage('Logo güncellendi', 'success');
+                          } catch (err: any) {
+                            showMessage(err.message || 'Logo güncellenemedi', 'error');
+                          } finally {
+                            setClientLogoUploading(null);
+                          }
+                        }
+                        e.target.value = '';
+                      }}
+                    />
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {data.clients.map((client) => {
+                        const isEditing = editingClientId === client.id;
+                        return (
+                          <div key={client.id} className={`relative group p-4 border rounded-lg flex flex-col transition-colors ${
+                            isEditing
+                              ? 'bg-slate-800/80 border-[#FF5733]/30'
+                              : 'bg-slate-900/50 border-white/10'
+                          }`}>
+                            {/* Logo area */}
+                            <div className="flex items-center justify-center mb-3 relative">
+                              <img
+                                src={api.getMediaUrl(client.logo)}
+                                alt={client.name}
+                                className={`h-[60px] w-auto object-contain transition-opacity ${
+                                  clientLogoUploading === client.id ? 'opacity-30' : ''
+                                }`}
+                                style={{ maxWidth: '200px' }}
+                              />
+                              {clientLogoUploading === client.id && (
+                                <span className="absolute text-xs text-white animate-pulse">Yükleniyor...</span>
+                              )}
+                              {isEditing && clientLogoUploading !== client.id && (
+                                <button
+                                  onClick={() => clientLogoChangeRef.current?.click()}
+                                  className="absolute inset-0 bg-black/50 rounded flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer"
+                                  title="Logo değiştir"
+                                >
+                                  <Upload className="w-5 h-5 text-white" />
+                                </button>
+                              )}
+                            </div>
+
+                            {/* Content area */}
+                            {isEditing ? (
+                              <div className="w-full space-y-3 mt-1">
+                                <div className="space-y-1">
+                                  <label className="text-[10px] font-mono text-slate-500">MARKA ADI</label>
+                                  <input
+                                    type="text"
+                                    value={editingClientName}
+                                    onChange={(e) => setEditingClientName(e.target.value)}
+                                    className="w-full bg-slate-950 border border-white/10 px-3 py-1.5 text-sm text-white focus:border-[#FF5733] outline-none rounded-sm"
+                                  />
+                                </div>
+                                <div className="space-y-1">
+                                  <label className="text-[10px] font-mono text-slate-500">WEB SİTESİ <span className="text-slate-600">(SEO)</span></label>
+                                  <input
+                                    type="url"
+                                    value={editingClientWebsite}
+                                    onChange={(e) => setEditingClientWebsite(e.target.value)}
+                                    className="w-full bg-slate-950 border border-white/10 px-3 py-1.5 text-sm text-white focus:border-[#FF5733] outline-none rounded-sm"
+                                    placeholder="https://www.example.com"
+                                  />
+                                </div>
+                                <div className="flex gap-2 pt-1">
+                                  <button
+                                    onClick={async () => {
+                                      setClientSaving(true);
+                                      try {
+                                        await api.updateClient(client.id, {
+                                          name: editingClientName.trim() || client.name,
+                                          website: editingClientWebsite.trim() || null as any,
+                                        });
+                                        await refreshClients();
+                                        setEditingClientId(null);
+                                        showMessage('Marka güncellendi', 'success');
+                                      } catch (err: any) {
+                                        showMessage(err.message || 'Güncellenemedi', 'error');
+                                      } finally {
+                                        setClientSaving(false);
+                                      }
+                                    }}
+                                    disabled={clientSaving}
+                                    className="flex-1 flex items-center justify-center gap-1 px-3 py-1.5 text-xs font-bold bg-[#FF5733] text-white rounded-sm hover:bg-white hover:text-slate-950 transition-colors disabled:opacity-50"
+                                  >
+                                    <Save className="w-3 h-3" />
+                                    {clientSaving ? 'Kaydediliyor...' : 'Kaydet'}
+                                  </button>
+                                  <button
+                                    onClick={() => setEditingClientId(null)}
+                                    className="px-3 py-1.5 text-xs text-slate-400 hover:text-white border border-white/10 rounded-sm transition-colors"
+                                  >
+                                    İptal
+                                  </button>
+                                </div>
+                              </div>
+                            ) : (
+                              <>
+                                <span className="text-xs font-mono text-slate-400 text-center mb-1">{client.name}</span>
+                                <span
+                                  className="text-[10px] font-mono px-2 py-0.5 rounded border transition-colors text-center"
+                                  style={{
+                                    borderColor: client.website ? 'rgba(74, 222, 128, 0.3)' : 'rgba(255,255,255,0.05)',
+                                    color: client.website ? 'rgb(74, 222, 128)' : 'rgb(71, 85, 105)',
+                                    backgroundColor: client.website ? 'rgba(74, 222, 128, 0.05)' : 'transparent',
+                                  }}
+                                >
+                                  {client.website ? `🔗 ${client.website.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '')}` : 'Web sitesi yok'}
+                                </span>
+                              </>
+                            )}
+
+                            {/* Action buttons (visible on hover when not editing) */}
+                            {!isEditing && (
+                              <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button
+                                  onClick={() => {
+                                    setEditingClientId(client.id);
+                                    setEditingClientName(client.name);
+                                    setEditingClientWebsite(client.website || '');
+                                  }}
+                                  className="p-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 rounded transition-colors"
+                                  title="Düzenle"
+                                >
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                                </button>
+                                <button
+                                  onClick={() => handleRemoveClient(client.id)}
+                                  className="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded transition-colors"
+                                  title="Sil"
+                                >
+                                  <Trash2 className="w-3.5 h-3.5" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
                     </div>
                   </section>
                 )}
diff --git a/src/components/Clients.tsx b/src/components/Clients.tsx
index 6e76d68..df95bca 100644
--- a/src/components/Clients.tsx
+++ b/src/components/Clients.tsx
@@ -30,16 +30,18 @@ export default function Clients() {
                     {duplicated.map((client, index) => (
                         <a
                             key={`${client.id}-${index}`}
-                            href={client.website || '#'}
+                            href={client.website || undefined}
                             target={client.website ? '_blank' : undefined}
-                            rel="noopener noreferrer"
-                            className="flex-shrink-0 group transition-all duration-500"
-                            title={client.name}
+                            rel={client.website ? 'noopener' : undefined}
+                            className={`flex-shrink-0 group transition-all duration-500 ${client.website ? 'cursor-pointer' : 'cursor-default'}`}
+                            title={client.website ? `${client.name} — Visit Website` : client.name}
+                            aria-label={client.website ? `Visit ${client.name} official website` : `${client.name} logo`}
+                            onClick={(e) => { if (!client.website) e.preventDefault(); }}
                         >
                             <img
                                 src={getMediaUrl(client.logo)}
-                                alt={client.name}
-                                className="h-[50px] md:h-[60px] w-auto object-contain opacity-95 group-hover:opacity-100 transition-all duration-500"
+                                alt={`${client.name} logo — official partner of Harun CAN Studio`}
+                                className={`h-[50px] md:h-[60px] w-auto object-contain opacity-95 group-hover:opacity-100 transition-all duration-500 ${client.website ? 'group-hover:scale-105' : ''}`}
                                 style={{ maxWidth: '250px' }}
                             />
                         </a>