// /src/App.tsx

import { useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom"
import { useToast } from "@chakra-ui/react";
import Home from "./components/Home"
import Cards from "./components/Cards";
import { CardData } from "./cardData";
import { supabase } from "./supabaseClient";
import Register from "./components/Register";//Registerのインポート追加

function App() {
  const [userid, setUserid] = useState<string>();
  const [cardData, setCardData] = useState<CardData[]>([]);
  const [newCard, setNewCard] = useState<CardData>({//Register用に、個別のstate、newCard定義
    user_id: '',
    name: '',
    description: '',
    github_id: '',
    qiita_id: '',
    x_id: '',
    skill_id: 0,
    skills: '',
  });
  const [loading, setLoading] = useState<boolean>(false);
  const toast = useToast()
  const navigate = useNavigate()

 // /src/App.tsx
 
 //DBへの新規データ登録
  const insertDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }
  //登録ユーザの重複チェック
  const userCheckDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }

 // /src/App.tsx
 
   return (
    <>
      <Routes>
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} />} />
        {/*ルート追加 ここから */}
        <Route path='/card/register' element={<Register loading={loading} newCard={newCard} setNewCard={setNewCard} setUserid={setUserid} insertDb={insertDb} userCheckDb={userCheckDb} />} />
        {/*ルート追加 ここまで */}
      </Routes>
    </>
  )

// /src/App.tsx

import { useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom"
import { useToast } from "@chakra-ui/react";
import Home from "./components/Home"
import Cards from "./components/Cards";
import { CardData } from "./cardData";
import { supabase } from "./supabaseClient";
import Register from "./components/Register";//Registerのインポート追加

function App() {
  const [userid, setUserid] = useState<string>();
  const [cardData, setCardData] = useState<CardData[]>([]);
  const [newCard, setNewCard] = useState<CardData>({//Register用に、個別のstate、newCard定義
    user_id: '',
    name: '',
    description: '',
    github_id: '',
    qiita_id: '',
    x_id: '',
    skill_id: 0,
    skills: '',
  });
  const [loading, setLoading] = useState<boolean>(false);
  const toast = useToast()
  const navigate = useNavigate()

  // Supabaseからデータを取得する関数
  const selectDb = async (): Promise<boolean> => {
    setLoading(true);

    // Step 1: usersテーブルからuser_idを取得
    const { data: userData, error: userError } = await supabase
      .from('users')
      .select('*')
      .eq('user_id', userid);

    if (userError || !userData || userData.length === 0) {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user data:', userError);
      setLoading(false);
      return false;
    }
    console.log('step1', userData)

    // Step 2: user_skillテーブルから該当するskill_idを取得
    const { data: userSkillData, error: userSkillError } = await supabase
      .from('user_skill')
      .select('skill_id')
      .eq('user_id', userid);

    if (userSkillError || !userSkillData || userSkillData.length === 0) {
      toast({
        title: 'Skill IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user skills:', userSkillError);
      setLoading(false);
      return false;
    }
    console.log('step2', userSkillData)
    const skill_ids = userSkillData.map((skill) => skill.skill_id);

    // Step 3: skillsテーブルからnameを取得
    const { data: skillsData, error: skillsError } = await supabase
      .from('skills')
      .select('name')
      .eq('id', skill_ids);

    if (skillsError || !skillsData || skillsData.length === 0) {
      toast({
        title: 'skillsが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching skills:', skillsError);
      setLoading(false);
      return false;
    }

    console.log('step3', skillsData)
    const skillsString = skillsData.map(skill => skill.name);

    // Step4：結果をcombinedDataに集約
    const combinedData = userData.map((user) => ({
      ...user, skill_id: skill_ids, skills: skillsString,
    }));

    console.log('step4', combinedData)
    setCardData(combinedData);
    toast({
      title: 'データを取得しました',
      position: 'top',
      status: 'success',
      duration: 2000,
      isClosable: true,
    })
    setLoading(false);
    return true;  // データ取得に成功した場合はtrueを返す
  };

  //DBへの新規データ登録
  const insertDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }
  //登録ユーザの重複チェック
  const userCheckDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserid(e.target.value)
  }

  const handleSearch = async () => {
    if (userid) {
      const success = await selectDb();
      if (success) {
        navigate(`/card/${userid}`);
      }
    } else {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
    }
  };

  return (
    <>
      <Routes>
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} />} />
        {/*ルート追加 ここから */}
        <Route path='/card/register' element={<Register loading={loading} newCard={newCard} setNewCard={setNewCard} setUserid={setUserid} insertDb={insertDb} userCheckDb={userCheckDb} />} />
        {/*ルート追加 ここまで */}
      </Routes>
    </>
  )
}

