// DBType.ts

export interface DBService {
  addOrUpdateJob: (job: Job, user?: User) => Promise<void>;
  getJobs: (user?: User) => Promise<Jobs>;
  removeJob: (job: Job, user?: User) => Promise<void>;
}

//DBService.ts

  async getJobs(user?: User): Promise<Jobs> {
    const dbRef = ref(this.db);
    const query = user ? `users/${user?.id}/` : '';
    return get(child(dbRef, `${query}jobs`))
      .then((snapshot) => {
        if (snapshot.exists()) {
          return snapshot.val();
        } else {
          return {};
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }

  async addOrUpdateJob(job: Job, user?: User) {
    const query = user ? `users/${user?.id}/` : '';
    return set(ref(this.db, `${query}jobs/${job.id}`), job);
  }

  async removeJob(job: Job, user?: User) {
    const query = user ? `users/${user?.id}/` : '';
    return remove(ref(this.db, `${query}jobs/${job.id}`));
  }
}

//useJobs.tsx

const JOBS_KEY = "jobs"

export const useJobs = (user?: User) => {
  const dbService = useDBService()
  const queryClient = useQueryClient()
  const { query } = useRouter()
  const { id } = query
  const jobId = typeof id === "string" ? id : id?.join() || ""

  const getJobs = useQuery([JOBS_KEY, user], async () => {
    return dbService.getJobs(user)
  })
  const addOrUpdateJob = useMutation(
    async (job: Job) => {
      return dbService.addOrUpdateJob(job, user)
    },
    {
      onSuccess: () => {
        !user && queryClient.invalidateQueries([JOBS_KEY])
        user && queryClient.invalidateQueries([JOBS_KEY, user])
      },
    }
  )

  const deleteJob = useMutation(
    async (job: Job) => {
      return dbService.removeJob(job, user)
    },
    {
      onSuccess: () => {
        !user && queryClient.invalidateQueries([JOBS_KEY])
        user && queryClient.invalidateQueries([JOBS_KEY, user])
      },
      onError: error => {
        if (error instanceof AxiosError) {
          const { response } = error
          if (response) {
            console.log(response)
          }
        }
      },
    }
  )

  const getFilteredJobs = useQuery(
    [JOBS_KEY, user],
    () => dbService.getJobs(user),
    {
      select: (data: Jobs) => {
        return Object.values(data).filter(item => item.id !== id)
      },
      onError: error => {
        console.error(error)
      },
    }
  )

  const getJobById = useQuery([JOBS_KEY, user], () => dbService.getJobs(user), {
    select: (data: Jobs) => {
      return data[jobId]
    },
    onError: error => {
      console.error(error)
    },
  })

  return { getJobs, addOrUpdateJob, deleteJob, getJobById, getFilteredJobs }
}

// JobSection.tsx
export default function JobSection({
  session,
}: {
  session: Session | undefined;
}) {
  const { pathname } = useRouter();
  const isAdmin = pathname === '/admin';
  const title = getTitle(pathname);
  return (
    <Wrapper>
      <header>
        <Title>{title}</Title>
        {isAdmin && (
          <Btn href={'/admin/new'}>
            <AiOutlinePlusCircle />
          </Btn>
        )}
      </header>
      {/* <Filters /> */}
      <JobList session={session} />
    </Wrapper>
  );
}

// JobList.tsx

export default function JobList({ session }: { session: Session | undefined }) {
  const { pathname } = useRouter();
  const isUser = pathname === '/user' || pathname === '/user/[id]';
  const user = session?.user;
  const { getFilteredJobs } = useJobs(isUser ? user : undefined);
  const { isLoading, data: jobs } = getFilteredJobs;
    ...
  return (
    <Wrapper>
      {jobs && jobs.map((job) => <JobItem key={job.id} job={job} />)}
    </Wrapper>
  );
}

export default function JobItem({ job }: { job: Job }) {
  const { name, platform, img, checkPercentage } = job
  const { pathname, push } = useRouter()
  const isHome = pathname === "/"
  const [message, setMessage] = useState("")
  const { data: session } = useSession()
  const user = session?.user
  const isLoggedin = !!session
  const { addOrUpdateJob, deleteJob } = useJobs(user)
  const handleDelete = () => {
    deleteJob.mutate(job, {
      onSuccess: () => {
        setMessage("성공적으로 제거했습니다")
      },
      onSettled: () => {
        setTimeout(() => setMessage(""), 4000)
      },
    })
  }
  const handleAdd = () => {
    addOrUpdateJob.mutate(job, {
      onSuccess: () => {
        setMessage("성공적으로 추가했습니다")
      },
      onSettled: () => {
        setTimeout(() => setMessage(""), 4000)
      },
    })
  }

  const handleClick = () => {
    const link = redirectPath(pathname, job.id)
    push(link)
  }
  const over50Percent = checkPercentage >= 0.5

  return (
    <>
      <Wrapper>
        {over50Percent && <Badge>50% 이상</Badge>}
        {!isHome && (
          <Btn onClick={handleDelete}>
            <MdRemove />
          </Btn>
        )}
        {isHome && isLoggedin && (
          <Btn onClick={handleAdd}>
            <AiOutlinePlus />
          </Btn>
        )}
        <ImgBox onClick={handleClick}>
          <Img
            src={img}
            alt="job"
            sizes='(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"'
            fill
            priority
          />
        </ImgBox>
        <MetaBox>
          <h1>{name}</h1>
          <h3>{platform}</h3>
        </MetaBox>
      </Wrapper>
      {message && <Modal message={message} />}
    </>
  )
}

export default function AdminForm({ isNew, initialValue }: AdminFormProps) {
  const { job, onAdd, onChange, onDelete, onUpdateDescription } =
    useForm(initialValue)
  const [message, setMessage] = useState("")

  const DescriptionList: DescriptionListType[] = [
    {
      name: JOB_SCHEMA.MAIN_WORK,
      title: "주요 업무",
      value: job.mainWork,
    },
    {
      name: JOB_SCHEMA.QUALIFICATION,
      title: "자격 요건",
      value: job.qualification,
    },

    {
      name: JOB_SCHEMA.PREFERENTIAL,
      title: "우대 사항",
      value: job.preferential,
    },
  ]

  const title = isNew ? "새로운 공고 추가하기" : "공고 수정하기"
  const BtnText = isNew ? "추가하기" : "수정하기"

  const { addOrUpdateJob } = useJobs()
  const { mutate } = addOrUpdateJob
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const { dataset } = e.currentTarget
    if (dataset.tag !== "form") {
      return
    }
    mutate(job, {
      onSuccess: () => {
        setMessage(
          isNew ? "성공적으로 추가되었습니다" : "성공적으로 수정되었습니다"
        )
      },
      onError: error => {
        if (error instanceof AxiosError) {
          const { response } = error
          if (response) {
            setMessage(`${response.statusText} 에러가 발생했습니다`)
          }
        }
      },
      onSettled: () => {
        setTimeout(() => {
          setMessage("")
        }, 4000)
      },
    })
  }

  return (
    <Wrapper>
      ...
      <form data-tag="form" onSubmit={handleSubmit}>
        <AdminFormItem
          name={JOB_SCHEMA.NAME}
          title="회사 명"
          type="text"
          value={job.name}
          onChange={onChange}
        />
        <AdminFormItem
          name={JOB_SCHEMA.URL}
          title="URL"
          type="text"
          value={job.url}
          onChange={onChange}
        />
        <AdminFormItem
          name={JOB_SCHEMA.IMG}
          title="이미지"
          type="text"
          value={job.img}
          onChange={onChange}
        />
        <Select onChange={onChange} platform={job.platform} />
        {DescriptionList.map(item => (
          <AdminDescriptionList
            name={item.name}
            title={item.title}
            value={item.value}
            onAdd={onAdd}
            onDelete={onDelete}
            onChange={onUpdateDescription}
          />
        ))}
        <Btn>{BtnText}</Btn>
      </form>
      {message && <Modal message={message} />}
    </Wrapper>
  )
}

//useForm.tsx

export const useForm = (initialValue: Job) => {
  const [job, setJob] = useState<Job>(initialValue)
  const onAdd = (name: DescriptionNameType) => {
    setJob(prev => {
      const list = prev[name]
      const newItem: DescriptionType = { text: "", checked: false, id: uuid() }
      return { ...prev, [name]: [...list, newItem] }
    })
  }
  const onDelete = (name: DescriptionNameType, id: string) => {
    setJob(prev => {
      const list = prev[name].filter(item => item.id !== id)
      return { ...prev, [name]: list }
    })
  }
  const onChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.currentTarget
    setJob(prev => ({ ...prev, [name]: value }))
  }

  const onUpdateDescription = (
    name: DescriptionNameType,
    value: string,
    id: string
  ) => {
    setJob(prev => {
      const updated = prev[name].map(item => {
        if (item.id === id) {
          return { ...item, text: value }
        }
        return item
      })
      return { ...prev, [name]: updated }
    })
  }

  return { job, onAdd, onDelete, onChange, onUpdateDescription }
}

