import DeleteModal from '@/components/inertia/delete-modal';
import Switch from '@/components/switch';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import Dashboard from '@/layouts/dashboard/layout';
import { SharedData } from '@/types/global';
import { Head, Link, router, usePage } from '@inertiajs/react';
import { Pencil, RefreshCw, Trash2 } from 'lucide-react';
import { ReactNode } from 'react';
import AddLanguage from './partials/add-language';

const Index = () => {
   const { props } = usePage<SharedData>();
   const { translate } = props;
   const { settings, common, button: buttonLabels } = translate;

   const languageStatus = (lang: Language, checked: boolean) => {
      router.put(
         route('language.update', lang.id),
         { is_active: checked },
         {
            preserveScroll: true,
         },
      );
   };

   const defaultLanguage = (lang: Language) => {
      router.post(route('language.default', lang.id), {
         preserveScroll: true,
      });
   };

   const syncFromFiles = (lang: Language) => {
      router.post(route('language.sync', lang.code), {}, {
         preserveScroll: true,
      });
   };

   return (
      <>
         <Head title={settings.language_settings} />

         <Card className="mx-auto w-full max-w-[1000px] space-y-6 p-6">
            <div className="flex items-center justify-between border-b border-b-gray-200 pb-6">
               <p className="text-lg font-bold text-gray-900">{settings.language_settings}</p>
               <AddLanguage />
            </div>

            <div className="rounded-md bg-blue-50 p-4 text-sm text-blue-700">
               <div className="mb-2 font-medium">{settings.translation_scope_information}</div>
               <ul className="list-disc space-y-1 pl-5">
                  <li>{settings.translation_scope_dashboard}</li>
                  <li>{settings.translation_scope_public_pages}</li>
               </ul>
            </div>

            <div className="flex flex-col gap-5">
               {props.langs.map((lang) =>
                  lang.is_default ? (
                     <div key={lang.code} className="mb-5 flex items-center justify-between rounded-md border border-gray-300 p-5">
                        <h6 className="text-xl">
                           {lang.name} ({lang.nativeName})
                        </h6>

                        <div className="flex items-center">
                           <span className="mr-4 rounded-full bg-blue-50 px-2 py-0.5 text-sm font-medium">{common.default}</span>
                           <Link href={route('language.edit', lang.code)}>
                              <Button size="icon" variant="secondary" className="mr-3 h-7 w-7 rounded-full text-blue-500">
                                 <Pencil className="h-4 w-4" />
                              </Button>
                           </Link>
                           <Button size="icon" variant="secondary" className="mr-3 h-7 w-7 rounded-full text-blue-500" onClick={() => syncFromFiles(lang)}>
                              <RefreshCw className="h-4 w-4" />
                           </Button>
                           <Switch disabled checked name={lang.code} />
                        </div>
                     </div>
                  ) : (
                     <div key={lang.code} className="flex items-center justify-between rounded-md border border-gray-300 p-5">
                        <h6 className="text-xl">
                           {lang.name} ({lang.nativeName})
                        </h6>

                        <div className="flex items-center gap-3">
                           {lang.is_active ? (
                              <Button onClick={() => defaultLanguage(lang)} size="sm" variant="secondary" className="rounded-full">
                                 {buttonLabels.set_default}
                              </Button>
                           ) : null}

                           <Link href={route('language.edit', lang.code)}>
                              <Button size="icon" variant="secondary" className="h-7 w-7 rounded-full text-blue-500">
                                 <Pencil className="h-4 w-4" />
                              </Button>
                           </Link>
                           <Button size="icon" variant="secondary" className="h-7 w-7 rounded-full text-blue-500" onClick={() => syncFromFiles(lang)}>
                              <RefreshCw className="h-4 w-4" />
                           </Button>

                           <DeleteModal
                              routePath={route('language.destroy', lang.id)}
                              actionComponent={
                                 <Button size="icon" variant="ghost" className="bg-destructive/8 hover:bg-destructive/6 h-8 w-8 rounded-full p-0">
                                    <Trash2 className="text-destructive text-sm" />
                                 </Button>
                              }
                           />

                           <Switch
                              name={lang.code}
                              defaultChecked={lang.is_active}
                              onCheckedChange={(checked) => languageStatus(lang, checked)}
                              className="cursor-pointer"
                           />
                        </div>
                     </div>
                  ),
               )}
            </div>
         </Card>
      </>
   );
};

Index.layout = (page: ReactNode) => <Dashboard children={page} />;

export default Index;