export default App

// /src/components/Home.tsx
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Input } from "@chakra-ui/react";
import { useNavigate } from "react-router-dom";//React Router, useNavigateインポート

type HomeProps = {
    userid: string;
    loading: boolean;
    handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleSearch: () => Promise<void>;
}

const Home: React.FC<HomeProps> = ({ userid, loading, handleInputChange, handleSearch }) => {
    const navigate = useNavigate();//useNavigate追加
    return (
        <>
            <Flex alignItems='center' justify='center' p={5}>
                <Card>
                    <CardHeader>
                        <Heading size='md' textAlign='center'>Name Card App</Heading>
                    </CardHeader>
                    <CardBody>
                        ID
                        <Input
                            autoFocus
                            placeholder='IDを入力'
                            name='id'
                            value={userid}
                            onChange={handleInputChange}
                        />
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                onClick={handleSearch}
                                w='100%'
                                loadingText='Loading'
                                isLoading={loading}
                                spinnerPlacement='start'
                            >名刺を表示</Button>

                        </Box>
                        <Box mt={4} >
                            <Button
                                colorScheme='blue'
                                variant='outline'
                                w='100%'
                                onClick={() => navigate('/card/register')}//追加、クリックでRegister画面に遷移
                            >
                                新規登録</Button>
                        </Box>
                    </CardBody>
                </Card>
            </Flex>
        </>
    )
}
export default Home;

// /src/components/Register.tsx
import { useNavigate } from "react-router-dom";//React Router, useNavigateインポート
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Input, Select, Text, Textarea, useToast } from "@chakra-ui/react";//Chakra UIインポート
import { CardData } from "../cardData";//CardData型定義のインポート

type RegisterProps = {//Propsの型定義
    loading: boolean;
    newCard: CardData;
    setNewCard: React.Dispatch<React.SetStateAction<CardData>>
    setUserid: React.Dispatch<React.SetStateAction<string | undefined>>
    insertDb: (card: CardData) => Promise<boolean>
    userCheckDb: (card: CardData) => Promise<boolean>
};

