"use client";

import { useState } from "react";
import { Download, Facebook, Twitter } from "lucide-react";

export default function VideoSidebar() {
  const [selected, setSelected] = useState("4K");

  const options = [
    {
      title: "4K",
      size: "3840 x 2160 px",
      file: "138 Mb",
      format: "mov",
    },
    {
      title: "HD",
      size: "1920 x 1080 px",
      file: "100 Mb",
      format: "mov",
    },
    {
      title: "HD Web",
      size: "1280 x 720 px",
      file: "80 Mb",
      format: "mp4",
    },
    {
      title: "Web",
      size: "640 x 360 px",
      file: "40 Mb",
      format: "mp4",
    },
  ];

  return (
    <div className="bg-white border border-gray-200 rounded-3xl p-6 shadow-sm space-y-6">
      {/* TAG */}
      <div>
        <span className="bg-red-600 text-white text-xs px-3 py-1 rounded-md font-medium">
          POLRI
        </span>

        <div className="flex flex-wrap gap-3 mt-4">
          <Tag label="Tag 1" />
          <Tag label="Tag 2" />
          <Tag label="Tag 3" />
        </div>
      </div>

      <hr />

      {/* OPTIONS */}
      <div>
        <h3 className="text-base font-semibold mb-5">
          Opsi Ukuran Audio Visual
        </h3>

        <div className="space-y-4">
          {options.map((item) => (
            <div
              key={item.title}
              onClick={() => setSelected(item.title)}
              className="cursor-pointer"
            >
              <div className="flex items-start justify-between">
                {/* LEFT */}
                <div className="flex items-start gap-4">
                  {/* CUSTOM RADIO */}
                  <div
                    className={`h-6 w-6 rounded-full border-2 flex items-center justify-center transition
                      ${
                        selected === item.title
                          ? "border-blue-600"
                          : "border-gray-400"
                      }`}
                  >
                    {selected === item.title && (
                      <div className="h-3 w-3 bg-blue-600 rounded-full" />
                    )}
                  </div>

                  <div>
                    <p className="text-lg font-semibold">{item.title}</p>
                  </div>
                </div>

                {/* RIGHT */}
                <div className="text-right">
                  <p className="font-semibold text-sm">{item.size}</p>
                  <p className="text-xs text-gray-500">
                    {item.file} &nbsp; | &nbsp; {item.format}
                  </p>
                </div>
              </div>

              <div className="mt-4 border-b border-gray-200" />
            </div>
          ))}
        </div>
      </div>

      {/* DOWNLOAD */}
      <div className="space-y-4">
        <label className="flex items-center gap-3 text-sm">
          <input
            type="checkbox"
            defaultChecked
            className="h-5 w-5 accent-green-600"
          />
          Unduh Semua Berkas?
        </label>

        <button className="w-full bg-[#9b6a1d] hover:bg-[#815515] text-white py-4 rounded-xl flex items-center justify-center gap-3 text-base font-medium transition">
          <Download size={20} />
          Unduh
        </button>
      </div>

      {/* SHARE */}
      <div className="flex flex-row items-center gap-3 ">
        <p className="text-sm">Bagikan:</p>
        <div className="flex gap-4">
          <ShareIcon>
            <div className="text-[#9A691D]">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396z"
                />
              </svg>
            </div>
          </ShareIcon>
          <ShareIcon>
            <div className="text-[#9A691D]">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23"
                />
              </svg>
            </div>
          </ShareIcon>
          <ShareIcon>
            <div className="text-[#9A691D]">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 16 16"
              >
                <path
                  fill="currentColor"
                  d="M8 0a8 8 0 1 1-4.075 14.886L.658 15.974a.5.5 0 0 1-.632-.632l1.089-3.266A8 8 0 0 1 8 0M5.214 4.004a.7.7 0 0 0-.526.266C4.508 4.481 4 4.995 4 6.037c0 1.044.705 2.054.804 2.196c.098.138 1.388 2.28 3.363 3.2q.55.255 1.12.446c.472.16.902.139 1.242.085c.379-.06 1.164-.513 1.329-1.01c.163-.493.163-.918.113-1.007c-.049-.088-.18-.142-.378-.25c-.196-.105-1.165-.618-1.345-.687c-.18-.073-.312-.106-.443.105c-.132.213-.507.691-.623.832c-.113.139-.23.159-.425.053c-.198-.105-.831-.33-1.584-1.054c-.585-.561-.98-1.258-1.094-1.469c-.116-.213-.013-.326.085-.433c.09-.094.198-.246.296-.371c.097-.122.132-.21.198-.353c.064-.141.031-.266-.018-.371s-.443-1.152-.607-1.577c-.16-.413-.323-.355-.443-.363c-.114-.005-.245-.005-.376-.005"
                />
              </svg>
            </div>
          </ShareIcon>
        </div>
      </div>
    </div>
  );
}

/* COMPONENTS */

function Tag({ label }: { label: string }) {
  return (
    <span className="text-xs border border-gray-400 px-4 py-1 rounded-full bg-white">
      {label}
    </span>
  );
}

function ShareIcon({ children }: { children: React.ReactNode }) {
  return (
    <div className="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200 transition cursor-pointer">
      {children}
    </div>
  );
}