// app/components/admin/sidebars/SidebarForm.tsx
'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import toast from 'react-hot-toast';
import { SidebarBuilder } from '@/app/components/admin/page-builder/SidebarBuilder';
import { SidebarWidget } from '@/lib/page-builder/container-types';

// ── Types ─────────────────────────────────────────────────────────────────────

interface SidebarFormData {
  name:        string;
  description: string;
  widgets:     SidebarWidget[];
  status:      boolean;
}

interface SidebarFormProps {
  sidebarId?: string;
}

// ── Loading skeleton ──────────────────────────────────────────────────────────

function SidebarFormSkeleton() {
  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-var-surface rounded-2xl shadow-var-card border border-var-border overflow-hidden animate-pulse">
        <div className="px-6 py-4 border-b border-var-border bg-var-surface-hover/50">
          <div className="flex items-center justify-between">
            <div className="space-y-2">
              <div className="h-6 w-48 bg-var-surface-hover rounded" />
              <div className="h-4 w-72 bg-var-surface-hover rounded" />
            </div>
            <div className="h-9 w-36 bg-var-surface-hover rounded-xl" />
          </div>
        </div>

        <div className="p-6 space-y-8">
          <div>
            <div className="h-5 w-40 bg-var-surface-hover rounded mb-4" />
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <div className="h-4 w-28 bg-var-surface-hover rounded" />
                <div className="h-10 bg-var-surface-hover rounded-xl" />
              </div>
              <div className="space-y-2">
                <div className="h-4 w-24 bg-var-surface-hover rounded" />
                <div className="h-10 bg-var-surface-hover rounded-xl" />
              </div>
            </div>
          </div>

          <div>
            <div className="flex items-center justify-between mb-4">
              <div className="space-y-2">
                <div className="h-5 w-36 bg-var-surface-hover rounded" />
                <div className="h-4 w-52 bg-var-surface-hover rounded" />
              </div>
              <div className="h-7 w-20 bg-var-surface-hover rounded-full" />
            </div>
            <div className="border border-var-border rounded-xl p-4 bg-var-surface-hover/50 h-40" />
          </div>

          <div>
            <div className="h-5 w-20 bg-var-surface-hover rounded mb-4" />
            <div className="h-20 bg-var-surface-hover rounded-xl" />
          </div>

          <div className="flex justify-end gap-4 pt-6 border-t border-var-border">
            <div className="h-9 w-24 bg-var-surface-hover rounded-xl" />
            <div className="h-9 w-36 bg-var-surface-hover rounded-xl" />
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Component ─────────────────────────────────────────────────────────────────

export default function SidebarForm({ sidebarId }: SidebarFormProps) {
  const router   = useRouter();
  const isEdit   = !!sidebarId;

  const [loading,  setLoading]  = useState(false);
  const [fetching, setFetching] = useState(false);

  const [formData, setFormData] = useState<SidebarFormData>({
    name:        '',
    description: '',
    widgets:     [],
    status:      true,
  });

  // ── Load existing sidebar (edit mode) ──────────────────────────────────────

  useEffect(() => {
    if (!sidebarId) return;

    const load = async () => {
      setFetching(true);
      try {
        const res  = await fetch(`/api/backend/admin/sidebars/${sidebarId}`);
        const data = await res.json();

        if (res.ok) {
          const s = data.sidebar;
          setFormData({
            name:        s.name        || '',
            description: s.description || '',
            widgets:     Array.isArray(s.widgets) ? s.widgets : [],
            status:      s.status      ?? true,
          });
        } else {
          toast.error(data.error || 'Failed to load sidebar');
        }
      } catch {
        toast.error('Failed to load sidebar');
      } finally {
        setFetching(false);
      }
    };

    load();
  }, [sidebarId]);

  // ── Submit ─────────────────────────────────────────────────────────────────

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.name.trim()) {
      toast.error('Sidebar name is required');
      return;
    }

    setLoading(true);
    try {
      const url    = isEdit ? `/api/backend/admin/sidebars/${sidebarId}` : '/api/backend/admin/sidebars';
      const method = isEdit ? 'PUT' : 'POST';

      const res  = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify(formData),
      });
      const data = await res.json();

      if (res.ok) {
        toast.success(isEdit ? 'Sidebar updated successfully' : 'Sidebar created successfully');
        router.push('/admin/dashboard/sidebars');
        router.refresh();
      } else {
        toast.error(data.error || 'Failed to save sidebar');
      }
    } catch {
      toast.error('Failed to save sidebar');
    } finally {
      setLoading(false);
    }
  };

  if (fetching) return <SidebarFormSkeleton />;

  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-var-surface rounded-2xl shadow-var-card border border-var-border overflow-hidden">

        {/* Header */}
        <div className="px-6 py-4 border-b border-var-border bg-linear-to-r from-var-surface-hover to-var-surface">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-semibold text-var-text">
                {isEdit ? 'Edit Sidebar' : 'Create New Sidebar'}
              </h2>
              <p className="text-sm text-var-text-secondary mt-1">
                {isEdit
                  ? 'Changes will automatically reflect everywhere this sidebar is used'
                  : 'Build a reusable sidebar template with widgets'}
              </p>
            </div>
            <Link
              href="/admin/dashboard/sidebars"
              className="inline-flex items-center px-4 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-xl hover:bg-var-surface-hover transition-colors duration-200"
            >
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              Back to Sidebars
            </Link>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-8">

          {/* Basic Info */}
          <div>
            <h3 className="text-lg font-medium text-var-text mb-4">Basic Information</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-var-text mb-2">
                  Sidebar Name <span className="text-var-danger">*</span>
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={e => setFormData(p => ({ ...p, name: e.target.value }))}
                  required
                  placeholder="e.g. Blog Sidebar, Service Sidebar"
                  className="w-full px-3 py-2 bg-var-input border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary transition-colors duration-200 text-var-text placeholder-var-input"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-var-text mb-2">
                  Description
                </label>
                <input
                  type="text"
                  value={formData.description}
                  onChange={e => setFormData(p => ({ ...p, description: e.target.value }))}
                  placeholder="Optional description"
                  className="w-full px-3 py-2 bg-var-input border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary transition-colors duration-200 text-var-text placeholder-var-input"
                />
              </div>
            </div>
          </div>

          {/* Widgets */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-lg font-medium text-var-text">Sidebar Widgets</h3>
                <p className="text-sm text-var-text-muted mt-0.5">
                  Add and arrange widgets. Drag to reorder.
                </p>
              </div>
              <span className="text-sm font-medium text-var-primary-text bg-var-primary-muted px-3 py-1 rounded-full border border-var-primary">
                {formData.widgets.length} widget{formData.widgets.length !== 1 ? 's' : ''}
              </span>
            </div>

            <div className="border border-var-border rounded-xl p-4 bg-var-surface-hover/50">
              <SidebarBuilder
                widgets={formData.widgets}
                onChange={widgets => setFormData(p => ({ ...p, widgets }))}
              />
            </div>
          </div>

          {/* Settings */}
          <div>
            <h3 className="text-lg font-medium text-var-text mb-4">Settings</h3>
            <div className="flex items-center justify-between p-4 border border-var-border rounded-xl bg-var-surface-hover">
              <div>
                <h4 className="font-medium text-var-text">Sidebar Status</h4>
                <p className="text-sm text-var-text-muted mt-1">
                  Inactive sidebars will be hidden from all pages
                </p>
              </div>
              <div className="flex items-center gap-3">
                <input
                  type="checkbox"
                  id="status"
                  checked={formData.status}
                  onChange={e => setFormData(p => ({ ...p, status: e.target.checked }))}
                  className="w-4 h-4 text-var-primary border-var-border rounded focus:ring-var-primary"
                />
                <label htmlFor="status" className="text-sm font-medium text-var-text">
                  {formData.status ? 'Active' : 'Inactive'}
                </label>
              </div>
            </div>
          </div>

          {/* Live update notice — edit mode only */}
          {isEdit && (
            <div className="flex items-start gap-3 p-4 bg-var-info-bg border border-var-info-border rounded-xl">
              <svg
                className="w-5 h-5 text-var-info shrink-0 mt-0.5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <p className="text-sm text-var-info-text">
                <span className="font-semibold">Live update:</span>{' '}
                Saving changes will immediately update this sidebar on all pages and containers that use it.
              </p>
            </div>
          )}

          {/* Actions */}
          <div className="flex items-center justify-end gap-4 pt-6 border-t border-var-border">
            <Link
              href="/admin/dashboard/sidebars"
              className="px-6 py-2 text-sm font-medium text-var-text-secondary bg-var-surface border border-var-border rounded-xl hover:bg-var-surface-hover transition-colors duration-200"
            >
              Cancel
            </Link>
            <button
              type="submit"
              disabled={loading}
              className="inline-flex items-center px-4 py-2 bg-var-primary text-white font-medium rounded-xl hover:bg-var-primary-hover transition-all duration-200 shadow-var-button hover:shadow-var-card"
            >
              {loading ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  {isEdit ? 'Updating…' : 'Creating…'}
                </>
              ) : (
                isEdit ? 'Update Sidebar' : 'Create Sidebar'
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}