// src/components/thread-create-form.tsx
"use client";

// imports..

export type ThreadCreateFormProps = {
  className?: string;
};

export function ThreadCreateForm({ className }: ThreadCreateFormProps) {
  const { isTermsChecked, setTermsChecked } = usePersistenceTermsChecked();
  const [password, setPassword] = useState("");
  const [postKeyword, setPostKeyword] = useState("");

  const [lastResult, action] = useFormState(createThread, {
    initialValue: {
      title: "",
      description: "",
      post: "",
      postKeyword: "",
      password: "",
    } satisfies CreateThreadData,
  });
  const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: createThreadSchema });
    },
    shouldRevalidate: "onInput",
  });

  return (
    <div className={className}>
      <h2 className="text-2xl font-bold mb-4 prose">スレッドを作成する</h2>
      <form {...getFormProps(form)} action={action} className="grid gap-4">
        <Input
          {...getInputProps(fields.title, {
            type: "text",
          })}
          placeholder="スレッドのタイトルを入力してください"
          className={cn({ "border-destructive": fields.title.errors })}
        />
        <FormError>{fields.title.errors}</FormError>
        <Input
          {...getInputProps(fields.description, {
            type: "text",
          })}
          placeholder="スレッドの説明を記述してください（オプション）"
          className={cn({
            "border-destructive": fields.description.errors,
          })}
        />
        <FormError>{fields.description.errors}</FormError>
        <Textarea
          {...getTextareaProps(fields.post)}
          rows={4}
          placeholder="最初のコメントを記述してください"
          className={cn("field-sizing-content", {
            "border-destructive": fields.post.errors,
          })}
        />
        <FormError>{fields.post.errors}</FormError>
        <Input
          {...getInputProps(fields.password, {
            type: "password",
          })}
          placeholder="削除用パスワードを入力してください"
          onChange={(e) => setPassword(e.target.value)}
          className={cn({ "border-destructive": fields.password.errors })}
        />
        {password && (
          <p className="px-2 text-xs text-muted-foreground">{password}</p>
        )}
        <FormError>{fields.password.errors}</FormError>
        <Input
          {...getInputProps(fields.postKeyword, {
            type: "password",
          })}
          placeholder="投稿用キーワードを入力してください"
          onChange={(e) => setPostKeyword(e.target.value)}
          className={cn({ "border-destructive": fields.postKeyword.errors })}
        />
        {postKeyword && (
          <p className="px-2 text-xs text-muted-foreground">{postKeyword}</p>
        )}
        <FormError>{fields.postKeyword.errors}</FormError>

        <div className="flex justify-center py-2">
          <TermsCheckBox checked={isTermsChecked} onClick={setTermsChecked} />
        </div>
        <FormButton type="submit" disabled={!isTermsChecked}>
          作成する！
        </FormButton>
      </form>
    </div>
  );
}

// src/app/(application)/threads/page.tsx
const limit = 12;

const getThreads = (page: number) =>
  unstable_cache(
    async () => {
      const skip = (page - 1) * limit;
      const result = await prisma.thread.findMany({
        orderBy: { id: "desc" },
        skip,
        take: limit + 1,
      });
      const hasNext = result.length > limit;
      return { threads: result.slice(0, limit), hasNext };
    },
    ["get-threads", `get-threads-${page}`],
    { revalidate: 3600, tags: ["get-threads", `get-threads-${page}`] },
  )();

export default async function ThreadsPage({
  searchParams,
}: {
  searchParams?: { page?: string };
}) {
  const currentPage = Number(searchParams?.page) || 1;

  const { threads, hasNext } = await getThreads(currentPage);
  return (
    <ThreadsPresentation
      threads={threads}
      currentPage={currentPage}
      hasNext={hasNext}
    />
  );
}

// src/app/layout.tsx

// imports..
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

// 省略.. 

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={inter.className}>
        <Header />
        <main className="mx-auto">{children}</main>
        <Footer />
        {/* ここと */}
        <Analytics />
        {/* ここです。 */}
        <SpeedInsights />
      </body>
      <ClientSideSetUp />
    </html>
  );
}