import OracleConfigSection from '@/components/admin/market-management/oracle-config-section';
import { Button } from '@/components/ui/button';
import { ColorPicker } from '@/components/ui/color-picker';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { createRequest } from '@/data/request/create-request';
import { updateRequest } from '@/data/request/update-request';
import {
  MarketTemplateSchema,
  TMarketTemplateForm,
} from '@/schema/market-schema';
import { TMarketTemplate } from '@/types/market.types';
import { zodResolver } from '@hookform/resolvers/zod';
import { MinusIcon, PencilSimpleIcon, PlusIcon } from '@phosphor-icons/react';
import { useEffect, useState, useTransition } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const EMPTY: TMarketTemplateForm = {
  name: '',
  is_active: true,
  schedule: 'weekly',
  closes_offset: '+7 days',
  auto_open: false,
  category_id: null,
  title_pattern: '',
  description: '',
  type: 'binary',
  outcomes: [
    { title: 'Yes', color: '#22c55e' },
    { title: 'No', color: '#ef4444' },
  ],
  initial_liquidity: 100,
  oracle_type: 'manual',
  oracle_config: {},
  resolution_criteria: '',
  dispute_window_minutes: 120,
};

const SCHEDULES = ['hourly', 'daily', 'weekly', 'monthly'] as const;

