import React from "react";
import { useSettingsForm } from "./SettingsLayout";
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Terminal } from "lucide-react";
import { fromSelectValue, toSelectValue, NONE_VALUE } from "@/hooks/use-settings";

export function GeneralSettings() {
    const { form, meta } = useSettingsForm();

    return (
        <div className="space-y-8 animate-in fade-in slide-up duration-500">
            <div className="space-y-4">
                <div className="flex items-center gap-2 mb-4">
                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
                        <MessageSquare className="w-3 h-3 mr-1" /> Onboarding
                    </Badge>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <FormField
                        control={form.control}
                        name="welcomeChannelId"
                        render={({ field }) => (
                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
                                <FormLabel className="text-foreground/80">Welcome Channel</FormLabel>
                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
                                    <FormControl>
                                        <SelectTrigger className="bg-background/50 border-border/50">
                                            <SelectValue placeholder="Select a channel" />
                                        </SelectTrigger>
                                    </FormControl>
                                    <SelectContent>
                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
                                        {meta?.channels
                                            .filter(c => c.type === 0)
                                            .map(c => (
                                                <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
                                            ))}
                                    </SelectContent>
                                </Select>
                                <FormDescription>Where to send welcome messages.</FormDescription>
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="welcomeMessage"
                        render={({ field }) => (
                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
                                <FormLabel className="text-foreground/80">Welcome Message Template</FormLabel>
                                <FormControl>
                                    <Textarea
                                        {...field}
                                        value={field.value || ""}
                                        placeholder="Welcome {user}!"
                                        className="min-h-[100px] font-mono text-xs bg-background/50 border-border/50 focus:border-primary/50 focus:ring-primary/20 resize-none"
                                    />
                                </FormControl>
                                <FormDescription>Available variables: {"{user}"}, {"{count}"}.</FormDescription>
                            </FormItem>
                        )}
                    />
                </div>
            </div>

            <div className="space-y-4">
                <div className="flex items-center gap-2 mb-4">
                    <Badge variant="outline" className="bg-primary/5 text-primary border-primary/20">
                        Channels & Features
                    </Badge>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <FormField
                        control={form.control}
                        name="feedbackChannelId"
                        render={({ field }) => (
                            <FormItem className="glass-card p-5 rounded-xl border border-border/50">
                                <FormLabel className="text-foreground/80">Feedback Channel</FormLabel>
                                <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
                                    <FormControl>
                                        <SelectTrigger className="bg-background/50 border-border/50">
                                            <SelectValue placeholder="Select a channel" />
                                        </SelectTrigger>
                                    </FormControl>
                                    <SelectContent>
                                        <SelectItem value={NONE_VALUE}>None</SelectItem>
                                        {meta?.channels.filter(c => c.type === 0).map(c => (
                                            <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <FormDescription>Where user feedback is sent.</FormDescription>
                            </FormItem>
                        )}
                    />

                    <div className="glass-card p-5 rounded-xl border border-border/50 space-y-4">
                        <div className="flex items-center gap-2 mb-2">
                            <Terminal className="w-4 h-4 text-muted-foreground" />
                            <h4 className="font-medium text-sm">Terminal Embed</h4>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                            <FormField
                                control={form.control}
                                name="terminal.channelId"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Channel</FormLabel>
                                        <Select onValueChange={v => field.onChange(fromSelectValue(v))} value={toSelectValue(field.value || null)}>
                                            <FormControl>
                                                <SelectTrigger className="bg-background/50 border-border/50 h-9 text-xs">
                                                    <SelectValue placeholder="Select channel" />
                                                </SelectTrigger>
                                            </FormControl>
                                            <SelectContent>
                                                <SelectItem value={NONE_VALUE}>None</SelectItem>
                                                {meta?.channels.filter(c => c.type === 0).map(c => (
                                                    <SelectItem key={c.id} value={c.id}>#{c.name}</SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="terminal.messageId"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel className="text-xs text-muted-foreground uppercase tracking-wide">Message ID</FormLabel>
                                        <FormControl>
                                            <Input {...field} value={field.value || ""} placeholder="Message ID" className="font-mono text-xs bg-background/50 border-border/50 h-9" />
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
