'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import Link from 'next/link';
import { ChevronLeft } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function AddLanguagePage() {
  const { toast } = useToast();
  const router = useRouter();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const languageName = formData.get('language-name');

    toast({
      title: 'Language Added!',
      description: `The language "${languageName}" has been created.`,
    });

    router.push('/admin/settings/languages');
  };

  return (
    <div className="mx-auto grid max-w-2xl flex-1 auto-rows-max gap-4">
        <div className="flex items-center gap-4">
            <Button variant="outline" size="icon" className="h-7 w-7" asChild>
                <Link href="/admin/settings/languages">
                    <ChevronLeft className="h-4 w-4" />
                    <span className="sr-only">Back</span>
                </Link>
            </Button>
            <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
            Add New Language
            </h1>
        </div>
        <form onSubmit={handleSubmit} className="grid gap-4">
            <Card>
                <CardHeader>
                    <CardTitle>Language Details</CardTitle>
                    <CardDescription>Fill in the details for the new language.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                    <div className="space-y-2">
                        <Label htmlFor="language-name">Language Name</Label>
                        <Input id="language-name" name="language-name" placeholder="e.g. English" required />
                    </div>
                     <div className="space-y-2">
                        <Label htmlFor="language-code">Language Code</Label>
                        <Input id="language-code" name="language-code" placeholder="e.g. en" required />
                    </div>
                </CardContent>
            </Card>

            <Button type="submit">Add Language</Button>
        </form>
    </div>
  );
}