"use client";

import { useState } from "react";
import { Building2, User } from "lucide-react";

import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

type Scope = "company" | "personal";

export function ScopeToggle({
  name = "scope",
  defaultValue = "company",
  label = "Kapsam",
  description,
}: {
  name?: string;
  defaultValue?: Scope;
  label?: string;
  description?: string;
}) {
  const [value, setValue] = useState<Scope>(defaultValue);
  return (
    <div className="grid gap-2">
      <Label>{label}</Label>
      <input type="hidden" name={name} value={value} />
      <div className="grid grid-cols-2 gap-2">
        <button
          type="button"
          onClick={() => setValue("company")}
          className={cn(
            "border-input flex flex-col items-start gap-1 rounded-md border p-3 text-left transition-colors",
            value === "company"
              ? "border-primary bg-primary/5"
              : "hover:bg-muted/50",
          )}
        >
          <div className="flex items-center gap-2 text-sm font-medium">
            <Building2 className="size-4" />
            Şirket
          </div>
          <p className="text-muted-foreground text-xs">
            Ekipteki herkes görür ve düzenleyebilir.
          </p>
        </button>
        <button
          type="button"
          onClick={() => setValue("personal")}
          className={cn(
            "border-input flex flex-col items-start gap-1 rounded-md border p-3 text-left transition-colors",
            value === "personal"
              ? "border-primary bg-primary/5"
              : "hover:bg-muted/50",
          )}
        >
          <div className="flex items-center gap-2 text-sm font-medium">
            <User className="size-4" />
            Bireysel
          </div>
          <p className="text-muted-foreground text-xs">
            Yalnızca siz görürsünüz, ekibe yansımaz.
          </p>
        </button>
      </div>
      {description && <p className="text-muted-foreground text-xs">{description}</p>}
    </div>
  );
}

export function ScopeBadge({ scope }: { scope?: Scope }) {
  if (scope === "personal") {
    return (
      <span className="bg-violet-500/15 text-violet-700 dark:text-violet-300 border-violet-500/30 inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium">
        <User className="size-2.5" />
        Bireysel
      </span>
    );
  }
  return null; // Company is default — no badge needed
}