'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import {
  cmsService,
  getErrorMessage,
  CmsContentRecord,
  HeroContent,
  FeaturesContent,
  FeatureItem,
  TopProfessionalsContent,
  ProfessionalItem,
  TestimonialsContent,
  TestimonialItem,
  StatItem,
} from '@/services';

// ---------------------------------------------------------------------------
// Section metadata
// ---------------------------------------------------------------------------

interface SectionMeta {
  sectionKey: string;
  label: string;
  description: string;
}

const SECTIONS: SectionMeta[] = [
  { sectionKey: 'hero', label: 'Hero', description: 'Main headline, description and call-to-action' },
  { sectionKey: 'features', label: 'Features', description: 'Feature highlights with icons' },
  { sectionKey: 'topProfessionals', label: 'Top Professionals', description: 'Agents and lenders showcase' },
  { sectionKey: 'testimonials', label: 'Testimonials', description: 'Reviews, stats and social proof' },
];

// ---------------------------------------------------------------------------
// Default content factories
// ---------------------------------------------------------------------------

function defaultHero(): HeroContent {
  return { headline: '', description: '', ctaButtonText: '', helperText: '' };
}

function defaultFeatures(): FeaturesContent {
  return { title: '', subtitle: '', features: [] };
}

function defaultTopProfessionals(): TopProfessionalsContent {
  return { title: '', ctaText: '', ctaButtonText: '', agents: [], lenders: [] };
}

function defaultTestimonials(): TestimonialsContent {
  return { title: '', subtitle: '', ratingInfo: '', stats: [], testimonials: [] };
}

function defaultContentFor(sectionKey: string): unknown {
  switch (sectionKey) {
    case 'hero': return defaultHero();
    case 'features': return defaultFeatures();
    case 'topProfessionals': return defaultTopProfessionals();
    case 'testimonials': return defaultTestimonials();
    default: return {};
  }
}

function emptyFeatureItem(): FeatureItem {
  return { iconPath: '', title: '', description: '' };
}

function emptyProfessionalItem(): ProfessionalItem {
  return { name: '', subtitle: '', location: '', experience: '', expertise: [], imageUrl: '' };
}

function emptyTestimonialItem(): TestimonialItem {
  return { rating: 5, title: '', content: '', author: '', role: '' };
}

function emptyStatItem(): StatItem {
  return { iconPath: '', boldText: '', normalText: '' };
}

// ---------------------------------------------------------------------------
// Shared input class
// ---------------------------------------------------------------------------
const inputCls = 'w-full px-3 py-2 border border-[#e5e7eb] rounded-xl focus:outline-none focus:border-[#f5a623] text-[#00293d] bg-white placeholder:text-[#666666]';
const textareaCls = inputCls;

// ---------------------------------------------------------------------------
// Page component
// ---------------------------------------------------------------------------