// AdminDescriptionList.tsx
export default function AdminDescriptionList({
  name,
  title,
  value,
  onAdd,
  onDelete,
  onChange,
  onNewDescriptionChange,
}: AdminDescriptionListProps) {
  const isString = typeof value === "string"
  return (
    <Wrapper>
      ...
      {isString && (
        <TextArea
          text={value}
          name={name}
          onChange={onNewDescriptionChange}
        ></TextArea>
      )}
      {!isString && (
        <ul>
          {value.map(item => (
            <AdminDescriptionItem
              key={item.id}
              name={name}
              item={item}
              onChange={onChange}
              onDelete={onDelete}
            />
          ))}
        </ul>
      )}
    </Wrapper>
  )
}

// TextArea.tsx
export default function TextArea({ name, text, onChange }: TextAreaType) {
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const { value } = e.currentTarget
    onChange(name, value)
  }
  return <Wrapper required value={text} onChange={handleChange}></Wrapper>
}

// normalizeDescription.ts

type RawDescriptionsType = {
  mainWork: string;
  qualification: string;
  preferential: string;
};

type NormalizedDescriptionsType = {
  mainWork: DescriptionType[];
  qualification: DescriptionType[];
  preferential: DescriptionType[];
  [index: string]: DescriptionType[];
};

export const normalizeDescriptions = (
  descriptions: RawDescriptionsType
): NormalizedDescriptionsType => {
  const result: NormalizedDescriptionsType = {
    mainWork: [],
    qualification: [],
    preferential: [],
  };
  const reg = /[•-]/gi;
  for (const [key, value] of Object.entries(descriptions)) {
    const text = value.replace(reg, '').trim();
    const items = text.split('\n');
    const normalizedItems = items.map((item) => {
      return { id: uuid(), text: item, checked: false };
    });
    result[key] = normalizedItems;
  }
  return result;
};


// AdminForm.tsx

 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { dataset } = e.currentTarget;
    if (dataset.tag !== 'form') {
      return;
    }
    let targetJob = job;

    if (isNew) {
      const normalizedDescriptions = normalizeDescriptions(descriptions);
      targetJob = { ...job, ...normalizedDescriptions };
    }
    mutate(targetJob, {...})
  };