// app/api/auth/[...nextauth]/route.ts

// 認証のエントリーポイント
import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

// NextAuthに設定を渡して処理を作成
const handler = NextAuth(authOptions);

// App RouterではGETとPOSTのメソッドを個別にエクスポートする必要あり
export { handler as GET, handler as POST };

// lib/auth.ts

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";　// NextAuth.jsが使っているトークン（認証情報）の型名
import type { NextAuthOptions } from "next-auth";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export const authOptions: NextAuthOptions = {
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
};

// pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export default NextAuth({
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
});

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

interface Token extends JWT {
  role?: string;
}

export const authOptions = {
  // CredentialsProvider の設定（IDとパスワードでログインさせるための仕組み）
  providers: [
    CredentialsProvider({
      // ログイン画面のフォームの中身
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },

      // 入力されたIDとパスワードが正しいかチェックする関数
      async authorize(credentials) {
        if (
          credentials?.username === process.env.["任意の環境変数名"] &&
          credentials?.password === process.env.["任意の環境変数名"]
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null;
      },
    }),
  ],
  // 独自に作成するページのパス
  pages: {
    signIn: "/auth/signin",
  },
  // セッションの設定
  session: {
    strategy: "jwt" as const,
    maxAge: 100,
  },
  // ログイン後、ユーザー情報（user）やトークン（token）に追加情報（ここでは role）を保持・共有
  callbacks: {
    // useSession() で取り出すとき、session.user にも role を渡す
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
    // ログイン後、トークンに role を保存
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
  },
};

import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

"use client";
import { SessionProvider } from "next-auth/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

import type { Metadata } from "next";
import { Providers } from "@/components/Providers";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";

