"use client";
import React, { useCallback } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "react-compose-form";
import { FormReset} from "@/components/form/form-reset";
import { FormSubmit } from "@/components/form/form-submit";
import { InputControl } from "@/components/form/control/input.control";
import { MediaControl } from "@/components/form/control/media.control";
import { DateControl } from "@/components/form/control/date.control";
import { TextareaControl } from "@/components/form/control/textarea.control";
import { Card, CardContent } from "@/components/ui/card";
import { EditorLayout, EditorLayoutContent, EditorLayoutSidebar } from "@/components/layout/editor";
import { api } from "@/lib/trpc/client";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { MediaScope } from "@/server/modules/media/types/media-scope.enum";
import { Routes } from "@/config/routes";

type Edition = NonNullable<AppRouterOutput["edition"]["get"]>;

const EditionEditorSchema = z.object({
    issueNumber: z.coerce.number().int().min(1, "Issue number is required"),
    feature: z.string().min(1, "Feature is required"),
    updates: z.string().min(1, "Updates is required"),
    topFlop: z.string().min(1, "Top/Flop is required"),
    og: z.string().min(1, "OG is required"),
    previewId: z.string().uuid().nullable(),
    mediaId: z.string().uuid().nullable(),
    publishedAt: z.date({
        required_error: "Published date is required"
    })
});

type Props =
    | {
        mode: "create";
        id?: undefined;
    }
    | {
        mode: "edit";
        id: string;
        edition: Edition;
    };

export const EditionEditor: React.FC<Props> = (props) => {
    const router = useRouter();
    const t = useTranslations("dashboard");

    const createMutation = api.edition.create.useMutation({
        onSuccess(edition) {
            router.replace(Routes.DASHBOARD.EDITION_EDIT(edition.id));
        }
    });

    const updateMutation = api.edition.update.useMutation();

    const handleSubmit = useCallback(async (data: z.infer<typeof EditionEditorSchema>) => {
        switch(props.mode) {
            case "create": {
                await createMutation.mutateAsync({
                    edition: data
                });
                break;
            }

            case "edit": {
                await updateMutation.mutateAsync({
                    id: props.id,
                    edition: data
                });
                break;
            }
        }
    }, [createMutation, updateMutation, props.mode, props.id]);

    return (
        <Form
          className="contents"
          resolver={zodResolver(EditionEditorSchema)}
          values={props.mode === "edit" ? props.edition : undefined}
          onSubmit={handleSubmit}>
            <EditorLayout>
                <EditorLayoutContent>
                    <div className="space-y-4">
                        <InputControl
                          label={t("edition.fields.feature.label")}
                          placeholder={t("edition.fields.feature.placeholder")}
                          name="feature" />

                        <TextareaControl
                          label={t("edition.fields.updates.label")}
                          placeholder={t("edition.fields.updates.placeholder")}
                          name="updates" />

                        <TextareaControl
                          label={t("edition.fields.topFlop.label")}
                          placeholder={t("edition.fields.topFlop.placeholder")}
                          name="topFlop" />

                        <TextareaControl
                          label={t("edition.fields.og.label")}
                          placeholder={t("edition.fields.og.placeholder")}
                          name="og" />

                        <div className="flex justify-end pt-5">
                            <div className="flex gap-2">
                                {props.mode === "edit" && (
                                    <FormReset asChild>
                                        <Link href=".">{t("general.actions.cancel")}</Link>
                                    </FormReset>
                                )}

                                <FormSubmit>
                                    {props.mode === "create" ? t("edition.actions.create") : t("edition.actions.update")}
                                </FormSubmit>
                            </div>
                        </div>
                    </div>
                </EditorLayoutContent>

                <EditorLayoutSidebar>
                    <Card className="shadow-none">
                        <CardContent className="space-y-4">
                            <InputControl
                              type="number"
                              label={t("edition.fields.issueNumber.label")}
                              placeholder={t("edition.fields.issueNumber.placeholder")}
                              name="issueNumber" />

                            <DateControl
                              label={t("edition.fields.publishedAt.label")}
                              placeholder={t("edition.fields.publishedAt.placeholder")}
                              name="publishedAt" />

                            <MediaControl
                              autosubmit
                              scope={MediaScope.EDITION}
                              mimeType={["image/*"]}
                              acceptedFileTypes={["image/*"]}
                              label={t("edition.fields.previewId.label")}
                              name="previewId" />

                            <MediaControl
                              autosubmit
                              scope={MediaScope.EDITION}
                              mimeType={["application/pdf"]}
                              acceptedFileTypes={["application/pdf"]}
                              label={t("edition.fields.mediaId.label")}
                              name="mediaId" />
                          </CardContent>
                    </Card>
                </EditorLayoutSidebar>
            </EditorLayout>
        </Form>
    );
};