import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { Save } from 'lucide-react';
import { Field, FormCard, Section } from './shared';
import type { GeneralSettings } from './types';

const TIMEZONES = [
    'Africa/Nairobi',
    'Africa/Lagos',
    'Africa/Cairo',
    'Africa/Johannesburg',
    'UTC',
    'Europe/London',
    'Europe/Paris',
    'Asia/Dubai',
    'Asia/Kolkata',
    'America/New_York',
    'America/Los_Angeles',
];

const CURRENCIES = [
    'KES',
    'USD',
    'EUR',
    'GBP',
    'UGX',
    'TZS',
    'RWF',
    'ETB',
    'ZAR',
];

export default function GeneralTab({
    settings,
}: {
    settings: GeneralSettings;
}) {
    const { data, setData, put, processing, errors } = useForm({ ...settings });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                put('/admin/settings/general');
            }}
        >
            <FormCard>
                <Section title="Platform">
                    <Field
                        label="Platform name"
                        required
                        error={errors.app_name}
                    >
                        <Input
                            value={data.app_name}
                            onChange={(e) =>
                                setData('app_name', e.target.value)
                            }
                            className={cn(
                                errors.app_name && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field label="Timezone" required error={errors.timezone}>
                        <Select
                            value={data.timezone}
                            onValueChange={(v) => setData('timezone', v)}
                        >
                            <SelectTrigger>
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                {TIMEZONES.map((tz) => (
                                    <SelectItem key={tz} value={tz}>
                                        {tz}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </Field>
                    <Field
                        label="Default currency"
                        required
                        error={errors.default_currency}
                    >
                        <Select
                            value={data.default_currency}
                            onValueChange={(v) =>
                                setData('default_currency', v)
                            }
                        >
                            <SelectTrigger>
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                {CURRENCIES.map((c) => (
                                    <SelectItem key={c} value={c}>
                                        {c}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </Field>
                </Section>

                <div className="border-border border-t" />

                <Section title="Contact">
                    <Field
                        label="Support email"
                        hint="Shown to tenants on help pages"
                        error={errors.support_email}
                    >
                        <Input
                            type="email"
                            value={data.support_email}
                            onChange={(e) =>
                                setData('support_email', e.target.value)
                            }
                            placeholder="support@example.com"
                            className={cn(
                                errors.support_email && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Contact email"
                        hint="General enquiries"
                        error={errors.contact_email}
                    >
                        <Input
                            type="email"
                            value={data.contact_email}
                            onChange={(e) =>
                                setData('contact_email', e.target.value)
                            }
                            placeholder="hello@example.com"
                            className={cn(
                                errors.contact_email && 'border-destructive',
                            )}
                        />
                    </Field>
                </Section>

                <div className="flex justify-end">
                    <Button
                        type="submit"
                        disabled={processing}
                        size="sm"
                        className="gap-2"
                    >
                        <Save className="h-3.5 w-3.5" />
                        Save general settings
                    </Button>
                </div>
            </FormCard>
        </form>
    );
}