'use client';

import { useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';

interface PlanDef {
  id: string;
  name: string;
  slug: string;
  price: number | null;
  currency: string;
}

interface Tenant {
  id: string;
  name: string;
  slug: string;
  email: string;
  isActive: boolean;
}

interface Subscription {
  id: string;
  plan: string;
  status: string;
  billingInterval: string;
  startsAt: string;
  endsAt: string | null;
  createdAt: string;
  tenant: Tenant;
  planDefinition: PlanDef | null;
  pricing: {
    monthly: number | null;
    yearly: number | null;
    currency: string;
    currentAmount: number | null;
  };
}

const STATUS_BADGE: Record<string, string> = {
  TRIAL: 'bg-amber-50 text-amber-700 border border-amber-200',
  ACTIVE: 'bg-emerald-50 text-emerald-700 border border-emerald-200',
  SUSPENDED: 'bg-red-50 text-red-700 border border-red-200',
  CANCELLED: 'bg-slate-100 text-slate-500 border border-slate-200',
};
const STATUS_LABELS: Record<string, string> = {
  TRIAL: 'Deneme', ACTIVE: 'Aktif', SUSPENDED: 'Askıda', CANCELLED: 'İptal',
};
const ALL_STATUSES = ['TRIAL', 'ACTIVE', 'SUSPENDED', 'CANCELLED'];

function fmt(d: string | null) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('tr-TR', { day: '2-digit', month: 'short', year: 'numeric' });
}
function expiringSoon(endsAt: string | null) {
  if (!endsAt) return false;
  const diff = new Date(endsAt).getTime() - Date.now();
  return diff > 0 && diff < 7 * 86400000;
}
function daysLeft(endsAt: string | null) {
  if (!endsAt) return null;
  return Math.max(0, Math.ceil((new Date(endsAt).getTime() - Date.now()) / 86400000));
}