const Register: React.FC<RegisterProps> = ({ loading, newCard, setNewCard, setUserid, insertDb, userCheckDb }) => {
    const toast = useToast()
    const navigate = useNavigate();

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setNewCard({
            ...newCard,
            [name]: value,
        });
    };

    const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setNewCard({
            ...newCard,
            [name]: value,
        });
    };

    const handleRegister = async () => {
        if (newCard.user_id && newCard.name && newCard.description && newCard.skill_id) {
            const isUserIdUnique = await userCheckDb(newCard);
            if (isUserIdUnique) {
                await insertDb(newCard);
                setUserid(newCard.user_id);
                setNewCard({
                    user_id: '',
                    name: '',
                    description: '',
                    github_id: '',
                    qiita_id: '',
                    x_id: '',
                    skill_id: 0,
                    skills: '',
                });
                navigate('/');
            }
        } else {
            toast({
                title: '*の必須項目を入力してください',
                position: 'top',
                status: 'error',
                duration: 2000,
                isClosable: true,
            })
        }
    };

    return (
        <>
            <Flex alignItems='center' justify='center' p={5}>
                <Card maxW='400px'>
                    <CardHeader>
                        <Heading size='md' textAlign='center'>カード登録</Heading>
                    </CardHeader>
                    <CardBody>
                        <Text>ID名*</Text>
                        <Input
                            autoFocus
                            placeholder='ご希望のID名を入力'
                            name='user_id'
                            value={newCard.user_id}
                            onChange={handleInputChange}
                        />
                        <Text mt='3'>お名前*</Text>
                        <Input
                            placeholder='お名前を入力'
                            name='name'
                            value={newCard.name}
                            onChange={handleInputChange}
                        />
                        <Text mt='3'>自己紹介*</Text>
                        <Textarea
                            placeholder='<h1>HTMLタグも入力できます</h1>'
                            name='description'
                            value={newCard.description}
                            onChange={handleTextareaChange}
                        />
                        <Text mt='3'>好きな技術*</Text>
                        <Select
                            placeholder='選択してください'
                            name='skill_id'
                            value={newCard.skill_id.toString()} // 数値を文字列に変換して表示
                            onChange={(e) => setNewCard({ ...newCard, skill_id: Number(e.target.value) })}
                        >
                            <option value='1'>React</option>
                            <option value='2'>TypeScript</option>
                            <option value='3'>GitHub</option>
                        </Select>
                        <Text mt='3'>GitHub ID</Text>
                        <Input
                            name='github_id'
                            value={newCard.github_id}
                            onChange={handleInputChange}
                        />
                        <Text mt='3'>Qiita ID</Text>
                        <Input
                            name='qiita_id'
                            value={newCard.qiita_id}
                            onChange={handleInputChange}
                        />
                        <Text mt='3'>X(Twitter) ID</Text>
                        <Input
                            name='x_id'
                            value={newCard.x_id}
                            onChange={handleInputChange}
                        />
                        <Box mt={4} textAlign='center'>
                            <Button
                                isLoading={loading}
                                loadingText='Loading'
                                colorScheme='blue'
                                spinnerPlacement='start'
                                mr='5'
                                onClick={handleRegister}
                            >登録</Button>
                            <Button
                                colorScheme='gray'
                                variant='outline'
                                onClick={() => {
                                    navigate('/');
                                }
                                }>戻る</Button>
                        </Box>
                    </CardBody>
                </Card>
            </Flex >
        </>
    )
}
export default Register;

// /src/components/Register.tsx
import { useNavigate } from "react-router-dom";//React Router, useNavigateインポート
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Input, Select, Text, Textarea, useToast } from "@chakra-ui/react";//Chakra UIインポート
import { CardData } from "../cardData";//CardData型定義のインポート

type RegisterProps = {//Propsの型定義
    loading: boolean;
    newCard: CardData;
    setNewCard: React.Dispatch<React.SetStateAction<CardData>>
    setUserid: React.Dispatch<React.SetStateAction<string | undefined>>
    insertDb: (card: CardData) => Promise<boolean>
    userCheckDb: (card: CardData) => Promise<boolean>
};

const Register: React.FC<RegisterProps> = ({ loading, newCard, setNewCard, setUserid, insertDb, userCheckDb }) => {
    const toast = useToast()
    const navigate = useNavigate();

// /src/components/Register.tsx

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    //inputフィールドにデータが入力されたら、 setNewCardで値名:値でデータ格納
    const { name, value } = e.target;
    setNewCard({
        ...newCard,
        [name]: value,
    });
};

const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    //textareaフィールドにデータが入力されたら、 setNewCardで値名:値でデータ格納
    const { name, value } = e.target;
    setNewCard({
        ...newCard,
        [name]: value,
    });
};

