import { Link, useForm } from '@inertiajs/react';

import AdminPage from '@/Components/admin/AdminPage';
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 { Textarea } from '@/Components/ui/textarea';
import { useUnsavedChanges } from '@/hooks/useUnsavedChanges';
import AdminLayout from '@/Layouts/AdminLayout';

const ENTRY_TYPES = ['feature', 'improvement', 'fix', 'security'] as const;

export default function ChangelogEntryCreate() {
  const { data, setData, post, processing, errors, isDirty } = useForm({
    title: '',
    body: '',
    version: '',
    type: '',
    published_at: '',
  });

  useUnsavedChanges(isDirty);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    post(route('admin.changelog-entries.store'));
  };

  return (
    <AdminLayout>
      <AdminPage
        title="Create Changelog Entry"
        subtitle="Document a product update or release."
        breadcrumbs={[
          { label: 'Admin', href: '/admin' },
          { label: 'Changelog', href: route('admin.changelog-entries.index') },
          { label: 'Create' },
        ]}
      >
        <form onSubmit={handleSubmit} className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Entry Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-1">
                <Label htmlFor="title">Title *</Label>
                <Input
                  id="title"
                  value={data.title}
                  onChange={(e) => setData('title', e.target.value)}
                  placeholder="e.g. Add bulk recommendation actions"
                />
                {errors.title && <p className="text-sm text-destructive">{errors.title}</p>}
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <Label htmlFor="version">Version</Label>
                  <Input
                    id="version"
                    value={data.version}
                    onChange={(e) => setData('version', e.target.value)}
                    placeholder="e.g. 2.4.0"
                  />
                  {errors.version && <p className="text-sm text-destructive">{errors.version}</p>}
                </div>

                <div className="space-y-1">
                  <Label htmlFor="type">Type</Label>
                  <Select
                    value={data.type}
                    onValueChange={(value) => setData('type', value)}
                  >
                    <SelectTrigger id="type">
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                    <SelectContent>
                      {ENTRY_TYPES.map((t) => (
                        <SelectItem key={t} value={t}>
                          {t.charAt(0).toUpperCase() + t.slice(1)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {errors.type && <p className="text-sm text-destructive">{errors.type}</p>}
                </div>
              </div>

              <div className="space-y-1">
                <Label htmlFor="body">Body *</Label>
                <Textarea
                  id="body"
                  value={data.body}
                  onChange={(e) => setData('body', e.target.value)}
                  placeholder="Describe what changed and why it matters"
                  rows={10}
                />
                {errors.body && <p className="text-sm text-destructive">{errors.body}</p>}
              </div>

              <div className="space-y-1">
                <Label htmlFor="published_at">Publish Date (leave empty for draft)</Label>
                <Input
                  id="published_at"
                  type="datetime-local"
                  value={data.published_at}
                  onChange={(e) => setData('published_at', e.target.value)}
                />
                {errors.published_at && <p className="text-sm text-destructive">{errors.published_at}</p>}
              </div>
            </CardContent>
          </Card>

          <div className="flex gap-3">
            <Button type="submit" disabled={processing}>
              {processing ? 'Creating…' : 'Create Entry'}
            </Button>
            <Button variant="outline" asChild>
              <Link href={route('admin.changelog-entries.index')}>Cancel</Link>
            </Button>
          </div>
        </form>
      </AdminPage>
    </AdminLayout>
  );
}