export default function SubscriptionsPage() {
  const [items, setItems] = useState<Subscription[]>([]);
  const [planDefs, setPlanDefs] = useState<PlanDef[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState('');
  const [editSub, setEditSub] = useState<Subscription | null>(null);
  const [editForm, setEditForm] = useState({
    planDefinitionId: '',
    billingInterval: 'MONTHLY',
    status: '',
    startsAt: '',
    endsAt: '',
  });
  const [saving, setSaving] = useState(false);
  const [toast, setToast] = useState<{ msg: string; type: 'success' | 'error' } | null>(null);

  const showToast = (msg: string, type: 'success' | 'error' = 'success') => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 3500);
  };

  const load = async () => {
    setLoading(true);
    const [subsRes, plansRes] = await Promise.all([
      apiFetchJson<{ items: Subscription[] }>('/v1/platform/subscriptions'),
      apiFetchJson<{ items: PlanDef[] }>('/v1/platform/plan-definitions'),
    ]);
    if (subsRes.error === null && subsRes.data) setItems(subsRes.data.items);
    if (plansRes.error === null && plansRes.data) setPlanDefs(plansRes.data.items);
    setLoading(false);
  };

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

  const filtered = items.filter((s) => {
    const q = search.toLowerCase();
    const matchSearch = !q || s.tenant.name.toLowerCase().includes(q) || s.tenant.slug.includes(q) || (s.planDefinition?.name ?? '').toLowerCase().includes(q);
    const matchStatus = !filterStatus || s.status === filterStatus;
    return matchSearch && matchStatus;
  });

  const openEdit = (sub: Subscription) => {
    setEditSub(sub);
    setEditForm({
      planDefinitionId: sub.planDefinition?.id ?? '',
      billingInterval: sub.billingInterval,
      status: sub.status,
      startsAt: sub.startsAt ? sub.startsAt.slice(0, 10) : '',
      endsAt: sub.endsAt ? sub.endsAt.slice(0, 10) : '',
    });
  };

  // Interval değişince endsAt'ı güncelle
  const handleEditIntervalChange = (interval: string) => {
    const starts = editForm.startsAt ? new Date(editForm.startsAt) : new Date();
    let ends: Date;
    if (interval === 'YEARLY') {
      ends = new Date(starts.getFullYear() + 1, starts.getMonth(), starts.getDate());
    } else {
      ends = new Date(starts.getFullYear(), starts.getMonth() + 1, starts.getDate());
    }
    setEditForm((prev) => ({ ...prev, billingInterval: interval, endsAt: ends.toISOString().slice(0, 10) }));
  };

  // Plan değişince limit + tarih hesapla
  const handleEditPlanChange = (planId: string) => {
    const plan = planDefs.find((p) => p.id === planId);
    const starts = editForm.startsAt ? new Date(editForm.startsAt) : new Date();
    let ends: Date;
    if (editForm.billingInterval === 'YEARLY') {
      ends = new Date(starts.getFullYear() + 1, starts.getMonth(), starts.getDate());
    } else {
      ends = new Date(starts.getFullYear(), starts.getMonth() + 1, starts.getDate());
    }
    setEditForm((prev) => ({
      ...prev,
      planDefinitionId: planId,
      endsAt: ends.toISOString().slice(0, 10),
    }));
  };

  const handleSave = async () => {
    if (!editSub) return;
    setSaving(true);
    const body: Record<string, unknown> = {
      status: editForm.status,
      billingInterval: editForm.billingInterval,
    };
    if (editForm.planDefinitionId) body.planDefinitionId = editForm.planDefinitionId;
    if (editForm.startsAt) body.startsAt = editForm.startsAt;
    if (editForm.endsAt) body.endsAt = editForm.endsAt;

    const res = await apiFetchJson(`/v1/platform/subscriptions/${editSub.id}`, {
      method: 'PATCH',
      body: JSON.stringify(body),
    });
    if (res.error === null) {
      showToast('Abonelik güncellendi');
      setEditSub(null);
      load();
    } else {
      showToast(res.error || 'Hata oluştu', 'error');
    }
    setSaving(false);
  };

  const expiring = items.filter((s) => expiringSoon(s.endsAt));

  // İstatistikler
  const stats = {
    active: items.filter((s) => s.status === 'ACTIVE').length,
    trial: items.filter((s) => s.status === 'TRIAL').length,
    suspended: items.filter((s) => s.status === 'SUSPENDED').length,
    monthly: items.filter((s) => s.billingInterval === 'MONTHLY' && s.status === 'ACTIVE').length,
    yearly: items.filter((s) => s.billingInterval === 'YEARLY' && s.status === 'ACTIVE').length,
    mrr: items.filter((s) => s.status === 'ACTIVE').reduce((sum, s) => sum + (s.pricing.monthly ?? 0), 0),
    arr: items.filter((s) => s.status === 'ACTIVE' && s.billingInterval === 'YEARLY').reduce((sum, s) => sum + (s.pricing.yearly ?? 0), 0),
  };

  const selectedEditPlan = planDefs.find((p) => p.id === editForm.planDefinitionId);
  const editMonthly = selectedEditPlan?.price ? Number(selectedEditPlan.price) : null;
  const editYearly = editMonthly ? Math.round(editMonthly * 12 * 0.85) : null;

  return (
    <div className="space-y-8">
      {toast && (
        <div className={`fixed top-5 right-5 z-50 rounded-xl px-5 py-3.5 text-sm font-medium shadow-xl ${toast.type === 'success' ? 'bg-emerald-600 text-white' : 'bg-red-600 text-white'}`}>
          {toast.msg}
        </div>
      )}

      {/* Header */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-violet-950 to-slate-900 px-8 py-10 text-white shadow-xl">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-16 -right-16 h-56 w-56 rounded-full bg-violet-500/10 blur-3xl" />
          <div className="absolute -bottom-8 -left-8 h-40 w-40 rounded-full bg-indigo-500/10 blur-3xl" />
        </div>
        <div className="relative flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 text-violet-300 text-sm font-medium mb-2">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
              </svg>
              Abonelik Yönetimi
            </div>
            <h1 className="text-3xl font-bold tracking-tight">Abonelikler</h1>
            <p className="mt-1.5 text-slate-300">Tüm okul aboneliklerini görüntüleyin ve yönetin.</p>
          </div>
          <div className="text-right">
            <div className="text-3xl font-bold">{loading ? '—' : items.length}</div>
            <div className="text-sm text-slate-400">Toplam abonelik</div>
          </div>
        </div>
        {/* Stat pills */}
        <div className="relative mt-8 flex flex-wrap gap-3">
          {[
            { label: 'Aktif', value: stats.active, color: 'bg-emerald-500/20 text-emerald-300' },
            { label: 'Deneme', value: stats.trial, color: 'bg-amber-500/20 text-amber-300' },
            { label: 'Askıda', value: stats.suspended, color: 'bg-red-500/20 text-red-300' },
            { label: 'Aylık ödeme', value: stats.monthly, color: 'bg-blue-500/20 text-blue-300' },
            { label: 'Yıllık ödeme', value: stats.yearly, color: 'bg-violet-500/20 text-violet-300' },
          ].map((s) => (
            <div key={s.label} className={`rounded-lg px-3 py-1.5 text-sm font-medium ${s.color}`}>
              {s.value} {s.label}
            </div>
          ))}
        </div>
      </div>

      {/* MRR / ARR cards */}
      <div className="grid grid-cols-2 gap-4">
        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
          <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Aylık Gelir (MRR)</div>
          <div className="text-2xl font-bold text-slate-900">
            ₺{stats.mrr.toLocaleString('tr-TR')}
          </div>
          <div className="text-xs text-slate-400 mt-1">{stats.active} aktif abonelik</div>
        </div>
        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
          <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Yıllık Ödemeler (ARR)</div>
          <div className="text-2xl font-bold text-slate-900">
            ₺{stats.arr.toLocaleString('tr-TR')}
          </div>
          <div className="text-xs text-slate-400 mt-1">{stats.yearly} yıllık abone</div>
        </div>
      </div>

      {/* Expiring warning */}
      {expiring.length > 0 && (
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
          <div className="flex items-start gap-3">
            <svg className="h-5 w-5 text-amber-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <div>
              <p className="text-sm font-semibold text-amber-800">{expiring.length} abonelik 7 gün içinde sona eriyor</p>
              <div className="mt-1 flex flex-wrap gap-2">
                {expiring.map((s) => (
                  <button key={s.id} onClick={() => openEdit(s)} className="text-xs text-amber-700 underline hover:text-amber-900">
                    {s.tenant.name} ({daysLeft(s.endsAt)}g)
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Filters */}
      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
        <div className="flex flex-col sm:flex-row gap-3">
          <div className="relative flex-1">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Okul adı, slug veya plan adı ara..."
              className="w-full rounded-xl border border-slate-200 bg-slate-50 pl-9 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
            />
          </div>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="rounded-xl border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"
          >
            <option value="">Tüm Durumlar</option>
            {ALL_STATUSES.map((s) => <option key={s} value={s}>{STATUS_LABELS[s]}</option>)}
          </select>
        </div>
        <div className="mt-4 flex gap-2 flex-wrap">
          {[
            { label: 'Tümü', count: items.length, value: '' },
            { label: 'Aktif', count: stats.active, value: 'ACTIVE' },
            { label: 'Deneme', count: stats.trial, value: 'TRIAL' },
            { label: 'Askıda', count: stats.suspended, value: 'SUSPENDED' },
            { label: 'İptal', count: items.filter((s) => s.status === 'CANCELLED').length, value: 'CANCELLED' },
          ].map((tab) => (
            <button
              key={tab.value}
              onClick={() => setFilterStatus(tab.value)}
              className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
                filterStatus === tab.value ? 'bg-violet-600 text-white shadow-sm' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
              }`}
            >
              {tab.label}
              <span className={`rounded-full px-1.5 py-0.5 text-xs ${filterStatus === tab.value ? 'bg-white/20 text-white' : 'bg-white text-slate-500'}`}>
                {tab.count}
              </span>
            </button>
          ))}
        </div>
      </div>

      {/* Table */}
      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        {loading ? (
          <div className="p-6 space-y-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-14 rounded-xl bg-slate-100 animate-pulse" />
            ))}
          </div>
        ) : filtered.length === 0 ? (
          <div className="py-16 text-center text-slate-400">
            <p className="text-sm">Abonelik bulunamadı</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100">
                  <th className="text-left px-6 py-3.5 font-semibold text-slate-600">Okul</th>
                  <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Plan</th>
                  <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Ödeme</th>
                  <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Durum</th>
                  <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Süre</th>
                  <th className="px-4 py-3.5" />
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filtered.map((sub) => {
                  const days = daysLeft(sub.endsAt);
                  const soon = expiringSoon(sub.endsAt);
                  return (
                    <tr key={sub.id} className="hover:bg-slate-50/60 transition-colors">
                      {/* Okul */}
                      <td className="px-6 py-4">
                        <div className="font-semibold text-slate-900">{sub.tenant.name}</div>
                        <div className="text-xs text-slate-400 font-mono mt-0.5">{sub.tenant.slug}</div>
                        <div className="text-xs text-slate-400">{sub.tenant.email}</div>
                      </td>
                      {/* Plan */}
                      <td className="px-4 py-4">
                        {sub.planDefinition ? (
                          <div>
                            <div className="font-medium text-slate-800">{sub.planDefinition.name}</div>
                            {sub.planDefinition.price != null && (
                              <div className="text-xs text-slate-500 mt-0.5">
                                ₺{Number(sub.planDefinition.price).toLocaleString('tr-TR')}/ay
                              </div>
                            )}
                          </div>
                        ) : (
                          <span className="text-slate-400 text-xs">Plan yok</span>
                        )}
                      </td>
                      {/* Ödeme tipi + tutar */}
                      <td className="px-4 py-4">
                        <div className="flex items-center gap-1.5">
                          <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${
                            sub.billingInterval === 'YEARLY'
                              ? 'bg-violet-100 text-violet-700'
                              : 'bg-blue-100 text-blue-700'
                          }`}>
                            {sub.billingInterval === 'YEARLY' ? 'Yıllık' : 'Aylık'}
                          </span>
                        </div>
                        {sub.pricing.currentAmount != null && (
                          <div className="text-xs text-slate-500 mt-1">
                            ₺{sub.pricing.currentAmount.toLocaleString('tr-TR')}
                            {sub.billingInterval === 'YEARLY' ? '/yıl' : '/ay'}
                          </div>
                        )}
                      </td>
                      {/* Durum */}
                      <td className="px-4 py-4">
                        <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_BADGE[sub.status] ?? 'bg-slate-100 text-slate-500'}`}>
                          {STATUS_LABELS[sub.status] ?? sub.status}
                        </span>
                      </td>
                      {/* Süre */}
                      <td className="px-4 py-4">
                        <div className="text-xs text-slate-500">
                          <span className="text-slate-700">{fmt(sub.startsAt)}</span>
                          <span className="mx-1 text-slate-300">→</span>
                          <span className={soon ? 'text-amber-600 font-semibold' : 'text-slate-700'}>
                            {fmt(sub.endsAt)}
                          </span>
                        </div>
                        {days !== null && (
                          <div className={`text-xs mt-0.5 ${soon ? 'text-amber-500 font-medium' : 'text-slate-400'}`}>
                            {days === 0 ? 'Bugün bitiyor' : soon ? `${days} gün kaldı` : `${days} gün`}
                          </div>
                        )}
                      </td>
                      {/* Aksiyon */}
                      <td className="px-4 py-4 text-right">
                        <button
                          onClick={() => openEdit(sub)}
                          className="inline-flex items-center gap-1.5 rounded-lg bg-violet-50 px-3 py-1.5 text-xs font-medium text-violet-700 hover:bg-violet-100 transition-colors"
                        >
                          <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                          </svg>
                          Düzenle
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Edit Modal */}
      {editSub && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => setEditSub(null)} />
          <div className="relative w-full max-w-lg rounded-2xl bg-white shadow-2xl overflow-hidden">
            <div className="px-6 py-5 border-b border-slate-100 flex items-start justify-between">
              <div>
                <h3 className="text-lg font-semibold text-slate-900">Abonelik Düzenle</h3>
                <p className="text-sm text-slate-500 mt-0.5">{editSub.tenant.name}</p>
              </div>
              <button onClick={() => setEditSub(null)} className="text-slate-400 hover:text-slate-600">
                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div className="px-6 py-5 space-y-4 max-h-[70vh] overflow-y-auto">
              {/* Plan seçimi */}
              <div>
                <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">Plan</label>
                <select
                  value={editForm.planDefinitionId}
                  onChange={(e) => handleEditPlanChange(e.target.value)}
                  className="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"
                >
                  <option value="">Plan seçin</option>
                  {planDefs.map((p) => (
                    <option key={p.id} value={p.id}>
                      {p.name}{p.price != null ? ` — ₺${Number(p.price).toLocaleString('tr-TR')}/ay` : ''}
                    </option>
                  ))}
                </select>
              </div>

              {/* Ödeme Periyodu */}
              <div>
                <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">Ödeme Periyodu</label>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    type="button"
                    onClick={() => handleEditIntervalChange('MONTHLY')}
                    className={`rounded-xl border py-2.5 text-sm font-medium transition ${
                      editForm.billingInterval === 'MONTHLY' ? 'border-violet-500 bg-violet-600 text-white' : 'border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100'
                    }`}
                  >
                    <div>Aylık</div>
                    {editMonthly != null && <div className="text-xs opacity-80">₺{editMonthly.toLocaleString('tr-TR')}/ay</div>}
                  </button>
                  <button
                    type="button"
                    onClick={() => handleEditIntervalChange('YEARLY')}
                    className={`rounded-xl border py-2.5 text-sm font-medium transition ${
                      editForm.billingInterval === 'YEARLY' ? 'border-violet-500 bg-violet-600 text-white' : 'border-slate-200 bg-slate-50 text-slate-700 hover:bg-slate-100'
                    }`}
                  >
                    <div>Yıllık <span className="text-emerald-400 text-xs">%15 indirim</span></div>
                    {editYearly != null && <div className="text-xs opacity-80">₺{editYearly.toLocaleString('tr-TR')}/yıl</div>}
                  </button>
                </div>
              </div>

              {/* Durum */}
              <div>
                <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">Durum</label>
                <select
                  value={editForm.status}
                  onChange={(e) => setEditForm({ ...editForm, status: e.target.value })}
                  className="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"
                >
                  {ALL_STATUSES.map((s) => <option key={s} value={s}>{STATUS_LABELS[s]}</option>)}
                </select>
              </div>

              {/* Tarihler */}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">Başlangıç</label>
                  <input
                    type="date"
                    value={editForm.startsAt}
                    onChange={(e) => setEditForm({ ...editForm, startsAt: e.target.value })}
                    className="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wide mb-1.5">Bitiş</label>
                  <input
                    type="date"
                    value={editForm.endsAt}
                    onChange={(e) => setEditForm({ ...editForm, endsAt: e.target.value })}
                    className="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"
                  />
                </div>
              </div>

            </div>

            <div className="flex items-center justify-end gap-3 border-t border-slate-100 px-6 py-4">
              <button
                onClick={() => setEditSub(null)}
                className="rounded-xl border border-slate-200 px-5 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                İptal
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className="rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-violet-700 disabled:opacity-50"
              >
                {saving ? 'Kaydediliyor...' : 'Kaydet'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}