'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, Save, ToggleLeft, ToggleRight } from 'lucide-react';
import { usePageHeader } from '@client/contexts/PageHeaderContext';
import { useLanguage } from '@client/contexts/LanguageContext';

export default function CategoryFormPage({ params }: { params: { id?: string } }) {
  const { t } = useLanguage();
  const isEdit = params?.id && params.id !== 'new';
  usePageHeader(isEdit ? t('menuManagement.editCategory', "Edit Category") : t('menuManagement.addCategory', "Add Category"), t('menuManagement.categoryDescription', "Manage menu category details"));
  
  const [form, setForm] = useState({
    name: isEdit ? 'Mains' : '',
    description: isEdit ? 'Main course dishes — hearty and satisfying' : '',
    displayOrder: isEdit ? '2' : '',
    active: true,
  });

  return (
    <>
      <div className="flex items-center gap-3 mb-6">
        <Link href="/menu-management" className="btn-ghost p-1.5"><ArrowLeft size={16} /></Link>
        <h2 className="font-bold text-lg" style={{ color: 'hsl(var(--foreground))' }}>{isEdit ? t('menuManagement.editCategory', 'Edit Category') : t('menuManagement.addNewCategory', 'Add New Category')}</h2>
        <div className="ml-auto flex gap-2">
          <Link href="/menu-management" className="btn-secondary">{t('common.cancel', 'Cancel')}</Link>
          <button className="btn-primary"><Save size={15} /> {isEdit ? t('menuManagement.saveChanges', 'Save Changes') : t('menuManagement.addCategory', 'Add Category')}</button>
        </div>
      </div>

      <div className="max-w-xl space-y-5">
        <div className="card p-5">
          <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('menuManagement.categoryDetails', 'Category Details')}</h3>
          <div className="space-y-4">
            <div>
              <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('menuManagement.categoryName', 'Category Name')} *</label>
              <input className="input-base" placeholder={t('menuManagement.categoryNamePlaceholder', "e.g. Starters, Mains, Desserts")} value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} required />
            </div>
            <div>
              <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('menuManagement.description', 'Description')}</label>
              <textarea className="input-base resize-none" rows={3} placeholder={t('menuManagement.descriptionPlaceholder', "Brief description of this category...")} value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))} />
            </div>
            <div>
              <label className="block text-xs font-semibold mb-1.5" style={{ color: 'hsl(var(--foreground-secondary))' }}>{t('menuManagement.displayOrder', 'Display Order')}</label>
              <input type="number" className="input-base" placeholder="1" value={form.displayOrder} onChange={e => setForm(f => ({ ...f, displayOrder: e.target.value }))} />
              <p className="text-xs mt-1" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('menuManagement.displayOrderDesc', 'Lower numbers appear first in the menu')}</p>
            </div>
          </div>
        </div>

        <div className="card p-5">
          <h3 className="font-semibold mb-4" style={{ color: 'hsl(var(--foreground))' }}>{t('menuManagement.visibility', 'Visibility')}</h3>
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium" style={{ color: 'hsl(var(--foreground))' }}>{t('menuManagement.activeCategory', 'Active Category')}</p>
              <p className="text-xs" style={{ color: 'hsl(var(--muted-foreground))' }}>{t('menuManagement.activeCategoryDesc', 'Category and its items are visible to customers')}</p>
            </div>
            <button onClick={() => setForm(f => ({ ...f, active: !f.active }))}>
              {form.active ? <ToggleRight size={28} style={{ color: 'hsl(var(--success))' }} /> : <ToggleLeft size={28} style={{ color: 'hsl(var(--muted-foreground))' }} />}
            </button>
          </div>
        </div>
      </div>
    </>
  );
}