export default function SignInForm() {
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg("");

    const res = await signIn("credentials", {
      redirect: false,
      username: userId,
      password,
    });

    if (res?.error) {
      setErrorMsg("ログインIDまたはパスワードが間違っています");
    } else if (res?.ok) {
      window.location.href = "/download";
    } else {
      setErrorMsg("不明なエラーが発生しました");
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-cover bg-center" style={{ backgroundImage: "url('/images/white-background.png')" }}>
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow-md w-[500px] mx-auto">
        <h1 className="text-2xl font-bold mb-6 text-center">ログイン</h1>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">ログインID</span>
          <input type="text" value={userId} onChange={(e) => setUserId(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">パスワード</span>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        {errorMsg && <p className="text-red-600 text-center mb-4">{errorMsg}</p>}

        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">ログイン</button>
      </form>
    </div>
  );
}

"use client";

import { signIn } from "next-auth/react";

export default function Login() {
  return (
    <div className="mt-8 text-center">
      <button
        className="text-blue-600 underline"
        onClick={() => signIn(undefined, { callbackUrl: "/auth/signin" })}
      >
        🔒 管理者ログインはこちら
      </button>
    </div>
  );
}

"use client";

import { useState, useRef } from "react";

export default function DragAndDropUploader() {
  // ドラッグ中かどうかの状態
  const [isDragging, setIsDragging] = useState(false);

  // メッセージ表示用（成功・エラー）
  const [message, setMessage] = useState("");

  // input要素の参照（隠してボタンから開く用）
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 選択されたファイル一覧
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);

  // ファイルがドロップされた時の処理
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);
    const files = Array.from(e.dataTransfer.files); // FileList → 配列に変換
    if (files.length === 0) return;
    setSelectedFiles(files);
  };

  // ドラッグ中（枠が赤くなる）
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

  // ドラッグが外れたとき（赤枠を戻す）
  const handleDragLeave = () => setIsDragging(false);

  // ファイル選択時の処理
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;
    setSelectedFiles(files);
  };

  // 一括取消（ファイルクリア）
  const handleClearFiles = () => {
    setSelectedFiles([]);
    setMessage("");
  };

  // ボタンクリック → input をクリックさせる
  const handleButtonClick = () => {
    fileInputRef.current?.click();
  };

  // アップロード処理
  const handleUpload = async () => {
    if (selectedFiles.length === 0) {
      setMessage("❌ ファイルが選択されていません");
      return;
    }

    const formData = new FormData();
    selectedFiles.forEach((file) => formData.append("files", file));

    try {
      // APIにPOST
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });

      if (res.ok) {
        setMessage("✅ アップロード成功しました");
      } else {
        const data = await res.json();
        setMessage("❌ アップロード失敗: " + (data.error || res.statusText));
      }
    } catch {
      setMessage("❌ アップロード中にエラーが発生しました");
    }
  };

  return (
    <div className="m-5 mx-auto w-fit">
      <h2>📥 スキルシートをアップロード</h2>

      {/* ドラッグ＆ドロップ枠 */}
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        className={`w-[620px] h-[320px] border-2 border-dashed rounded p-5 text-center transition-colors duration-300 ${
          isDragging ? "border-red-500" : "border-gray-300"
        } bg-gray-100 flex items-center justify-center`}
      >
        <div>
          <p>{isDragging ? "ここにドロップ" : "ファイルをドラッグ＆ドロップ"}</p>
          <p>または</p>
          <button
            onClick={handleButtonClick}
            className="bg-red-500 text-white px-4 py-2 rounded"
          >
            ファイルを選択
          </button>
        </div>

        {/* ファイル選択用input（非表示） */}
        <input
          type="file"
          multiple
          ref={fileInputRef}
          onChange={handleFileSelect}
          style={{ display: "none" }}
        />
      </div>

      {/* 選択されたファイルの表示 + ✕ボタン */}
      {selectedFiles.length > 0 && (
        <div className="mt-4 text-left">
          <div className="flex items-start justify-between mb-2">
            <p className="font-semibold">選択中のファイル</p>
            <button
              onClick={handleClearFiles}
              className="font-semibold text-sm text-red-600 hover:underline"
            >
              一括取消
            </button>
          </div>
          <ul>
            {selectedFiles.map((file, index) => (
              <li key={index} className="flex items-center justify-between mb-1">
                <span>{file.name}</span>
                <button
                  onClick={() =>
                    setSelectedFiles((prev) =>
                      prev.filter((_, i) => i !== index)
                    )
                  }
                  className="text-red-600 font-bold"
                >
                  ✕
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* アップロードボタン */}
      <div>
        <button
          onClick={handleUpload}
          className="bg-green-700 text-white px-4 py-2 rounded mt-5"
        >
          アップロード
        </button>
        {message && <p className="mt-2">{message}</p>}
      </div>
    </div>
  );
}

import { NextResponse } from "next/server";
import { BlobServiceClient } from "@azure/storage-blob";

// POSTメソッドで呼び出されたときの処理
export async function POST(req: Request) {
  try {
    // フロントから送られてきたファイル付きのデータ（FormData）を受け取る
    const formData = await req.formData();

    // name="files" という名前で送られてきたファイル全部取得
    const files = formData.getAll("files") as File[];

    // ファイルが1つもなかったらエラーを返す
    if (!files.length) {
      return NextResponse.json(
        { error: "ファイルがありません" },
        { status: 400 }
      );
    }

    // Azure Storage に接続するためのクライアントを作成
    const blobService = BlobServiceClient.fromConnectionString(
      process.env.AZURE_STORAGE_CONNECTION_STRING! // .env.local に設定した接続文字列
    );

    // コンテナー（事前に作成済み）に接続
    const container = blobService.getContainerClient(
      process.env.AZURE_CONTAINER_NAME!
    );

    // ファイルごとに繰り返す
    for (const file of files) {
      // タイムスタンプを付けて、ファイル名の重複を防ぐ
      const now = new Date();
      const timestamp = `${now.getFullYear()}${String(
        now.getMonth() + 1
      ).padStart(2, "0")}${String(now.getDate()).padStart(2, "0")}_${String(
        now.getHours()
      ).padStart(2, "0")}${String(now.getMinutes()).padStart(2, "0")}`;

      // 元のファイル名と拡張子を分離
      const originalName = file.name;
      const ext = originalName.includes(".")
        ? "." + originalName.split(".").pop()
        : "";
      const base = originalName.replace(ext, "");

      // 一意なファイル名を作成（例：resume_20250626_1030.pdf）
      const uniqueName = `${base}_${timestamp}${ext}`;

      // Fileオブジェクト → ArrayBuffer に変換
      const arrayBuffer = await file.arrayBuffer();

      // ArrayBuffer → Node.js の Buffer に変換（Azure用）
      const buffer = Buffer.from(arrayBuffer);

      // Azure上の「保存先ファイル（Blob）」を指定
      const blockBlob = container.getBlockBlobClient(uniqueName);

      // ファイルをアップロード（bufferとして保存）
      await blockBlob.uploadData(buffer);
    }

    // 成功レスポンスを返す
    return NextResponse.json({
      message: "すべてのファイルをアップロードしました",
    });
  } catch (error) {
    // エラーが起きた場合はログを出してエラーを返す
    console.error("アップロードエラー:", error);
    return NextResponse.json({ error: "アップロード失敗" }, { status: 500 });
  }
}

// fetch版
fetch("https://api.example.com/users")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// axios版
import axios from "axios";

axios.get("https://api.example.com/users")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// fetch版
fetch("https://api.example.com/users")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// axios版
import axios from "axios";

axios.get("https://api.example.com/users")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// GETリクエスト
axios.get("/api/user")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// POSTリクエスト
axios.post("/api/user", { name: "太郎" })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

import nodemailer from "nodemailer";

// .env.local に記載した SMTP情報を読み込む
const transporter = nodemailer.createTransport({
  // 接続先のSMTPサーバー
  host: process.env.SMTP_HOST,

  // 使用するポート番号
  port: Number(process.env.SMTP_PORT),

  // ポートが465ならSSL通信（secure: true）、それ以外ならSTARTTLS（secure: false）
  secure: Number(process.env.SMTP_PORT) === 465,

  // 認証情報（メールアドレスとアプリパスワードなど）
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

// メールの内容
const mailOptions = {
  from: "your-email@gmail.com",
  to: "receiver@example.com",
  subject: "お問い合わせありがとうございます",
  text: "これは自動返信メールです。",
};

// 送信
async function sendEmail() {
  try {
    await transporter.sendMail(mailOptions);
    console.log("メール送信に成功しました");
  } catch (error) {
    console.error("メール送信に失敗しました:", error);
  }
}

sendEmail(); // 関数を実行

import { NextResponse } from "next/server";
import sgMail from "@sendgrid/mail";

export async function POST(req: Request) {
  const data = await req.json();
  const { name, email, phone, message } = data;

  // 自動送信メールの件名と本文
  const subject = "お問い合わせありがとうございます";
  const mailBody = `${name}様

  このたびはお問い合わせいただき、誠にありがとうございます。
  以下の内容で受付いたしました。
  
  ---------------

  お名前： ${name}
  メール： ${email}
  電話番号： ${phone}
  メッセージ： 
  ${message}

  ---------------

  担当より折り返しご連絡させていただきます。
  今しばらくお待ちください。`;

  try {
    // 自動送信メール
    sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
    await sgMail.send({
      from: process.env.SENDGRID_FROM_EMAIL!,
      to: email,
      subject,
      text: mailBody,
    });

    return NextResponse.json({ message: "メール送信成功" });
  } catch (error) {
    return NextResponse.json(
      { message: "Slack送信に失敗しました" },
      { status: 500 }
    );
  }
}

await fetch(process.env.SLACK_WEBHOOK_URL!, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name,
    email,
    phone,
    message,
  }),
});