<script lang="ts">
  import { useConvexClient } from "convex-svelte";
  import { ExternalLink, FileText, File, Upload, Trash2, Eye, RefreshCw } from "lucide-svelte";
  
  interface Props {
    label: string;
    helpUrl?: string;
    value?: string; // storageId
    disabled?: boolean;
    required?: boolean;
    onUpload: (file: File) => Promise<void>;
    onRemove: () => Promise<void>;
  }

  let {
    label,
    helpUrl,
    value = $bindable(),
    disabled = false,
    required = false,
    onUpload,
    onRemove,
  }: Props = $props();
  
  const client = useConvexClient();
  
  let fileInput: HTMLInputElement;
  let uploading = $state(false);
  let error = $state<string | null>(null);
  let fileName = $state<string>("");
  let fileType = $state<string>("");
  let previewUrl = $state<string | null>(null);
  let fileUrl = $state<string | null>(null);
  
  const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
  const ALLOWED_TYPES = [
    "application/pdf",
    "image/jpeg",
    "image/jpg",
    "image/png",
  ];
  
  // Buscar URL do arquivo quando houver um storageId
  $effect(() => {
    if (value && !fileName) {
      // Tem storageId mas não é um upload recente
      loadExistingFile(value);
    }
  });
  
  async function loadExistingFile(storageId: string) {
    try {
      const url = await client.storage.getUrl(storageId as any);
      if (url) {
        fileUrl = url;
        fileName = "Documento anexado";
        // Detectar tipo pelo URL ou assumir PDF
        if (url.includes(".pdf") || url.includes("application/pdf")) {
          fileType = "application/pdf";
        } else {
          fileType = "image/jpeg";
          previewUrl = url; // Para imagens, a URL serve como preview
        }
      }
    } catch (err) {
      console.error("Erro ao carregar arquivo existente:", err);
    }
  }
  
  async function handleFileSelect(event: Event) {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    
    if (!file) return;
    
    error = null;
    
    // Validate file size
    if (file.size > MAX_FILE_SIZE) {
      error = "Arquivo muito grande. Tamanho máximo: 10MB";
      target.value = "";
      return;
    }
    
    // Validate file type
    if (!ALLOWED_TYPES.includes(file.type)) {
      error = "Tipo de arquivo não permitido. Use PDF ou imagens (JPG, PNG)";
      target.value = "";
      return;
    }
    
    try {
      uploading = true;
      fileName = file.name;
      fileType = file.type;
      
      // Create preview for images
      if (file.type.startsWith("image/")) {
        const reader = new FileReader();
        reader.onload = (e) => {
          previewUrl = e.target?.result as string;
        };
        reader.readAsDataURL(file);
      }
      
      await onUpload(file);
      
    } catch (err: any) {
      error = err?.message || "Erro ao fazer upload do arquivo";
      previewUrl = null;
    } finally {
      uploading = false;
      target.value = "";
    }
  }
  
  async function handleRemove() {
    if (!confirm("Tem certeza que deseja remover este arquivo?")) {
      return;
    }
    
    try {
      uploading = true;
      await onRemove();
      fileName = "";
      fileType = "";
      previewUrl = null;
      fileUrl = null;
    } catch (err: any) {
      error = err?.message || "Erro ao remover arquivo";
    } finally {
      uploading = false;
    }
  }
  
  function handleView() {
    if (fileUrl) {
      window.open(fileUrl, '_blank');
    }
  }
  
  function openFileDialog() {
    fileInput?.click();
  }
</script>

<div class="form-control w-full">
  <label class="label" for="file-upload-input">
    <span class="label-text font-medium flex items-center gap-2">
      {label}
      {#if required}
        <span class="text-error">*</span>
      {/if}
      {#if helpUrl}
        <div class="tooltip tooltip-right" data-tip="Clique para acessar o link">
          <a 
            href={helpUrl} 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-primary hover:text-primary-focus transition-colors"
            aria-label="Acessar link"
          >
            <ExternalLink class="h-4 w-4" strokeWidth={2} />
          </a>
        </div>
      {/if}
    </span>
  </label>
  
  <input
    id="file-upload-input"
    type="file"
    bind:this={fileInput}
    onchange={handleFileSelect}
    accept=".pdf,.jpg,.jpeg,.png"
    class="hidden"
    {disabled}
  />
  
  {#if value || fileName}
    <div class="flex items-center gap-2 p-3 border border-base-300 rounded-lg bg-base-100">
      <!-- Preview -->
      <div class="flex-shrink-0">
        {#if previewUrl}
          <img src={previewUrl} alt="Preview" class="w-12 h-12 object-cover rounded" />
        {:else if fileType === "application/pdf" || fileName.endsWith(".pdf")}
          <div class="w-12 h-12 bg-error/10 rounded flex items-center justify-center">
            <FileText class="h-6 w-6 text-error" strokeWidth={2} />
          </div>
        {:else}
          <div class="w-12 h-12 bg-success/10 rounded flex items-center justify-center">
            <File class="h-6 w-6 text-success" strokeWidth={2} />
          </div>
        {/if}
      </div>
      
      <!-- File info -->
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium truncate">{fileName || "Arquivo anexado"}</p>
        <p class="text-xs text-base-content/60">
          {#if uploading}
            Carregando...
          {:else}
            Enviado com sucesso
          {/if}
        </p>
      </div>
      
      <!-- Actions -->
      <div class="flex gap-2">
        {#if fileUrl}
          <button
            type="button"
            onclick={handleView}
            class="btn btn-sm btn-ghost text-info"
            disabled={uploading || disabled}
            title="Visualizar arquivo"
          >
            <Eye class="h-4 w-4" strokeWidth={2} />
          </button>
        {/if}
        <button
          type="button"
          onclick={openFileDialog}
          class="btn btn-sm btn-ghost"
          disabled={uploading || disabled}
          title="Substituir arquivo"
        >
          <RefreshCw class="h-4 w-4" strokeWidth={2} />
        </button>
        <button
          type="button"
          onclick={handleRemove}
          class="btn btn-sm btn-ghost text-error"
          disabled={uploading || disabled}
          title="Remover arquivo"
        >
          <Trash2 class="h-4 w-4" strokeWidth={2} />
        </button>
      </div>
    </div>
  {:else}
    <button
      type="button"
      onclick={openFileDialog}
      class="btn btn-outline btn-block justify-start gap-2"
      disabled={uploading || disabled}
    >
      {#if uploading}
        <span class="loading loading-spinner loading-sm"></span>
        Carregando...
      {:else}
        <Upload class="h-5 w-5" strokeWidth={2} />
        Selecionar arquivo (PDF ou imagem, máx. 10MB)
      {/if}
    </button>
  {/if}
  
  {#if error}
    <div class="label">
      <span class="label-text-alt text-error">{error}</span>
    </div>
  {/if}
</div>

