import { Head, useForm } from '@inertiajs/react';
import AdminLayout from '@/components/Layouts/AdminLayout';
import Card from '@/components/Card/Card';
import Button from '@/components/Button/Button';
import Input from '@/components/Input/Input';
import Select from '@/components/Select/Select';

interface Announcement {
    id: number;
    title: string;
    message: string;
    type: 'info' | 'warning' | 'success' | 'error';
    is_active: boolean;
    starts_at: string | null;
    ends_at: string | null;
}

interface EditPageProps {
    announcement: Announcement;
}

export default function Edit({ announcement }: EditPageProps) {
    const { data, setData, put, processing, errors } = useForm({
        title: announcement.title,
        message: announcement.message,
        type: announcement.type,
        is_active: announcement.is_active,
        starts_at: announcement.starts_at ? new Date(announcement.starts_at).toISOString().slice(0, 16) : '',
        ends_at: announcement.ends_at ? new Date(announcement.ends_at).toISOString().slice(0, 16) : '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        put(`/admin/announcements/${announcement.id}`, {
            preserveScroll: true,
        });
    };

    return (
        <AdminLayout title="Edit Announcement">
            <Head title="Edit Announcement" />
            <div className="space-y-6">
                {/* Header */}
                <div>
                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Edit Announcement</h2>
                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Edit pengumuman yang ada
                    </p>
                </div>

                {/* Form */}
                <form onSubmit={handleSubmit}>
                    <Card padding="md">
                        <div className="space-y-6">
                            {/* Title */}
                            <div>
                                <label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Judul <span className="text-red-500">*</span>
                                </label>
                                <Input
                                    id="title"
                                    type="text"
                                    value={data.title}
                                    onChange={(e) => setData('title', e.target.value)}
                                    className="mt-1"
                                    error={errors.title}
                                    required
                                />
                            </div>

                            {/* Message */}
                            <div>
                                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Pesan <span className="text-red-500">*</span>
                                </label>
                                <textarea
                                    id="message"
                                    value={data.message}
                                    onChange={(e) => setData('message', e.target.value)}
                                    rows={6}
                                    required
                                    className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 sm:text-sm ${
                                        errors.message ? 'border-red-300 dark:border-red-600' : ''
                                    }`}
                                />
                                {errors.message && (
                                    <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.message}</p>
                                )}
                            </div>

                            {/* Type */}
                            <div>
                                <label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Tipe <span className="text-red-500">*</span>
                                </label>
                                <Select
                                    id="type"
                                    value={data.type}
                                    onChange={(e) => setData('type', e.target.value as 'info' | 'warning' | 'success' | 'error')}
                                    className="mt-1"
                                    error={errors.type}
                                    required
                                    options={[
                                        { value: 'info', label: 'Info' },
                                        { value: 'warning', label: 'Warning' },
                                        { value: 'success', label: 'Success' },
                                        { value: 'error', label: 'Error' },
                                    ]}
                                />
                            </div>

                            {/* Is Active */}
                            <div className="flex items-center">
                                <input
                                    id="is_active"
                                    type="checkbox"
                                    checked={data.is_active}
                                    onChange={(e) => setData('is_active', e.target.checked)}
                                    className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
                                />
                                <label htmlFor="is_active" className="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                                    Aktifkan announcement ini
                                </label>
                            </div>

                            {/* Starts At */}
                            <div>
                                <label htmlFor="starts_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Mulai (Opsional)
                                </label>
                                <Input
                                    id="starts_at"
                                    type="datetime-local"
                                    value={data.starts_at}
                                    onChange={(e) => setData('starts_at', e.target.value)}
                                    className="mt-1"
                                    error={errors.starts_at}
                                />
                            </div>

                            {/* Ends At */}
                            <div>
                                <label htmlFor="ends_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Berakhir (Opsional)
                                </label>
                                <Input
                                    id="ends_at"
                                    type="datetime-local"
                                    value={data.ends_at}
                                    onChange={(e) => setData('ends_at', e.target.value)}
                                    className="mt-1"
                                    error={errors.ends_at}
                                />
                            </div>

                            {/* Actions */}
                            <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                                <Button
                                    type="button"
                                    variant="secondary"
                                    onClick={() => window.history.back()}
                                >
                                    Batal
                                </Button>
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Menyimpan...' : 'Simpan'}
                                </Button>
                            </div>
                        </div>
                    </Card>
                </form>
            </div>
        </AdminLayout>
    );
}