export default function CmsPage() {
  const router = useRouter();
  const [records, setRecords] = useState<CmsContentRecord[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
  const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  // Modal
  const [editingSection, setEditingSection] = useState<string | null>(null);
  const [editContent, setEditContent] = useState<unknown>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [modalError, setModalError] = useState('');
  const [professionalsTab, setProfessionalsTab] = useState<'agents' | 'lenders'>('agents');

  // Fetch all CMS records for "landing" page
  const fetchRecords = useCallback(async () => {
    setIsLoading(true);
    setError('');
    try {
      const data = await cmsService.getByPage('landing');
      setRecords(data);
    } catch (err) {
      const msg = getErrorMessage(err);
      setError(msg);
      if (msg.includes('Unauthorized')) {
        router.push('/login');
      }
    } finally {
      setIsLoading(false);
    }
  }, [router]);

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

  // Auto-dismiss notifications after 4 seconds
  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 4000);
      return () => clearTimeout(timer);
    }
  }, [notification]);

  // Helpers
  function recordFor(sectionKey: string): CmsContentRecord | undefined {
    return records.find((r) => r.sectionKey === sectionKey);
  }

  // Open modal
  function openEditor(sectionKey: string) {
    const existing = recordFor(sectionKey);
    setEditContent(existing ? JSON.parse(JSON.stringify(existing.content)) : defaultContentFor(sectionKey));
    setModalError('');
    setProfessionalsTab('agents');
    setEditingSection(sectionKey);
  }

  function closeEditor() {
    setEditingSection(null);
    setEditContent(null);
    setModalError('');
  }

  // Save
  async function handleSave() {
    if (!editingSection || editContent == null) return;
    setIsSubmitting(true);
    setModalError('');
    try {
      await cmsService.upsert({
        pageSlug: 'landing',
        sectionKey: editingSection,
        content: editContent,
        isPublished: true,
      });
      closeEditor();
      fetchRecords();
      setNotification({ type: 'success', message: 'Section saved successfully.' });
    } catch (err) {
      setModalError(getErrorMessage(err));
    } finally {
      setIsSubmitting(false);
    }
  }

  // ---------------------------------------------------------------------------
  // Section-specific form renderers
  // ---------------------------------------------------------------------------

  function renderHeroForm() {
    const data = editContent as HeroContent;
    const update = (patch: Partial<HeroContent>) => setEditContent({ ...data, ...patch });

    return (
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Headline</label>
          <textarea rows={2} className={textareaCls} value={data.headline} onChange={(e) => update({ headline: e.target.value })} placeholder="Main headline text" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Description</label>
          <textarea rows={3} className={textareaCls} value={data.description} onChange={(e) => update({ description: e.target.value })} placeholder="Sub-heading description" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">CTA Button Text</label>
          <input type="text" className={inputCls} value={data.ctaButtonText} onChange={(e) => update({ ctaButtonText: e.target.value })} placeholder="e.g. Get Started" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Helper Text</label>
          <textarea rows={2} className={textareaCls} value={data.helperText} onChange={(e) => update({ helperText: e.target.value })} placeholder="Small text below CTA" />
        </div>
      </div>
    );
  }

  function renderFeaturesForm() {
    const data = editContent as FeaturesContent;
    const update = (patch: Partial<FeaturesContent>) => setEditContent({ ...data, ...patch });

    function updateFeature(index: number, patch: Partial<FeatureItem>) {
      const features = [...data.features];
      features[index] = { ...features[index], ...patch };
      update({ features });
    }
    function removeFeature(index: number) {
      update({ features: data.features.filter((_, i) => i !== index) });
    }
    function addFeature() {
      update({ features: [...data.features, emptyFeatureItem()] });
    }

    return (
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Title</label>
          <input type="text" className={inputCls} value={data.title} onChange={(e) => update({ title: e.target.value })} placeholder="Section title" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Subtitle</label>
          <input type="text" className={inputCls} value={data.subtitle} onChange={(e) => update({ subtitle: e.target.value })} placeholder="Section subtitle" />
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-[#00293d]">Features ({data.features.length})</label>
            <button type="button" onClick={addFeature} className="px-3 py-1 text-xs bg-[#f5a623] hover:bg-[#e09620] text-white rounded-lg transition-colors">+ Add Feature</button>
          </div>
          {data.features.length === 0 && <p className="text-sm text-[#666666] italic">No features added yet.</p>}
          <div className="space-y-3">
            {data.features.map((feat, idx) => (
              <div key={idx} className="p-3 border border-[#e5e7eb] rounded-lg bg-[#f9fafb] space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold text-[#666666]">Feature {idx + 1}</span>
                  <button type="button" onClick={() => removeFeature(idx)} className="text-red-500 hover:text-red-700 text-xs font-medium">Remove</button>
                </div>
                <input type="text" className={inputCls} value={feat.iconPath} onChange={(e) => updateFeature(idx, { iconPath: e.target.value })} placeholder="Icon path (e.g. /assets/icons/icon.svg)" />
                <input type="text" className={inputCls} value={feat.title} onChange={(e) => updateFeature(idx, { title: e.target.value })} placeholder="Feature title" />
                <textarea rows={2} className={textareaCls} value={feat.description} onChange={(e) => updateFeature(idx, { description: e.target.value })} placeholder="Feature description" />
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function renderProfessionalsList(
    items: ProfessionalItem[],
    label: string,
    onChange: (items: ProfessionalItem[]) => void,
  ) {
    function updateItem(index: number, patch: Partial<ProfessionalItem>) {
      const updated = [...items];
      updated[index] = { ...updated[index], ...patch };
      onChange(updated);
    }
    function removeItem(index: number) {
      onChange(items.filter((_, i) => i !== index));
    }
    function addItem() {
      onChange([...items, emptyProfessionalItem()]);
    }

    return (
      <div>
        <div className="flex items-center justify-between mb-2">
          <label className="block text-sm font-medium text-[#00293d]">{label} ({items.length})</label>
          <button type="button" onClick={addItem} className="px-3 py-1 text-xs bg-[#f5a623] hover:bg-[#e09620] text-white rounded-lg transition-colors">+ Add {label.slice(0, -1)}</button>
        </div>
        {items.length === 0 && <p className="text-sm text-[#666666] italic">No {label.toLowerCase()} added yet.</p>}
        <div className="space-y-3">
          {items.map((item, idx) => (
            <div key={idx} className="p-3 border border-[#e5e7eb] rounded-lg bg-[#f9fafb] space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-xs font-semibold text-[#666666]">{label.slice(0, -1)} {idx + 1}</span>
                <button type="button" onClick={() => removeItem(idx)} className="text-red-500 hover:text-red-700 text-xs font-medium">Remove</button>
              </div>
              <div className="grid grid-cols-2 gap-2">
                <input type="text" className={inputCls} value={item.name} onChange={(e) => updateItem(idx, { name: e.target.value })} placeholder="Name" />
                <input type="text" className={inputCls} value={item.subtitle} onChange={(e) => updateItem(idx, { subtitle: e.target.value })} placeholder="Subtitle" />
                <input type="text" className={inputCls} value={item.location} onChange={(e) => updateItem(idx, { location: e.target.value })} placeholder="Location" />
                <input type="text" className={inputCls} value={item.experience} onChange={(e) => updateItem(idx, { experience: e.target.value })} placeholder="Experience" />
              </div>
              <input type="text" className={inputCls} value={item.expertise.join(', ')} onChange={(e) => updateItem(idx, { expertise: e.target.value.split(',').map((s) => s.trim()).filter(Boolean) })} placeholder="Expertise (comma-separated)" />
              <input type="text" className={inputCls} value={item.imageUrl} onChange={(e) => updateItem(idx, { imageUrl: e.target.value })} placeholder="Image URL" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  function renderTopProfessionalsForm() {
    const data = editContent as TopProfessionalsContent;
    const update = (patch: Partial<TopProfessionalsContent>) => setEditContent({ ...data, ...patch });

    return (
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Title</label>
          <input type="text" className={inputCls} value={data.title} onChange={(e) => update({ title: e.target.value })} placeholder="Section title" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">CTA Text</label>
          <input type="text" className={inputCls} value={data.ctaText} onChange={(e) => update({ ctaText: e.target.value })} placeholder="Call-to-action text" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">CTA Button Text</label>
          <input type="text" className={inputCls} value={data.ctaButtonText} onChange={(e) => update({ ctaButtonText: e.target.value })} placeholder="Button label" />
        </div>

        {/* Tabs */}
        <div className="border-b border-[#e5e7eb]">
          <nav className="flex -mb-px">
            <button
              type="button"
              onClick={() => setProfessionalsTab('agents')}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${professionalsTab === 'agents' ? 'border-[#f5a623] text-[#f5a623]' : 'border-transparent text-[#666666] hover:text-[#00293d]'}`}
            >
              Agents ({data.agents.length})
            </button>
            <button
              type="button"
              onClick={() => setProfessionalsTab('lenders')}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${professionalsTab === 'lenders' ? 'border-[#f5a623] text-[#f5a623]' : 'border-transparent text-[#666666] hover:text-[#00293d]'}`}
            >
              Lenders ({data.lenders.length})
            </button>
          </nav>
        </div>

        {professionalsTab === 'agents' && renderProfessionalsList(data.agents, 'Agents', (agents) => update({ agents }))}
        {professionalsTab === 'lenders' && renderProfessionalsList(data.lenders, 'Lenders', (lenders) => update({ lenders }))}
      </div>
    );
  }

  function renderTestimonialsForm() {
    const data = editContent as TestimonialsContent;
    const update = (patch: Partial<TestimonialsContent>) => setEditContent({ ...data, ...patch });

    function updateStat(index: number, patch: Partial<StatItem>) {
      const stats = [...data.stats];
      stats[index] = { ...stats[index], ...patch };
      update({ stats });
    }
    function removeStat(index: number) {
      update({ stats: data.stats.filter((_, i) => i !== index) });
    }
    function addStat() {
      update({ stats: [...data.stats, emptyStatItem()] });
    }

    function updateTestimonial(index: number, patch: Partial<TestimonialItem>) {
      const testimonials = [...data.testimonials];
      testimonials[index] = { ...testimonials[index], ...patch };
      update({ testimonials });
    }
    function removeTestimonial(index: number) {
      update({ testimonials: data.testimonials.filter((_, i) => i !== index) });
    }
    function addTestimonial() {
      update({ testimonials: [...data.testimonials, emptyTestimonialItem()] });
    }

    return (
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Title</label>
          <input type="text" className={inputCls} value={data.title} onChange={(e) => update({ title: e.target.value })} placeholder="Section title" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Subtitle</label>
          <textarea rows={2} className={textareaCls} value={data.subtitle} onChange={(e) => update({ subtitle: e.target.value })} placeholder="Section subtitle" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[#00293d] mb-1">Rating Info</label>
          <input type="text" className={inputCls} value={data.ratingInfo} onChange={(e) => update({ ratingInfo: e.target.value })} placeholder="e.g. 4.9/5 based on 200+ reviews" />
        </div>

        {/* Stats */}
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-[#00293d]">Stats ({data.stats.length})</label>
            <button type="button" onClick={addStat} className="px-3 py-1 text-xs bg-[#f5a623] hover:bg-[#e09620] text-white rounded-lg transition-colors">+ Add Stat</button>
          </div>
          {data.stats.length === 0 && <p className="text-sm text-[#666666] italic">No stats added yet.</p>}
          <div className="space-y-3">
            {data.stats.map((stat, idx) => (
              <div key={idx} className="p-3 border border-[#e5e7eb] rounded-lg bg-[#f9fafb] space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold text-[#666666]">Stat {idx + 1}</span>
                  <button type="button" onClick={() => removeStat(idx)} className="text-red-500 hover:text-red-700 text-xs font-medium">Remove</button>
                </div>
                <input type="text" className={inputCls} value={stat.iconPath} onChange={(e) => updateStat(idx, { iconPath: e.target.value })} placeholder="Icon path" />
                <div className="grid grid-cols-2 gap-2">
                  <input type="text" className={inputCls} value={stat.boldText} onChange={(e) => updateStat(idx, { boldText: e.target.value })} placeholder="Bold text (e.g. 500+)" />
                  <input type="text" className={inputCls} value={stat.normalText} onChange={(e) => updateStat(idx, { normalText: e.target.value })} placeholder="Normal text (e.g. Properties)" />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Testimonials */}
        <div>
          <div className="flex items-center justify-between mb-2">
            <label className="block text-sm font-medium text-[#00293d]">Testimonials ({data.testimonials.length})</label>
            <button type="button" onClick={addTestimonial} className="px-3 py-1 text-xs bg-[#f5a623] hover:bg-[#e09620] text-white rounded-lg transition-colors">+ Add Testimonial</button>
          </div>
          {data.testimonials.length === 0 && <p className="text-sm text-[#666666] italic">No testimonials added yet.</p>}
          <div className="space-y-3">
            {data.testimonials.map((item, idx) => (
              <div key={idx} className="p-3 border border-[#e5e7eb] rounded-lg bg-[#f9fafb] space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold text-[#666666]">Testimonial {idx + 1}</span>
                  <button type="button" onClick={() => removeTestimonial(idx)} className="text-red-500 hover:text-red-700 text-xs font-medium">Remove</button>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <div>
                    <label className="block text-xs text-[#666666] mb-0.5">Rating</label>
                    <input type="number" min={1} max={5} step={0.1} className={inputCls} value={item.rating} onChange={(e) => updateTestimonial(idx, { rating: parseFloat(e.target.value) || 0 })} />
                  </div>
                  <div>
                    <label className="block text-xs text-[#666666] mb-0.5">Title</label>
                    <input type="text" className={inputCls} value={item.title} onChange={(e) => updateTestimonial(idx, { title: e.target.value })} placeholder="Review title" />
                  </div>
                </div>
                <textarea rows={2} className={textareaCls} value={item.content} onChange={(e) => updateTestimonial(idx, { content: e.target.value })} placeholder="Testimonial content" />
                <div className="grid grid-cols-2 gap-2">
                  <input type="text" className={inputCls} value={item.author} onChange={(e) => updateTestimonial(idx, { author: e.target.value })} placeholder="Author name" />
                  <input type="text" className={inputCls} value={item.role} onChange={(e) => updateTestimonial(idx, { role: e.target.value })} placeholder="Author role" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function renderModalContent() {
    if (!editingSection || editContent == null) return null;
    switch (editingSection) {
      case 'hero': return renderHeroForm();
      case 'features': return renderFeaturesForm();
      case 'topProfessionals': return renderTopProfessionalsForm();
      case 'testimonials': return renderTestimonialsForm();
      default: return <p className="text-[#666666]">Unknown section type.</p>;
    }
  }

  // ---------------------------------------------------------------------------
  // Render
  // ---------------------------------------------------------------------------

  const editingSectionMeta = SECTIONS.find((s) => s.sectionKey === editingSection);

  return (
    <div>
      {/* Page header */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-[#00293d] font-fractul">Content Management</h1>
        <p className="text-[#666666] font-serif">Manage landing page content sections</p>
      </div>

      {/* Notification toast */}
      {notification && (
        <div className={`mb-4 p-3 rounded-lg border text-sm ${notification.type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700'}`}>
          {notification.message}
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-red-700 text-sm">{error}</p>
        </div>
      )}

      {/* Loading */}
      {isLoading ? (
        <div className="flex items-center justify-center py-16">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#f5a623]"></div>
        </div>
      ) : (
        /* Section cards grid */
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {SECTIONS.map((section) => {
            const record = recordFor(section.sectionKey);
            const hasContent = !!record;
            const isPublished = record?.isPublished ?? false;

            return (
              <div key={section.sectionKey} className="bg-white rounded-xl shadow-sm border border-[#e5e7eb]">
                <div className="px-6 py-4 border-b border-[#e5e7eb] flex items-center justify-between">
                  <div>
                    <h2 className="text-lg font-semibold text-[#00293d]">{section.label}</h2>
                    <p className="text-sm text-[#666666] font-serif">{section.description}</p>
                  </div>
                  <div className="flex items-center space-x-2">
                    {hasContent ? (
                      isPublished ? (
                        <span className="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Published</span>
                      ) : (
                        <span className="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Draft</span>
                      )
                    ) : (
                      <span className="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">No Content</span>
                    )}
                  </div>
                </div>
                <div className="px-6 py-4">
                  {hasContent ? (
                    <p className="text-sm text-[#666666]">
                      Last updated: {new Date(record.updatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                    </p>
                  ) : (
                    <p className="text-sm text-[#666666] italic">No content configured yet. Click edit to add content.</p>
                  )}
                  <div className="mt-4 flex justify-end">
                    <button
                      onClick={() => openEditor(section.sectionKey)}
                      className="px-4 py-2 bg-[#f5a623] hover:bg-[#e09620] text-white text-sm font-medium rounded-lg transition-colors inline-flex items-center"
                    >
                      <svg className="w-4 h-4 mr-1.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>
                      Edit
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Edit modal */}
      {editingSection && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
            {/* Modal header */}
            <div className="px-6 py-4 border-b border-[#e5e7eb] flex-shrink-0">
              <h3 className="text-lg font-semibold text-[#00293d]">
                Edit {editingSectionMeta?.label ?? 'Section'}
              </h3>
              <p className="text-sm text-[#666666]">{editingSectionMeta?.description}</p>
            </div>

            {/* Modal body - scrollable */}
            <div className="px-6 py-4 overflow-y-auto flex-1">
              {modalError && (
                <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
                  <p className="text-red-700 text-sm">{modalError}</p>
                </div>
              )}
              {renderModalContent()}
            </div>

            {/* Modal footer */}
            <div className="px-6 py-4 border-t border-[#e5e7eb] flex justify-end space-x-3 flex-shrink-0">
              <button
                type="button"
                onClick={closeEditor}
                className="px-4 py-2 border border-[#e5e7eb] text-[#00293d] rounded-xl hover:bg-[#f5f9f8] transition-colors"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleSave}
                disabled={isSubmitting}
                className="px-4 py-2 bg-[#f5a623] text-white rounded-xl hover:bg-[#e09620] transition-colors disabled:opacity-50"
              >
                {isSubmitting ? 'Saving...' : 'Save Changes'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
