import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import TiptapEditor from '@/components/rich-text-editor';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { index, store } from '@/routes/admin/feedback';

type FeedbackTypeOption = { value: string; label: string };

type Props = {
    types: FeedbackTypeOption[];
};

export default function FeedbackCreate({ types }: Props) {
    const [message, setMessage] = useState('');

    return (
        <>
            <Head title="Tambah Kritik dan Saran" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <PageHeader
                    title="Tambah Kritik dan Saran"
                    actions={
                        <Button variant="outline" asChild>
                            <Link href={index.url()}>
                                <ArrowLeft className="h-4 w-4" />
                                Kembali
                            </Link>
                        </Button>
                    }
                />

                <Form action={store()} className="space-y-6">
                    {({ errors, processing }) => (
                        <>
                            <Card>
                                <CardHeader>
                                    <CardTitle>Detail Masukan</CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-4">
                                    <div className="grid gap-2">
                                        <Label>
                                            Jenis{' '}
                                            <span className="text-destructive">
                                                *
                                            </span>
                                        </Label>
                                        <input type="hidden" name="type" />
                                        <Select
                                            name="type"
                                            defaultValue="kritik"
                                        >
                                            <SelectTrigger className="w-full">
                                                <SelectValue placeholder="Pilih jenis" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {types.map((type) => (
                                                    <SelectItem
                                                        key={type.value}
                                                        value={type.value}
                                                    >
                                                        {type.label}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                        <InputError message={errors.type} />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="subject">
                                            Subjek{' '}
                                            <span className="text-destructive">
                                                *
                                            </span>
                                        </Label>
                                        <Input
                                            id="subject"
                                            name="subject"
                                            placeholder="Ringkasan singkat"
                                        />
                                        <InputError message={errors.subject} />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label>
                                            Pesan{' '}
                                            <span className="text-destructive">
                                                *
                                            </span>
                                        </Label>
                                        <TiptapEditor
                                            name="message"
                                            value={message}
                                            onChange={setMessage}
                                            placeholder="Jelaskan kritik, saran, atau aduan Anda secara rinci"
                                            error={errors.message}
                                        />
                                    </div>
                                </CardContent>
                            </Card>

                            <div className="flex justify-end">
                                <Button type="submit" disabled={processing}>
                                    <Save className="h-4 w-4" />
                                    Simpan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </div>
        </>
    );
}
