"use client"

import {
  Building2,
  Globe,
  Link2,
  Shield,
  Trash2,
  UserRound,
} from "lucide-react"
import {
  DRIVE_BTN_GHOST,
  DRIVE_BTN_PRIMARY,
  DRIVE_DIALOG_CONTENT,
  DRIVE_DIALOG_FOOTER,
  DRIVE_DIALOG_HEADER,
  DRIVE_FIELD_CLASS,
  DRIVE_TEXT_PRIMARY,
  DRIVE_TEXT_SECONDARY,
  DRIVE_TEXT_TITLE,
} from "@/lib/drive/drive-dialog-styles"
import { cn } from "@/lib/utils"

const EXISTING_SHARES = [
  {
    id: "alice",
    label: "Alice Martin",
    role: "Éditeur",
    icon: UserRound,
  },
  {
    id: "team",
    label: "Équipe Produit",
    role: "Lecteur",
    icon: Building2,
  },
  {
    id: "link",
    label: "Lien public",
    role: "Lecteur",
    icon: Link2,
    password: true,
  },
] as const

/** Modale de partage flottante — aperçu statique, sans overlay ni fenêtre navigateur. */
export function UltidriveSharePreview() {
  return (
    <div className="flex min-h-[22rem] items-center justify-center rounded-2xl bg-[var(--landing-chip)]/35 py-6 sm:min-h-[26rem] sm:py-8">
      <div
        className={cn(
          "w-full max-w-[480px] shadow-[0_24px_60px_-20px_rgba(30,40,90,0.35)]",
          DRIVE_DIALOG_CONTENT,
          "mx-3 rounded-xl sm:mx-4"
        )}
        role="dialog"
        aria-labelledby="ultidrive-share-preview-title"
      >
        <div className={cn(DRIVE_DIALOG_HEADER, "pb-4")}>
          <h3
            id="ultidrive-share-preview-title"
            className={cn("text-base font-medium", DRIVE_TEXT_TITLE)}
          >
            Partager « Roadmap Q3 — Produit »
          </h3>
        </div>

        <div className="max-h-[min(52vh,380px)] space-y-5 overflow-y-auto px-6 py-4">
          <div className="space-y-2">
            <input
              type="email"
              readOnly
              value=""
              placeholder="Ajouter des personnes par e-mail"
              className={cn(DRIVE_FIELD_CLASS, "h-10 w-full px-3")}
              aria-label="Ajouter des personnes par e-mail"
            />
          </div>

          <div className="space-y-3">
            <p className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>Personnes</p>
            <ul className="space-y-0.5">
              {EXISTING_SHARES.map((share) => {
                const ShareIcon = share.icon
                return (
                  <li
                    key={share.id}
                    className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-[#f1f3f4] dark:hover:bg-[#3c4043]/50"
                  >
                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#e8f0fe] text-[#1967d2] dark:bg-[#1a377a]/50 dark:text-[#8ab4f8]">
                      <ShareIcon className="h-3.5 w-3.5" aria-hidden />
                    </div>
                    <p className={cn("min-w-0 flex-1 truncate text-sm", DRIVE_TEXT_PRIMARY)}>
                      {share.label}
                    </p>
                    {"password" in share && share.password ? (
                      <Shield
                        className="h-3.5 w-3.5 shrink-0 text-[#5f6368] dark:text-[#9aa0a6]"
                        aria-label="Mot de passe"
                      />
                    ) : null}
                    <span className="inline-flex shrink-0 items-center rounded-full bg-[#e8eaed] px-2 py-0.5 text-[11px] font-medium text-[#3c4043] dark:bg-[#3c4043] dark:text-[#e8eaed]">
                      {share.role}
                    </span>
                    <button
                      type="button"
                      className={cn(DRIVE_BTN_GHOST, "size-7 opacity-60")}
                      aria-label="Supprimer le partage"
                      tabIndex={-1}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  </li>
                )
              })}
            </ul>
          </div>

          <div className="space-y-2 border-t border-[#e8eaed] pt-4 dark:border-[#3c4043]">
            <p className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>Accès général</p>
            <div className="flex items-start gap-3">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#e6f4ea] text-[#188038] dark:bg-[#1e3a2f]/50 dark:text-[#81c995]">
                <Globe className="h-4 w-4" aria-hidden />
              </div>
              <div className="min-w-0 flex-1 space-y-0.5">
                <p className={cn("text-sm font-medium", DRIVE_TEXT_PRIMARY)}>Lien public</p>
                <p className={cn("text-xs leading-relaxed", DRIVE_TEXT_SECONDARY)}>
                  Toute personne disposant du lien peut consulter l&apos;élément.
                </p>
              </div>
              <span className="inline-flex h-8 shrink-0 items-center rounded-lg bg-[#f1f3f4] px-2.5 text-xs font-medium text-[#3c4043] dark:bg-[#35363a] dark:text-[#e8eaed]">
                Lecteur
              </span>
            </div>
          </div>
        </div>

        <div
          className={cn(
            DRIVE_DIALOG_FOOTER,
            "flex flex-row flex-wrap items-center justify-between gap-3 sm:gap-4"
          )}
        >
          <button
            type="button"
            className="inline-flex h-9 shrink-0 items-center gap-2 rounded-full border border-[#dadce0] bg-white px-4 text-sm font-medium text-[#1a73e8] dark:border-[#5f6368]/40 dark:bg-transparent dark:text-[#8ab4f8]"
            tabIndex={-1}
          >
            <Link2 className="h-4 w-4" aria-hidden />
            Copier le lien
          </button>
          <button
            type="button"
            className={cn(
              DRIVE_BTN_PRIMARY,
              "inline-flex h-9 shrink-0 items-center rounded-full px-6 text-sm"
            )}
            tabIndex={-1}
          >
            Terminé
          </button>
        </div>
      </div>
    </div>
  )
}