const handleRegister = async () => {//async/awaitによる非同期処理
    if (newCard.user_id && newCard.name && newCard.description && newCard.skill_id) {//必須入力項目が空でなければ
        const isUserIdUnique = await userCheckDb(newCard);//ユーザID重複チェックを実行
        if (isUserIdUnique) {//ユーザIDが重複していなければ
            await insertDb(newCard);//データ新規登録を実行
            setUserid(newCard.user_id);//useridを入力されたuser_idでセット、/に遷移した際に、IDフィールドに予めID情報をセットする為
            setNewCard({//newCardは初期化実施
                user_id: '',
                name: '',
                description: '',
                github_id: '',
                qiita_id: '',
                x_id: '',
                skill_id: 0,
                skills: '',
            });
            navigate('/');// '/'に遷移
        }
    } else {
        toast({
            title: '*の必須項目を入力してください',
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
    }
};

// /src/components/Register.tsx

return (
    <>
        <Flex alignItems='center' justify='center' p={5}>
            <Card maxW='400px'>
                <CardHeader>
                    <Heading size='md' textAlign='center'>カード登録</Heading>
                </CardHeader>
                <CardBody>
                    <Text>ID名*</Text>
                    <Input
                        autoFocus
                        placeholder='ご希望のID名を入力'
                        name='user_id'
                        value={newCard.user_id}
                        onChange={handleInputChange} //データ入力時、handleInputChange実行
                    />
                    <Text mt='3'>お名前*</Text>
                    <Input
                        placeholder='お名前を入力'
                        name='name'
                        value={newCard.name}
                        onChange={handleInputChange} //データ入力時、handleInputChange実行
                    />
                    <Text mt='3'>自己紹介*</Text>
                    <Textarea
                        placeholder='<h1>HTMLタグも入力できます</h1>'
                        name='description'
                        value={newCard.description}
                        onChange={handleTextareaChange} //データ入力時、handleTextareaChange実行
                    />
                    <Text mt='3'>好きな技術*</Text>
                    <Select
                        placeholder='選択してください'
                        name='skill_id'
                        value={newCard.skill_id.toString()} // 数値を文字列に変換して表示
                        onChange={(e) => setNewCard({ ...newCard, skill_id: Number(e.target.value) })} //データ入力時、文字列を数値に変換の上、setNewCard実行
                    >
                        <option value='1'>React</option>
                        <option value='2'>TypeScript</option>
                        <option value='3'>GitHub</option>
                    </Select>
                    <Text mt='3'>GitHub ID</Text>
                    <Input
                        name='github_id'
                        value={newCard.github_id}
                        onChange={handleInputChange} //データ入力時、handleInputChange実行
                    />
                    <Text mt='3'>Qiita ID</Text>
                    <Input
                        name='qiita_id'
                        value={newCard.qiita_id}
                        onChange={handleInputChange} //データ入力時、handleInputChange実行
                    />
                    <Text mt='3'>X(Twitter) ID</Text>
                    <Input
                        name='x_id'
                        value={newCard.x_id}
                        onChange={handleInputChange} //データ入力時、handleInputChange実行
                    />
                    <Box mt={4} textAlign='center'>
                        <Button
                            isLoading={loading}
                            loadingText='Loading'
                            colorScheme='blue'
                            spinnerPlacement='start'
                            mr='5'
                            onClick={handleRegister} //クリック時、handleRegister実行
                        >登録</Button>
                        <Button
                            colorScheme='gray'
                            variant='outline'
                            onClick={() => {
                                navigate('/');
                            }
                            }>戻る</Button>
                    </Box>
                </CardBody>
            </Card>
        </Flex >
    </>
)

// /src/App.tsx

//DBへの新規データ登録
// Step 1: usersへの登録
const insertDb = async (card: CardData): Promise<boolean> => { //async/awaitによる非同期処理
    setLoading(true);//ローディングをローディング中に設置
    const { data: userData, error: userError } = await supabase //Supabaseのinsert（データ挿入）処理を実行
        .from('users')//usersテーブルに対して
        .insert([//下記項目を挿入
            {
                user_id: card.user_id,
                name: card.name,
                description: card.description,
                github_id: card.github_id,
                qiita_id: card.qiita_id,
                x_id: card.x_id,
            },
        ])
        .select();
    if (userError || !userData) {//エラーが発生もしくは、userDataが空の場合
        console.error('Error insert data:', userError);
        toast({ //Chakra UIのトーストにてエラーメッセージ表示
            title: 'ユーザ登録が失敗しました',
            description: `${userError}`,
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        setLoading(false);//ローティング状態を解除
        return false;//falseをリターン
    }
    console.log('insertDb step1', userData, userError)//登録したuserDataをコンソール出力

    // Step 2: user_skillテーブルへの登録
    const { data: userSkillData, error: userSkillError } = await supabase //Supabaseのinsert（データ挿入）処理を実行
        .from('user_skill')//user_skillテーブルに対して
        .insert([//下記項目を挿入
            {
                user_id: card.user_id,
                skill_id: card.skill_id,
            },
        ])
        .select();
    if (userSkillError || !userSkillData) {//エラーが発生もしくは、userSkillDataが空の場合
        console.error('Error insert data:', userSkillError);
        toast({ //Chakra UIのトーストにてエラーメッセージ表示
            title: 'ユーザ登録が失敗しました',
            description: `${userSkillError}`,
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        setLoading(false);//ローティング状態を解除
        return false;//falseをリターン
    }
    setLoading(false);//正常処理がされればローティング状態を解除
    toast({//Chakra UIのトーストにて成功メッセージ表示
        title: 'ユーザ登録に成功しました',
        position: 'top',
        status: 'success',
        duration: 2000,
        isClosable: true,
    })
    console.log('iinsertDb step2', userSkillData);//登録したuserSkillDataをコンソール出力
    return true;//trueをリターン
}

// /src/App.tsx

//登録ユーザの重複チェック
const userCheckDb = async (card: CardData): Promise<boolean> => {//async/awaitによる非同期処理
    setLoading(true);//ローディングをローディング中にセット
    const { data: userData, error: userError } = await supabase //Supabaseのselect（データ検索）処理を実行
        .from('users')//usersテーブルに対して
        .select('*')
        .eq('user_id', card.user_id);//user_idがcard.user_idのデータを抽出

    if (userData && userData.length > 0) {//取得データがある、もしくは、空ではない場合
        toast({//重複ユーザIDありとして、Chakra UIのトーストにてエラーメッセージ表示
            title: '既にIDが使われています',
            position: 'top',
            status: 'error',
            duration: 2000,
            isClosable: true,
        })
        console.error('既にIDが使われています:', userError, userData);
        setLoading(false);//ローティング状態を解除
        return false;//falseをリターン
    }

    setLoading(false);//正常処理した場合ローティング状態を解除
    return true;//trueをリターン
}

  // /src/App.tsx
  
  //登録ユーザの重複チェック
  const userCheckDb = async (card: CardData): Promise<boolean> => {
   .
   .
   .
  }
  
  //DBの更新処理追加
  const updateDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }

// /src/App.tsx

return (
    <>
      <Routes>
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} loading={loading} setLoading={setLoading} updateDb={updateDb} selectDb={selectDb} />
        //Cardsに渡すProps追加、loading={loading} setLoading={setLoading} updateDb={updateDb} selectDb={selectDb}
        } />
        <Route path='/card/register' element={<Register loading={loading} newCard={newCard} setNewCard={setNewCard} setUserid={setUserid} insertDb={insertDb} userCheckDb={userCheckDb} />} />
      </Routes>
    </>
  )

// /src/App.tsx

import { useState } from "react";
import { Route, Routes, useNavigate } from "react-router-dom"
import { useToast } from "@chakra-ui/react";
import Home from "./components/Home"
import Cards from "./components/Cards";
import { CardData } from "./cardData";
import { supabase } from "./supabaseClient";
import Register from "./components/Register";

function App() {
  const [userid, setUserid] = useState<string>();
  const [cardData, setCardData] = useState<CardData[]>([]);
  const [newCard, setNewCard] = useState<CardData>({
    user_id: '',
    name: '',
    description: '',
    github_id: '',
    qiita_id: '',
    x_id: '',
    skill_id: 0,
    skills: '',
  });
  const [loading, setLoading] = useState<boolean>(false);
  const toast = useToast()
  const navigate = useNavigate()

  // Supabaseからデータを取得する関数
  const selectDb = async (): Promise<boolean> => {
    setLoading(true);

    // Step 1: usersテーブルからuser_idを取得
    const { data: userData, error: userError } = await supabase
      .from('users')
      .select('*')
      .eq('user_id', userid);

    if (userError || !userData || userData.length === 0) {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user data:', userError);
      setLoading(false);
      return false;
    }
    console.log('step1', userData)

    // Step 2: user_skillテーブルから該当するskill_idを取得
    const { data: userSkillData, error: userSkillError } = await supabase
      .from('user_skill')
      .select('skill_id')
      .eq('user_id', userid);

    if (userSkillError || !userSkillData || userSkillData.length === 0) {
      toast({
        title: 'Skill IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching user skills:', userSkillError);
      setLoading(false);
      return false;
    }
    console.log('step2', userSkillData)
    const skill_ids = userSkillData.map((skill) => skill.skill_id);

    // Step 3: skillsテーブルからnameを取得
    const { data: skillsData, error: skillsError } = await supabase
      .from('skills')
      .select('name')
      .eq('id', skill_ids);

    if (skillsError || !skillsData || skillsData.length === 0) {
      toast({
        title: 'skillsが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('Error fetching skills:', skillsError);
      setLoading(false);
      return false;
    }

    console.log('step3', skillsData)
    const skillsString = skillsData.map(skill => skill.name);

    // Step4：結果をcombinedDataに集約
    const combinedData = userData.map((user) => ({
      ...user, skill_id: skill_ids, skills: skillsString,
    }));

    console.log('step4', combinedData)
    setCardData(combinedData);
    toast({
      title: 'データを取得しました',
      position: 'top',
      status: 'success',
      duration: 2000,
      isClosable: true,
    })
    setLoading(false);
    return true;  // データ取得に成功した場合はtrueを返す
  };

  //DBへの新規データ登録
  // Step 1: usersへの登録
  const insertDb = async (card: CardData): Promise<boolean> => {
    setLoading(true);
    const { data: userData, error: userError } = await supabase
      .from('users')
      .insert([
        {
          user_id: card.user_id,
          name: card.name,
          description: card.description,
          github_id: card.github_id,
          qiita_id: card.qiita_id,
          x_id: card.x_id,
        },
      ])
      .select();
    if (userError || !userData) {
      console.error('Error insert data:', userError);
      toast({
        title: 'ユーザ登録が失敗しました',
        description: `${userError}`,
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      setLoading(false);
      return false;
    }
    console.log('insertDb step1', userData, userError)
    // Step 2: user_skillテーブルへの登録
    const { data: userSkillData, error: userSkillError } = await supabase
      .from('user_skill')
      .insert([
        {
          user_id: card.user_id,
          skill_id: card.skill_id,
        },
      ])
      .select();
    if (userSkillError || !userSkillData) {
      console.error('Error insert data:', userSkillError);
      toast({
        title: 'ユーザ登録が失敗しました',
        description: `${userSkillError}`,
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      setLoading(false);
      return false;
    }
    setLoading(false);
    toast({
      title: 'ユーザ登録に成功しました',
      position: 'top',
      status: 'success',
      duration: 2000,
      isClosable: true,
    })
    console.log('iinsertDb step2', userSkillData);
    return true;
  }

  //登録ユーザの重複チェック
  const userCheckDb = async (card: CardData): Promise<boolean> => {
    setLoading(true);
    const { data: userData, error: userError } = await supabase
      .from('users')
      .select('*')
      .eq('user_id', card.user_id);

    if (userData && userData.length > 0) {
      toast({
        title: '既にIDが使われています',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
      console.error('既にIDが使われています:', userError, userData);
      setLoading(false);
      return false;
    }

    setLoading(false);
    return true;
  }

  //DBの更新処理
  const updateDb = async (card: CardData): Promise<boolean> => {//仮設置
    return true;
  }

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserid(e.target.value)
  }

  const handleSearch = async () => {
    if (userid) {
      const success = await selectDb();
      if (success) {
        navigate(`/card/${userid}`);
      }
    } else {
      toast({
        title: 'IDが見つかりません',
        position: 'top',
        status: 'error',
        duration: 2000,
        isClosable: true,
      })
    }
  };

  return (
    <>
      <Routes>
        <Route path="/" element={<Home userid={userid || ''} loading={loading} handleInputChange={handleInputChange} handleSearch={handleSearch} />} />
        <Route path='/card/:userid' element={<Cards cardData={cardData} setCardData={setCardData} loading={loading} setLoading={setLoading} updateDb={updateDb} selectDb={selectDb} />//Cardsに渡すProps追加
        } />
        <Route path='/card/register' element={<Register loading={loading} newCard={newCard} setNewCard={setNewCard} setUserid={setUserid} insertDb={insertDb} userCheckDb={userCheckDb} />} />
      </Routes>
    </>
  )
}

export default App

// /src/components/Cards.tsx
import { Link, useNavigate } from "react-router-dom";
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Icon, Text } from "@chakra-ui/react";
import { CardData } from "../cardData";
import { FaGithub } from "react-icons/fa";
import { SiQiita } from "react-icons/si";
import { FaXTwitter } from "react-icons/fa6";
import Edit from "./Edit";//Editコンポーネントのインポート

type CardsProps = {
    cardData: CardData[];
    setCardData: React.Dispatch<React.SetStateAction<CardData[]>>
    loading: boolean;//Editに渡すため追加
    setLoading: React.Dispatch<React.SetStateAction<boolean>>;//Editに渡すため追加
    updateDb: (card: CardData) => Promise<boolean>;//Editに渡すため追加
    selectDb: (user_id: string) => Promise<boolean>;//Editに渡すため追加
}

const Cards: React.FC<CardsProps> = ({ cardData, setCardData, loading, setLoading, updateDb, selectDb }) => { //loading, setLoading, updateDb, selectDb追加
    const navigate = useNavigate();

    return (
        <Flex alignItems='center' justify='center' p={5}>
            <Card maxW='400px'>
                <CardHeader>
                    <Heading size='md' textAlign='center'>Name Card App</Heading>
                </CardHeader>
                <CardBody>
                    {cardData.map((card, index) => (
                        <div key={index}>
                            <Box borderWidth='1px' borderRadius='lg' p={5}>
                                <Heading size='sm' textTransform='uppercase'>
                                    ID
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.user_id}</Text>
                                <Heading size='sm' textTransform='uppercase'>
                                    名前
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.name}</Text>
                                <Heading size='sm' textTransform='uppercase'>
                                    自己紹介
                                </Heading>
                                <Text pb='2'
                                    dangerouslySetInnerHTML={{ __html: card.description }}
                                />
                                <Heading size='sm' textTransform='uppercase'>
                                    好きな技術
                                </Heading>
                                <Text pb='2' fontSize='sm'>{card.skills}</Text>
                                <Flex wrap='nowrap' justifyContent='center' width='100%' >
                                    <Link to={`https://github.com/${card.github_id}`} target='_blank'>
                                        <Icon
                                            as={FaGithub}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                    <Link to={`https://qiita.com/${card.qiita_id}`} target='_blank'>
                                        <Icon
                                            as={SiQiita}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                    <Link to={`https://x.com/${card.x_id}`} target='_blank'>
                                        <Icon
                                            as={FaXTwitter}
                                            fontSize="24px"
                                            margin={1}
                                            _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                        />
                                    </Link>
                                </Flex>
                            </Box>
                        </div>
                    ))}
                    <Box mt={4} textAlign='center'>
                        {/*削除ここから
                        <Button
                            colorScheme='blue'
                            mr='3'
                        >編集
                        </Button>
                        削除ここまで*/}

                        {/*追加ここから*/}
                        <Edit loading={loading} setLoading={setLoading} cardData={cardData} setCardData={setCardData} updateDb={updateDb} selectDb={selectDb} />
                        {/*追加ここまで*/}

                        <Button
                            colorScheme='orange'
                            variant='outline'
                            mr='3'>
                            削除</Button>
                        {/*
                        <Delete error={error} setError={setError} loading={loading} setLoading={setLoading} cardData={cardData} setCardData={setCardData} deleteDb={deleteDb}/>
                        */}
                        <Button
                            colorScheme='gray'
                            variant='outline'
                            onClick={() => {
                                setCardData([]);
                                navigate('/');
                            }
                            }>戻る</Button>
                    </Box>
                </CardBody>
            </Card>
        </Flex>
    )
}

export default Cards;

// /src/components/Cards.tsx

import { Link, useNavigate } from "react-router-dom";
import { Box, Button, Card, CardBody, CardHeader, Flex, Heading, Icon, Text } from "@chakra-ui/react";
import { CardData } from "../cardData";
import { FaGithub } from "react-icons/fa";
import { SiQiita } from "react-icons/si";
import { FaXTwitter } from "react-icons/fa6";
import Edit from "./Edit";//Editコンポーネントのインポート

type CardsProps = {
    cardData: CardData[];
    setCardData: React.Dispatch<React.SetStateAction<CardData[]>>
    loading: boolean;//Editに渡すため追加
    setLoading: React.Dispatch<React.SetStateAction<boolean>>;//Editに渡すため追加
    updateDb: (card: CardData) => Promise<boolean>;//Editに渡すため追加
    selectDb: (user_id: string) => Promise<boolean>;//Editに渡すため追加
}

const Cards: React.FC<CardsProps> = ({ cardData, setCardData, loading, setLoading, updateDb, selectDb }) => { //loading, setLoading, updateDb, selectDb追加
    const navigate = useNavigate();

// /src/components/Cards.tsx

return (
    <Flex alignItems='center' justify='center' p={5}>
        <Card maxW='400px'>
            <CardHeader>
                <Heading size='md' textAlign='center'>Name Card App</Heading>
            </CardHeader>
            <CardBody>
                {cardData.map((card, index) => (
                    <div key={index}>
                        <Box borderWidth='1px' borderRadius='lg' p={5}>
                            <Heading size='sm' textTransform='uppercase'>
                                ID
                            </Heading>
                            <Text pb='2' fontSize='sm'>{card.user_id}</Text>
                            <Heading size='sm' textTransform='uppercase'>
                                名前
                            </Heading>
                            <Text pb='2' fontSize='sm'>{card.name}</Text>
                            <Heading size='sm' textTransform='uppercase'>
                                自己紹介
                            </Heading>
                            <Text pb='2'
                                dangerouslySetInnerHTML={{ __html: card.description }}
                            />
                            <Heading size='sm' textTransform='uppercase'>
                                好きな技術
                            </Heading>
                            <Text pb='2' fontSize='sm'>{card.skills}</Text>
                            <Flex wrap='nowrap' justifyContent='center' width='100%' >
                                <Link to={`https://github.com/${card.github_id}`} target='_blank'>
                                    <Icon
                                        as={FaGithub}
                                        fontSize="24px"
                                        margin={1}
                                        _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                    />
                                </Link>
                                <Link to={`https://qiita.com/${card.qiita_id}`} target='_blank'>
                                    <Icon
                                        as={SiQiita}
                                        fontSize="24px"
                                        margin={1}
                                        _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                    />
                                </Link>
                                <Link to={`https://x.com/${card.x_id}`} target='_blank'>
                                    <Icon
                                        as={FaXTwitter}
                                        fontSize="24px"
                                        margin={1}
                                        _hover={{ transform: 'scale(1.2)', transition: 'transform 0.3s' }}
                                    />
                                </Link>
                            </Flex>
                        </Box>
                    </div>
                ))}
                <Box mt={4} textAlign='center'>
                    {/*削除ここから、これまでの「編集」ボタンはEditコンポーネントと入れ替える為、削除
                    <Button
                        colorScheme='blue'
                        mr='3'
                    >編集
                    </Button>
                    削除ここまで*/}

                    {/*追加ここから、Editコンポーネントのセット*/}
                    <Edit loading={loading} setLoading={setLoading} cardData={cardData} setCardData={setCardData} updateDb={updateDb} selectDb={selectDb} />
                    {/*追加ここまで*/}

                    <Button
                        colorScheme='orange'
                        variant='outline'
                        mr='3'>
                        削除</Button>
                    <Button
                        colorScheme='gray'
                        variant='outline'
                        onClick={() => {
                            setCardData([]);
                            navigate('/');
                        }
                        }>戻る</Button>
                </Box>
            </CardBody>
        </Card>
    </Flex>
)