"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));

fetch("https://example.com")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("失敗しました", error));

const result = fetch("https://example.com");
console.log(result); // → Promise { <pending> }

function greet() {
  return "こんにちは"; // ただの文字列
}

greet().then((msg) => console.log(msg)); // ❌ エラー！

async function loadData() {
  const res = await fetch("https://example.com");
  const data = await res.json();
  console.log(data);
}

async function getData() {
  const result = await fetch("https://example.com");
  const json = await result.json();
  console.log(json);
}

const result = await fetch("https://example.com");

async function getData() {
  try {
    const res = await fetch("https://example.com");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("エラーが起きました:", err);
  }
}

import React, { useEffect, useState } from "react";

function App() {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const res = await mockFetchUser();
        const data = await res.json();
        someAsyncOperation(data)
          .then(setMsg)
          .catch((e) => setMsg("中のエラー: " + e));
      } catch (e) {
        setMsg("fetchのエラー: " + e);
      }
    })();
  }, []);

  return (
    <div>
      <h1>React 非同期処理テスト</h1>
      <p>{msg}</p>
    </div>
  );
}

const mockFetchUser = () =>
  Promise.resolve({ json: () => Promise.resolve({ name: "太郎さん" }) });

const someAsyncOperation = (d) =>
  d.name
    ? Promise.resolve("こんにちは、" + d.name)
    : Promise.reject("名前がありません");

export default App;

// 省略...
const mockFetchUser = () =>
  Promise.resolve({ json: () => Promise.resolve({ name: "" }) });
// 省略...

// 省略...
const mockFetchUser = () => Promise.reject("ネットワークエラー");
// 省略...

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
});

const schema = z.object({
  password: z.string(),
  confirm: z.string(),
}).superRefine((data, ctx) => {
  if (data.password !== data.confirm) {
    ctx.addIssue({
      path: ["confirm"],
      message: "パスワードが一致しません",
      code: z.ZodIssueCode.custom,
    });
  }
});

const schema = z.object({
  title: z.string(),
  content: z.string(),
}).partial();

const schema = z.object({
  title: z.string().optional(),
  content: z.string().optional(),
});

const base = z.object({ id: z.string() });
const detail = z.object({ name: z.string() });

const schema = base.merge(detail);

const user = z.object({ name: z.string() });
const extended = user.extend({ age: z.number() });

const full = z.object({
  name: z.string(),
  email: z.string(),
  age: z.number(),
});

const nameOnly = full.pick({ name: true });

const full = z.object({
  name: z.string(),
  email: z.string(),
  age: z.number(),
});

const noEmail = full.omit({ email: true });

z.object({
  username: z.string().refine(val => val !== "admin", {
    message: "admin は使えません",
  }),
});

import { useState } from "react";