export default function AddTemplate({
  refresh,
  editing,
}: {
  refresh: () => void;
  editing?: TMarketTemplate;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm<TMarketTemplateForm>({
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    resolver: zodResolver(MarketTemplateSchema) as any,
    defaultValues: EMPTY,
  });

  const { fields, append, remove, replace } = useFieldArray({
    control: form.control,
    name: 'outcomes',
  });

  const type = form.watch('type');

  useEffect(() => {
    if (!isOpen) return;
    form.reset(
      editing
        ? {
            name: editing.name,
            is_active: editing.is_active,
            schedule: editing.schedule,
            closes_offset: editing.closes_offset,
            auto_open: editing.auto_open,
            category_id: editing.category_id ?? null,
            title_pattern: editing.title_pattern,
            description: editing.description ?? '',
            type: editing.type,
            outcomes:
              editing.outcomes?.length >= 2
                ? editing.outcomes.map((o) => ({
                    title: o.title,
                    color: o.color ?? '#22c55e',
                  }))
                : EMPTY.outcomes,
            initial_liquidity: Number(editing.initial_liquidity ?? 100),
            oracle_type: editing.oracle_type ?? 'manual',
            oracle_config: editing.oracle_config ?? {},
            resolution_criteria: editing.resolution_criteria ?? '',
            dispute_window_minutes: editing.dispute_window_minutes ?? 120,
          }
        : EMPTY,
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, editing]);

  useEffect(() => {
    if (type === 'binary') {
      replace([
        { title: 'Yes', color: '#22c55e' },
        { title: 'No', color: '#ef4444' },
      ]);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type]);

  const onSubmit = (values: TMarketTemplateForm) => {
    startTransition(async () => {
      const payload = {
        ...values,
        is_active: values.is_active ? 1 : 0,
        auto_open: values.auto_open ? 1 : 0,
        oracle_config:
          values.oracle_type !== 'manual' ? (values.oracle_config ?? {}) : null,
      };

      const res = editing
        ? await updateRequest({
            url: `/api/admin/market-templates/${editing.id}`,
            formData: payload,
          })
        : await createRequest({
            url: '/api/admin/market-templates',
            formData: payload,
          });

      if (res) {
        toast.success(
          editing ? t('Template updated.') : t('Template created.'),
        );
        refresh();
        setIsOpen(false);
      }
    });
  };

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        {editing ? (
          <Button variant="ghostPrimary">
            <PencilSimpleIcon weight="bold" className="size-4" />
          </Button>
        ) : (
          <Button variant="default">
            <PlusIcon size={16} />
            {t('Add Template')}
          </Button>
        )}
      </SheetTrigger>
      <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex h-full flex-col justify-between"
          >
            <SheetHeader>
              <SheetTitle>
                {editing ? t('Edit Template') : t('Add Template')}
              </SheetTitle>
            </SheetHeader>

            <div className="mx-4 space-y-4">
              <div className="space-y-4 rounded-xl border border-black/5 p-4">
                <h4 className="text-lg font-medium">{t('Template Details')}</h4>
                <Separator />

                <FormField
                  control={form.control}
                  name="name"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('Name')}</FormLabel>
                      <FormControl>
                        <Input placeholder={t('e.g. Weekly BTC')} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="title_pattern"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('Title Pattern')}</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Will BTC close above ${threshold} on {date}?"
                          {...field}
                        />
                      </FormControl>
                      <p className="text-xs text-black/50 dark:text-white/50">
                        {t(
                          'Use {date} for the close date and ${key} for any oracle config value.',
                        )}
                      </p>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="description"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('Description')}</FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder={t('Optional description')}
                          {...field}
                          value={field.value ?? ''}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="schedule"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{t('Schedule')}</FormLabel>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            {SCHEDULES.map((s) => (
                              <SelectItem
                                key={s}
                                value={s}
                                className="capitalize"
                              >
                                {t(s)}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="closes_offset"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{t('Close Offset')}</FormLabel>
                        <FormControl>
                          <Input placeholder="+7 days" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="type"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{t('Type')}</FormLabel>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="binary">
                              {t('Binary')}
                            </SelectItem>
                            <SelectItem value="multi">
                              {t('Multiple')}
                            </SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="initial_liquidity"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{t('Initial Liquidity')}</FormLabel>
                        <FormControl>
                          <Input type="number" min={1} {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <div className="space-y-2">
                  <FormLabel>{t('Outcomes')}</FormLabel>
                  {fields.map((f, index) => (
                    <div key={f.id} className="flex items-center gap-2">
                      <FormField
                        control={form.control}
                        name={`outcomes.${index}.color`}
                        render={({ field }) => (
                          <ColorPicker
                            value={field.value ?? '#22c55e'}
                            onChange={field.onChange}
                          />
                        )}
                      />
                      <FormField
                        control={form.control}
                        name={`outcomes.${index}.title`}
                        render={({ field }) => (
                          <FormItem className="flex-1">
                            <FormControl>
                              <Input
                                placeholder={`${t('Outcome')} ${index + 1}`}
                                {...field}
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      {type === 'multi' && fields.length > 2 && (
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          onClick={() => remove(index)}
                        >
                          <MinusIcon weight="bold" className="size-4" />
                        </Button>
                      )}
                    </div>
                  ))}
                  {type === 'multi' && (
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      onClick={() => append({ title: '', color: '#22c55e' })}
                    >
                      <PlusIcon weight="bold" className="mr-1.5 size-4" />
                      {t('Add Outcome')}
                    </Button>
                  )}
                </div>

                <FormField
                  control={form.control}
                  name="auto_open"
                  render={({ field }) => (
                    <FormItem className="flex h-11 flex-row items-center justify-between rounded-md bg-black/5 px-4">
                      <FormLabel className="cursor-pointer">
                        {t('Auto-open generated markets')}
                      </FormLabel>
                      <FormControl>
                        <Switch
                          checked={!!field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="is_active"
                  render={({ field }) => (
                    <FormItem className="flex h-11 flex-row items-center justify-between rounded-md bg-black/5 px-4">
                      <FormLabel className="cursor-pointer">
                        {t('Active')}
                      </FormLabel>
                      <FormControl>
                        <Switch
                          checked={!!field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>

              <OracleConfigSection
                form={form}
                outcomes={form.watch('outcomes')}
              />
            </div>

            <SheetFooter>
              <Button type="submit" loading={isPending} disabled={isPending}>
                {editing ? t('Update Template') : t('Add Template')}
              </Button>
              <SheetClose asChild>
                <Button variant="outline">{t('Close')}</Button>
              </SheetClose>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}