web-campaignpool/components/form/approver-detail.tsx

"use client";

import { useState } from "react";
import {
  Paperclip,
  Send,
  Smile,
  Mic,
  CheckCircle2,
  Upload,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export default function ApproverDetail() {
  const [activeTab, setActiveTab] = useState<"detail" | "buatKonten">("detail");
  const [step, setStep] = useState<"configuration" | "publish">(
    "configuration",
  );

  return (
    <div className="max-w-full mx-auto bg-white rounded-lg shadow-sm p-6 space-y-6">
      {/* Header Tabs */}
      <div className="flex gap-2 border-b pb-3">
        <button
          onClick={() => {
            setActiveTab("detail");
            setStep("configuration");
          }}
          className={cn(
            "px-4 py-2 text-sm font-medium rounded-md transition",
            activeTab === "detail"
              ? "bg-black text-white font-semibold"
              : "text-gray-600 hover:text-black",
          )}
        >
          Detail Konten
        </button>
        <button
          onClick={() => setActiveTab("buatKonten")}
          className={cn(
            "px-4 py-2 text-sm font-medium rounded-md transition",
            activeTab === "buatKonten"
              ? "bg-black text-white font-semibold"
              : "text-gray-600 hover:text-black",
          )}
        >
          Buat Konten
        </button>
      </div>

      {/* DETAIL KONTEN */}
      {activeTab === "detail" ? (
        <>
          <div>
            <h2 className="text-sm text-gray-600 mb-1">Status</h2>
            <span className="bg-gray-200 text-gray-700 px-3 py-1 rounded-full text-xs font-medium">
              Tertunda
            </span>
          </div>

          <div>
            <h2 className="text-sm text-gray-600 mb-1">Judul Campaign</h2>
            <p className="text-sm font-medium text-gray-800">
              Lorem ipsum dolor sit amet consectetur. In faucibus diam eu ut
              quisque.
            </p>
          </div>

          <div>
            <h2 className="text-sm text-gray-600 mb-1">Durasi</h2>
            <p className="text-sm font-medium text-gray-800">
              22/08/2025 - 22/08/2026
            </p>
          </div>

          <div>
            <h2 className="text-sm text-gray-600 mb-1">Media</h2>
            <p className="font-semibold text-sm text-gray-900 mb-1">
              Media Online
            </p>
            <ul className="text-sm text-gray-700 list-disc ml-4 space-y-1">
              <li>Tribrata News Mabes</li>
              <li>Tribrata News Polda Aceh</li>
              <li>Tribrata News Polda Jawa Timur</li>
              <li>Tribrata News Polda Jawa Tengah</li>
              <li>Tribrata News Polda Jawa Barat</li>
            </ul>
          </div>

          <div>
            <h2 className="text-sm text-gray-600 mb-1">Tujuan</h2>
            <p className="text-sm font-semibold text-gray-800">Sosialisasi</p>
          </div>

          <div>
            <h2 className="text-sm text-gray-600 mb-1">Materi Promote</h2>
            <div className="flex items-center justify-between border rounded-lg px-3 py-2 bg-gray-50">
              <div>
                <p className="text-sm font-medium text-gray-800">
                  Report name_T1.pdf
                </p>
                <p className="text-xs text-gray-500">23.5MB</p>
              </div>
              <Paperclip className="w-4 h-4 text-gray-500" />
            </div>
          </div>

          <div className="pt-2 border-t">
            <h2 className="text-sm text-gray-600 mb-2">Komentar</h2>

            <div className="flex items-start gap-3">
              <img
                src="https://ui-avatars.com/api/?name=Kurator+POLRI&background=16a34a&color=fff"
                alt="Kurator POLRI"
                className="w-10 h-10 rounded-full"
              />
              <div className="flex-1 border rounded-lg px-3 py-2 bg-gray-50">
                <textarea
                  placeholder="Tuliskan komentar Anda di sini.."
                  className="w-full text-sm bg-transparent focus:outline-none resize-none"
                  rows={2}
                />
                <div className="flex justify-between items-center mt-2 text-gray-500">
                  <div className="flex gap-3">
                    <Mic className="w-4 h-4 cursor-pointer hover:text-black" />
                    <Paperclip className="w-4 h-4 cursor-pointer hover:text-black" />
                    <Smile className="w-4 h-4 cursor-pointer hover:text-black" />
                  </div>
                  <Button
                    size="sm"
                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 text-sm"
                  >
                    Kirim
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </>
      ) : (
        // ==============================
        // BUAT KONTEN
        // ==============================
        <div>
          {/* STEP PROGRESS */}
          <div className="relative flex items-center justify-between mb-6">
            <div className="flex-1 h-0.5 bg-blue-500 absolute top-1/2 left-0 right-0 z-0" />
            <div className="relative z-10 flex justify-between w-full">
              <div className="flex flex-col items-center">
                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white">
                  <CheckCircle2 className="w-4 h-4" />
                </div>
                <span className="text-blue-600 text-sm mt-1 font-semibold">
                  Configuration
                </span>
              </div>
              <div className="flex flex-col items-center">
                <div
                  className={cn(
                    "w-6 h-6 rounded-full border-2 flex items-center justify-center",
                    step === "publish"
                      ? "bg-blue-600 border-blue-600 text-white"
                      : "border-blue-300 text-gray-400",
                  )}
                >
                  {step === "publish" ? (
                    <CheckCircle2 className="w-4 h-4" />
                  ) : (
                    <div className="w-2 h-2 bg-blue-300 rounded-full" />
                  )}
                </div>
                <span
                  className={cn(
                    "text-sm mt-1 font-semibold",
                    step === "publish" ? "text-blue-600" : "text-gray-400",
                  )}
                >
                  Publish
                </span>
              </div>
            </div>
          </div>

          {/* CONFIGURATION FORM */}
          {step === "configuration" && (
            <div>
              <h2 className="text-lg font-semibold mb-4">Configuration</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-1">
                    Select AI Journalist
                  </label>
                  <select className="border w-full rounded-md px-3 py-2 text-sm">
                    <option>Select AI Journalist</option>
                    <option>AI Journalist 1</option>
                    <option>AI Journalist 2</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium mb-1">
                    Main Keywords
                  </label>
                  <Input placeholder="Enter your main keyword here..." />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-1">
                    Title
                  </label>
                  <Input placeholder="Enter your title here..." />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-1">
                    SEO Keywords
                  </label>
                  <Input placeholder="Enter SEO keywords..." />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-1">
                    Advanced Configuration
                  </label>
                  <textarea
                    className="w-full border rounded-md px-3 py-2 text-sm"
                    rows={3}
                    placeholder="Advanced settings..."
                  />
                </div>

                <Button
                  className="bg-blue-600 hover:bg-blue-700 text-white"
                  onClick={() => setStep("publish")}
                >
                  ⚡ Generate Article
                </Button>
              </div>
            </div>
          )}

          {/* PUBLISH STEP */}
          {step === "publish" && (
            <div className="mt-4">
              <h2 className="text-lg font-semibold text-blue-600 mb-3">
                Publish
              </h2>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* LEFT CONTENT */}
                <div className="md:col-span-2 space-y-4">
                  <label className="text-sm font-medium text-gray-700 mb-1 block">
                    Judul
                  </label>
                  <Input
                    placeholder="Judul"
                    defaultValue="Lorem ipsum dolor sit amet consectetur. In faucibus diam eu ut quisque."
                  />

                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                      Deskripsi
                    </label>
                    <textarea
                      rows={8}
                      className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none"
                      defaultValue={`Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo, M.Si. mendampingi Presiden Joko Widodo menghadiri upacara Peringatan Hari Kesaktian Pancasila di Monumen Pancasila Sakti, Lubang Buaya, Jakarta Timur, pada Selasa (1/10/2024)...`}
                    />
                  </div>

                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                      File Media
                    </label>

                    <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                      {/* Dummy image sementara, nanti diganti dari API */}
                      {["/p1.jpg", "/p2.png"].map((url, i) => (
                        <div
                          key={i}
                          className="relative w-full h-24 rounded-md overflow-hidden border"
                        >
                          <img
                            src={url}
                            alt={`Media ${i + 1}`}
                            className="object-cover w-full h-full"
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* RIGHT SIDEBAR */}
                <div className="space-y-4">
                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                      Kreator
                    </label>
                    <Input defaultValue="Humas POLRI" />
                  </div>

                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                      Thumbnail
                    </label>
                    <div className="border border-dashed rounded-md py-6 flex flex-col items-center justify-center text-gray-400 text-sm">
                      <Upload className="w-5 h-5 mb-1" />
                      Drag and drop
                      <p className="text-xs text-gray-500 mt-1">
                        .PNG, .JPG max 3MB
                      </p>
                    </div>
                  </div>

                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-1 block">
                      Tag
                    </label>
                    <Input
                      placeholder="Masukkan tag..."
                      defaultValue="Humas POLRI"
                    />
                    <div className="flex flex-wrap gap-2 mt-2">
                      <span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-md">
                        Poldakaltim
                      </span>
                    </div>
                  </div>

                  <div>
                    <label className="text-sm font-medium text-gray-700 mb-2 block">
                      Target Publish
                    </label>
                    <div className="space-y-2">
                      {[
                        "Tribrata News Mabes",
                        "Tribrata News Polda Aceh",
                        "Tribrata News Polda Jawa Timur",
                        "Tribrata News Polda Jawa Tengah",
                        "Tribrata News Polda Jawa Barat",
                      ].map((item) => (
                        <label
                          key={item}
                          className="flex items-center text-sm gap-2"
                        >
                          <input
                            type="checkbox"
                            className="rounded border-gray-300"
                          />
                          {item}
                        </label>
                      ))}
                    </div>
                  </div>

                  <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
                    ✓ Publish Terjadwal
                  </Button>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}