function ProfileForm() {
  const [name, setName] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [age, setAge] = useState<number | undefined>(undefined);

  return (
    <div>
      <input
        type="text"
        placeholder="名前"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="メールアドレス"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="number"
        placeholder="年齢"
        value={age ?? ""}
        onChange={(e) => setAge(Number(e.target.value))}
      />

      <p>名前: {name}</p>
      <p>メール: {email}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

export default ProfileForm;

import { useForm } from "react-hook-form";

type FormData = {
  name: string;
  email: string;
  age: number | undefined;
};

function ProfileForm() {
  const { register, watch } = useForm<FormData>({
    defaultValues: {
      name: "",
      email: "",
      age: undefined,
    },
  });

  const { name, email, age } = watch();

  return (
    <div>
      <input type="text" placeholder="名前" {...register("name")} />
      <input type="email" placeholder="メールアドレス" {...register("email")} />
      <input type="number" placeholder="年齢" {...register("age", { valueAsNumber: true })} />

      <p>名前: {name}</p>
      <p>メール: {email}</p>
      <p>年齢: {age}</p>
    </div>
  );
}

export default ProfileForm;

import {
  AppBar,             // 画面上部に固定されるヘッダー
  Toolbar,            // ヘッダーの中の横並びレイアウト用
  Typography,         // 見出しや本文などのテキスト表示
  Container,          // 中央寄せ＆余白ありの全体レイアウト枠
  TextField,          // 入力フォーム（名前・メールなど）
  Button,             // 押せるボタン（送信・閉じるなど）
  Grid,               // 要素を縦や横に並べるレイアウト
  Card,               // 情報を囲って見せるパネル（カード）
  CardContent,        // カード内に配置する中身
  Box,                // スタイル調整や余白をつけるための箱
  Paper,              // 白背景＋影のついたパネル
  Dialog,             // ポップアップウィンドウ（モーダル）
  DialogTitle,        // モーダルのタイトル部分
  DialogContent,      // モーダルの本文部分
  DialogActions       // モーダルのボタン部分（閉じるなど）
} from "@mui/material";


import { useState } from "react";

function ContactForm() {
  const [open, setOpen] = useState(false);

  return (
    <>
      {/* AppBar：上部ナビゲーション */}
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">ABC会社 - お問い合わせ</Typography>
        </Toolbar>
      </AppBar>

      {/* Container：中央レイアウト */}
      <Container maxWidth="sm" sx={{ mt: 4 }}>
        {/* Box：フォーム全体の囲み */}
        <Box component={Paper} elevation={3} p={4}>
          <Typography variant="h5" gutterBottom>
            お問い合わせフォーム
          </Typography>

          {/* Grid：縦並びレイアウト */}
          <Grid container spacing={2} direction="column">
            {/* 名前入力 */}
            <Grid item>
              <TextField label="お名前" fullWidth variant="outlined" />
            </Grid>

            {/* メールアドレス入力 */}
            <Grid item>
              <TextField label="メールアドレス" fullWidth variant="outlined" />
            </Grid>

            {/* 件名 */}
            <Grid item>
              <TextField label="件名" fullWidth variant="outlined" />
            </Grid>

            {/* 内容 */}
            <Grid item>
              <TextField
                label="お問い合わせ内容"
                fullWidth
                multiline
                rows={4}
                variant="outlined"
              />
            </Grid>

            {/* 送信ボタン */}
            <Grid item>
              <Button
                variant="contained"
                color="primary"
                fullWidth
                onClick={() => setOpen(true)}
              >
                送信する
              </Button>
            </Grid>
          </Grid>
        </Box>

        {/* Card：会社案内パネル */}
        <Box mt={4}>
          <Card>
            <CardContent>
              <Typography variant="h6">ABC会社について</Typography>
              <Typography variant="body2" color="text.secondary">
                〒100-0001 東京都中央区サンプル1-2-3 営業時間：平日 9:00〜18:00
                電話：03-1234-5678
              </Typography>
            </CardContent>
          </Card>
        </Box>
      </Container>

      {/* Dialog：送信後モーダル */}
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>送信完了</DialogTitle>
        <DialogContent>
          <Typography>
            お問い合わせありがとうございました。ABC会社より折り返しご連絡いたします。
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)} autoFocus>
            閉じる
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export default ContactForm;

/* style.css */
.button {
  background-color: red;
}

import { styled } from '@mui/material/styles';

const CustomButton = styled('button')({
  backgroundColor: 'red',
});

const {
  register,           // 各フォーム要素にバリデーションを適用するための関数
  handleSubmit,       // フォーム送信時の処理をまとめる関数
  formState: { errors } // バリデーションエラーの状態を管理するオブジェクト
} = useForm({
  mode: "onChange"     // 入力が変わるたびにバリデーションを実行する
});

const { 
　register, 
　handleSubmit, 
　formState: { errors }
} = useForm();

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

// 入力項目のバリデーションルール
const schema = z.object({
  name: z.string().min(1, "名前を入力してください"),
  email: z
    .string()
    .min(1, "メールアドレスを入力してください")
    .email("正しいメールアドレス形式で入力してください"),
  tel: z
    .string()
    .min(1, "電話番号を入力してください")
    .regex(/^[0-9\-]+$/, "数字またはハイフンのみで入力してください"),
});

// Zodスキーマからフォームの型を自動生成
type FormData = z.infer<typeof schema>;

export default function ContactForm() {
  // useFormでフォームを初期化
  const {
    register, // 各inputにバリデーションを紐づける
    handleSubmit, // フォーム送信時にバリデーションを実行
    formState: { errors }, // 各項目のバリデーションエラー情報
  } = useForm<FormData>({
    resolver: zodResolver(schema), // Zodで定義したスキーマを使う
    mode: "onChange",              // 入力ごとにバリデーション実行
  });

  // バリデーション成功時の処理
  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="名前" />　// registerの記載でチェック対象とする
      {errors.name && <p>{errors.name.message}</p>}　　// エラーメッセージの表示

      <input {...register("email")} placeholder="メールアドレス" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("tel")} placeholder="電話番号" />
      {errors.tel && <p>{errors.tel.message}</p>}

      <button type="submit">送信</button>
    </form>
  );
}