'use client';

import {
  createAppVersion,
  deleteAppVersion,
  getAppVersionList,
  updateAppVersion,
} from '@/services/admin/application';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { Button } from '@workspace/ui/components/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@workspace/ui/components/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@workspace/ui/components/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@workspace/ui/components/select';
import { Switch } from '@workspace/ui/components/switch';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@workspace/ui/components/table';
import { EnhancedInput } from '@workspace/ui/custom-components/enhanced-input';
import { Icon } from '@workspace/ui/custom-components/icon';

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';

const versionSchema = z.object({
  id: z.number().optional(),
  platform: z.string().min(1),
  version: z.string().min(1),
  min_version: z.string().optional(),
  url: z.string().url(),
  description: z.string().optional(),
  force_update: z.boolean(),
  is_default: z.boolean(),
  is_in_review: z.boolean(),
});

type VersionFormData = z.infer<typeof versionSchema>;

export default function VersionPage() {
  const t = useTranslations('system');
  const queryClient = useQueryClient();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [open, setOpen] = useState(false);
  const [editingVersion, setEditingVersion] = useState<API.ApplicationVersion | null>(null);

  const { data } = useQuery({
    queryKey: ['app-versions', page, pageSize],
    queryFn: async () => {
      const res = await getAppVersionList({ page, size: pageSize });
      return res.data?.data;
    },
  });

  const form = useForm<VersionFormData>({
    resolver: zodResolver(versionSchema),
    defaultValues: {
      platform: 'android',
      version: '',
      min_version: '',
      url: '',
      description: '',
      force_update: false,
      is_default: false,
      is_in_review: false,
    },
  });

  const createMutation = useMutation({
    mutationFn: createAppVersion,
    onSuccess: () => {
      toast.success(t('common.saveSuccess'));
      setOpen(false);
      form.reset();
      queryClient.invalidateQueries({ queryKey: ['app-versions'] });
    },
    onError: () => {
      toast.error(t('common.saveFailed'));
    },
  });

  const updateMutation = useMutation({
    mutationFn: updateAppVersion,
    onSuccess: () => {
      toast.success(t('common.saveSuccess'));
      setOpen(false);
      setEditingVersion(null);
      form.reset();
      queryClient.invalidateQueries({ queryKey: ['app-versions'] });
    },
    onError: () => {
      toast.error(t('common.saveFailed'));
    },
  });

  const deleteMutation = useMutation({
    mutationFn: deleteAppVersion,
    onSuccess: () => {
      toast.success(t('common.saveSuccess'));
      queryClient.invalidateQueries({ queryKey: ['app-versions'] });
    },
    onError: () => {
      toast.error(t('common.saveFailed'));
    },
  });

  const onSubmit = (values: VersionFormData) => {
    const payload = {
      ...values,
      description: JSON.stringify({ 'en-US': values.description, 'zh-CN': values.description }),
    };

    if (editingVersion) {
      updateMutation.mutate({ ...payload, id: editingVersion.id } as API.UpdateAppVersionRequest);
    } else {
      createMutation.mutate(payload as API.CreateAppVersionRequest);
    }
  };

  const handleEdit = (version: API.ApplicationVersion) => {
    setEditingVersion(version);
    let desc = '';
    if (version.description && typeof version.description === 'object') {
      desc = Object.values(version.description)[0] || '';
    } else if (typeof version.description === 'string') {
      try {
        const parsed = JSON.parse(version.description);
        desc = (Object.values(parsed)[0] as string) || '';
      } catch (e) {
        desc = version.description;
      }
    }

    form.reset({
      platform: version.platform,
      version: version.version,
      min_version: version.min_version,
      url: version.url,
      description: desc,
      force_update: version.force_update,
      is_default: version.is_default,
      is_in_review: version.is_in_review,
    });
    setOpen(true);
  };

  const handleDelete = (id: number) => {
    if (confirm(t('version.confirmDelete'))) {
      deleteMutation.mutate({ id });
    }
  };

  const handleOpenChange = (open: boolean) => {
    setOpen(open);
    if (!open) {
      setEditingVersion(null);
      form.reset({
        platform: 'android',
        version: '',
        min_version: '',
        url: '',
        description: '',
        force_update: false,
        is_default: false,
        is_in_review: false,
      });
    }
  };

  return (
    <div className='space-y-4'>
      <div className='flex items-center justify-between'>
        <h2 className='text-2xl font-bold tracking-tight'>{t('version.title')}</h2>
        <Button onClick={() => handleOpenChange(true)}>
          <Icon icon='mdi:plus' className='mr-2 h-4 w-4' />
          {t('version.create')}
        </Button>
      </div>

      <div className='rounded-md border'>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>ID</TableHead>
              <TableHead>{t('version.platform')}</TableHead>
              <TableHead>{t('version.versionNumber')}</TableHead>
              <TableHead>{t('version.url')}</TableHead>
              <TableHead>{t('version.force')}</TableHead>
              <TableHead>{t('version.default')}</TableHead>
              <TableHead>{t('version.actions')}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data?.list?.map((version: API.ApplicationVersion) => (
              <TableRow key={version.id}>
                <TableCell>{version.id}</TableCell>
                <TableCell>{version.platform}</TableCell>
                <TableCell>{version.version}</TableCell>
                <TableCell className='max-w-[200px] truncate' title={version.url}>
                  {version.url}
                </TableCell>
                <TableCell>{version.force_update ? t('version.yes') : t('version.no')}</TableCell>
                <TableCell>{version.is_default ? t('version.yes') : t('version.no')}</TableCell>
                <TableCell>
                  <div className='flex space-x-2'>
                    <Button variant='ghost' size='icon' onClick={() => handleEdit(version)}>
                      <Icon icon='mdi:pencil' className='h-4 w-4' />
                    </Button>
                    <Button variant='ghost' size='icon' onClick={() => handleDelete(version.id)}>
                      <Icon icon='mdi:delete' className='h-4 w-4 text-red-500' />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
            {!data?.list?.length && (
              <TableRow>
                <TableCell colSpan={7} className='h-24 text-center'>
                  {t('version.noResults')}
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      <div className='flex items-center justify-between py-2'>
        <div className='text-muted-foreground text-sm'>
          {t('version.total', { count: data?.total || 0 })}
        </div>
        <div className='flex items-center space-x-2'>
          <Select value={String(pageSize)} onValueChange={(val) => setPageSize(Number(val))}>
            <SelectTrigger className='w-[80px]'>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value='10'>10</SelectItem>
              <SelectItem value='20'>20</SelectItem>
              <SelectItem value='50'>50</SelectItem>
            </SelectContent>
          </Select>
          <Button
            variant='outline'
            size='sm'
            onClick={() => setPage(Math.max(1, page - 1))}
            disabled={page <= 1}
          >
            {t('version.previous')}
          </Button>
          <span className='text-sm'>{t('version.page', { page })}</span>
          <Button
            variant='outline'
            size='sm'
            onClick={() => setPage(page + 1)}
            disabled={!data?.list?.length || data.list.length < pageSize}
          >
            {t('version.next')}
          </Button>
        </div>
      </div>

      <Dialog open={open} onOpenChange={handleOpenChange}>
        <DialogContent className='sm:max-w-[600px]'>
          <DialogHeader>
            <DialogTitle>
              {editingVersion ? t('version.edit') : t('version.createVersion')}
            </DialogTitle>
          </DialogHeader>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
              <div className='grid grid-cols-2 gap-4'>
                <FormField
                  control={form.control}
                  name='platform'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('version.platform')}</FormLabel>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder={t('version.platformPlaceholder')} />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          <SelectItem value='android'>Android</SelectItem>
                          <SelectItem value='ios'>iOS</SelectItem>
                          <SelectItem value='windows'>Windows</SelectItem>
                          <SelectItem value='macos'>macOS</SelectItem>
                          <SelectItem value='linux'>Linux</SelectItem>
                          <SelectItem value='harmony'>Harmony</SelectItem>
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name='version'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('version.versionNumber')}</FormLabel>
                      <FormControl>
                        <EnhancedInput
                          value={field.value}
                          onValueChange={field.onChange}
                          placeholder={t('version.versionPlaceholder')}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <div className='grid grid-cols-2 gap-4'>
                <FormField
                  control={form.control}
                  name='min_version'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('version.minVersion')}</FormLabel>
                      <FormControl>
                        <EnhancedInput
                          value={field.value}
                          onValueChange={field.onChange}
                          placeholder={t('version.versionPlaceholder')}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name='url'
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>{t('version.downloadUrl')}</FormLabel>
                      <FormControl>
                        <EnhancedInput
                          value={field.value}
                          onValueChange={field.onChange}
                          placeholder='https://...'
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <FormField
                control={form.control}
                name='description'
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('version.descriptionField')}</FormLabel>
                    <FormControl>
                      <EnhancedInput
                        value={field.value}
                        onValueChange={field.onChange}
                        placeholder={t('version.descriptionPlaceholder')}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className='flex flex-row gap-4'>
                <FormField
                  control={form.control}
                  name='force_update'
                  render={({ field }) => (
                    <FormItem className='flex flex-1 flex-row items-center justify-between rounded-lg border p-3 shadow-sm'>
                      <div className='space-y-0.5'>
                        <FormLabel>{t('version.forceUpdate')}</FormLabel>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name='is_default'
                  render={({ field }) => (
                    <FormItem className='flex flex-1 flex-row items-center justify-between rounded-lg border p-3 shadow-sm'>
                      <div className='space-y-0.5'>
                        <FormLabel>{t('version.default')}</FormLabel>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name='is_in_review'
                  render={({ field }) => (
                    <FormItem className='flex flex-1 flex-row items-center justify-between rounded-lg border p-3 shadow-sm'>
                      <div className='space-y-0.5'>
                        <FormLabel>{t('version.inReview')}</FormLabel>
                      </div>
                      <FormControl>
                        <Switch checked={field.value} onCheckedChange={field.onChange} />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </div>
              <DialogFooter>
                <Button type='submit'>
                  {editingVersion ? t('version.update') : t('version.create')}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </div>
  );
}