"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { api } from "@/lib/api";
import { useAuth } from "@/lib/auth";
import { useToast } from "@/lib/toast";
import { useI18n } from "@/lib/i18n";

export default function GigPostClient() {
  const { token } = useAuth();
  const router = useRouter();
  const { toast } = useToast();
  const { t } = useI18n();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [budget, setBudget] = useState("");
  const [deadline, setDeadline] = useState("");

  const submit = async () => {
    if (!token) {
      router.push("/login?next=/gigs/post");
      return;
    }
    try {
      await api.createGig(token, { title, description, budget, deadline });
      toast(t.gigs.postOk, "success");
      router.push("/gigs");
    } catch {
      toast(t.gigs.postFail, "error");
    }
  };

  return (
    <div className="community-page">
      <div className="container">
        <nav className="detail-nav"><Link href="/gigs">{t.gigs.back}</Link></nav>
        <div className="section-header reveal">
          <span className="section-tag">{t.gigs.tag}</span>
          <h1>{t.gigs.postTitle}</h1>
        </div>
        <div className="community-compose reveal">
          <input placeholder={t.gigs.postName} value={title} onChange={(e) => setTitle(e.target.value)} />
          <textarea rows={5} placeholder={t.gigs.postDesc} value={description} onChange={(e) => setDescription(e.target.value)} />
          <input placeholder={t.gigs.postBudget} value={budget} onChange={(e) => setBudget(e.target.value)} />
          <input type="date" value={deadline} onChange={(e) => setDeadline(e.target.value)} />
          <button type="button" className="btn btn-primary" onClick={submit}>{t.gigs.postSubmit}</button>
        </div>
      </div>
    </div>
  );
}