<script lang="ts">
	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
	import { createEventDispatcher } from 'svelte';
	import { Paperclip, X, Send } from 'lucide-svelte';

	interface FormValues {
		titulo: string;
		descricao: string;
		tipo: Doc<'tickets'>['tipo'];
		prioridade: Doc<'tickets'>['prioridade'];
		categoria: string;
		canalOrigem?: string;
		anexos: File[];
	}

	interface Props {
		loading?: boolean;
	}

	const dispatch = createEventDispatcher<{ submit: { values: FormValues } }>();
	const props = $props<Props>();
	const loading = $derived(props.loading ?? false);

	let titulo = $state('');
	let descricao = $state('');
	let tipo = $state<Doc<'tickets'>['tipo']>('chamado');
	let prioridade = $state<Doc<'tickets'>['prioridade']>('media');
	let categoria = $state('');
	let canalOrigem = $state('Portal SGSE');
	let anexos = $state<Array<File>>([]);
	let errors = $state<Record<string, string>>({});
	function validate(): boolean {
		const novoErros: Record<string, string> = {};
		if (!titulo.trim()) novoErros.titulo = 'Informe um título para o chamado.';
		if (!descricao.trim()) novoErros.descricao = 'Descrição é obrigatória.';
		if (!categoria.trim()) novoErros.categoria = 'Informe uma categoria.';
		errors = novoErros;
		return Object.keys(novoErros).length === 0;
	}

	function handleFiles(event: Event) {
		const target = event.target as HTMLInputElement;
		const files = Array.from(target.files ?? []);
		anexos = files.slice(0, 5); // limitar para 5 anexos
	}

	function removeFile(index: number) {
		anexos = anexos.filter((_, idx) => idx !== index);
	}

	function resetForm() {
		titulo = '';
		descricao = '';
		categoria = '';
		tipo = 'chamado';
		prioridade = 'media';
		anexos = [];
		errors = {};
	}

	function handleSubmit(event: SubmitEvent) {
		event.preventDefault();
		if (!validate()) return;

		dispatch('submit', {
			values: {
				titulo: titulo.trim(),
				descricao: descricao.trim(),
				tipo,
				prioridade,
				categoria: categoria.trim(),
				canalOrigem,
				anexos
			}
		});
	}
</script>

<form class="space-y-8" onsubmit={handleSubmit}>
	<!-- Título do Chamado -->
	<section class="form-control">
		<label class="label">
			<span class="label-text text-base-content font-semibold">Título do chamado</span>
		</label>
		<input
			type="text"
			class="input input-bordered input-primary w-full"
			placeholder="Ex: Erro ao acessar o módulo de licitações"
			bind:value={titulo}
		/>
		{#if errors.titulo}
			<span class="text-error mt-1 text-sm">{errors.titulo}</span>
		{/if}
	</section>

	<!-- Tipo de Solicitação e Prioridade -->
	<section class="grid gap-6 md:grid-cols-2">
		<div class="form-control">
			<label class="label">
				<span class="label-text text-base-content font-semibold">Tipo de solicitação</span>
			</label>
			<div class="border-base-300 bg-base-200/30 grid grid-cols-2 gap-2 rounded-xl border p-3">
				{#each [{ value: 'chamado', label: 'Chamado', icon: '📋' }, { value: 'reclamacao', label: 'Reclamação', icon: '⚠️' }, { value: 'elogio', label: 'Elogio', icon: '⭐' }, { value: 'sugestao', label: 'Sugestão', icon: '💡' }] as opcao}
					<label
						class={`flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-2 p-2.5 transition-all ${
							tipo === opcao.value
								? 'border-primary bg-primary/10 shadow-md'
								: 'border-base-300 bg-base-100 hover:border-primary/50 hover:bg-base-200/50'
						}`}
					>
						<input
							type="radio"
							name="tipo"
							class="radio radio-primary radio-sm shrink-0"
							value={opcao.value}
							checked={tipo === opcao.value}
							onclick={() => (tipo = opcao.value as typeof tipo)}
						/>
						<span class="shrink-0 text-base">{opcao.icon}</span>
						<span class="flex-1 text-center text-sm font-medium">{opcao.label}</span>
					</label>
				{/each}
			</div>
		</div>

		<div class="form-control">
			<label class="label">
				<span class="label-text text-base-content font-semibold">Prioridade</span>
			</label>
			<div class="border-base-300 bg-base-200/30 grid grid-cols-2 gap-2 rounded-xl border p-3">
				{#each [{ value: 'baixa', label: 'Baixa', color: 'badge-success' }, { value: 'media', label: 'Média', color: 'badge-info' }, { value: 'alta', label: 'Alta', color: 'badge-warning' }, { value: 'critica', label: 'Crítica', color: 'badge-error' }] as opcao}
					<label
						class={`flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-2 p-2.5 transition-all ${
							prioridade === opcao.value
								? 'border-primary bg-primary/10 shadow-md'
								: 'border-base-300 bg-base-100 hover:border-primary/50 hover:bg-base-200/50'
						}`}
					>
						<input
							type="radio"
							name="prioridade"
							class={`radio radio-sm shrink-0 ${
								opcao.value === 'baixa'
									? 'radio-success'
									: opcao.value === 'media'
										? 'radio-info'
										: opcao.value === 'alta'
											? 'radio-warning'
											: 'radio-error'
							}`}
							value={opcao.value}
							checked={prioridade === opcao.value}
							onclick={() => (prioridade = opcao.value as typeof prioridade)}
						/>
						<span class={`badge badge-sm ${opcao.color} flex-1 justify-center`}>{opcao.label}</span>
					</label>
				{/each}
			</div>
		</div>
	</section>

	<!-- Categoria -->
	<section class="form-control">
		<label class="label">
			<span class="label-text text-base-content font-semibold">Categoria</span>
		</label>
		<input
			type="text"
			class="input input-bordered w-full"
			placeholder="Ex: Infraestrutura, Sistemas, Acesso"
			bind:value={categoria}
		/>
		{#if errors.categoria}
			<span class="text-error mt-1 text-sm">{errors.categoria}</span>
		{/if}
	</section>

	<!-- Descrição Detalhada -->
	<section class="form-control">
		<label class="label">
			<span class="label-text text-base-content font-semibold">Descrição detalhada</span>
			<span class="label-text-alt text-base-content/50">Obrigatório</span>
		</label>
		<textarea
			class="textarea textarea-bordered textarea-lg min-h-[180px]"
			placeholder="Descreva o problema, erro ou sugestão com o máximo de detalhes possível..."
			bind:value={descricao}
		></textarea>
		{#if errors.descricao}
			<span class="text-error mt-1 text-sm">{errors.descricao}</span>
		{/if}
	</section>

	<!-- Anexos -->
	<section class="border-base-300 bg-base-200/30 space-y-4 rounded-xl border p-4">
		<div class="flex items-center justify-between">
			<div>
				<p class="text-base-content font-semibold">Anexos (opcional)</p>
				<p class="text-base-content/60 text-sm">Suporte a PDF e imagens (máx. 10MB por arquivo)</p>
			</div>
			<label class="btn btn-outline btn-sm">
				<Paperclip class="h-4 w-4" strokeWidth={2} />
				Selecionar arquivos
				<input
					type="file"
					class="hidden"
					multiple
					accept=".pdf,.png,.jpg,.jpeg"
					onchange={handleFiles}
				/>
			</label>
		</div>

		{#if anexos.length > 0}
			<div class="border-base-200 bg-base-100/70 space-y-2 rounded-2xl border p-4">
				{#each anexos as file, index (file.name + index)}
					<div
						class="border-base-200 bg-base-100 flex items-center justify-between gap-3 rounded-xl border px-3 py-2"
					>
						<div>
							<p class="text-sm font-medium">{file.name}</p>
							<p class="text-base-content/60 text-xs">
								{(file.size / 1024 / 1024).toFixed(2)} MB • {file.type}
							</p>
						</div>
						<button
							type="button"
							class="btn btn-ghost btn-sm text-error"
							onclick={() => removeFile(index)}
						>
							Remover
						</button>
					</div>
				{/each}
			</div>
		{:else}
			<div
				class="border-base-300 bg-base-100/50 text-base-content/60 rounded-2xl border border-dashed p-6 text-center text-sm"
			>
				Nenhum arquivo selecionado.
			</div>
		{/if}
	</section>

	<!-- Ações do Formulário -->
	<section class="border-base-300 flex flex-wrap gap-3 border-t pt-6">
		<button type="submit" class="btn btn-primary min-w-[200px] flex-1 shadow-lg" disabled={loading}>
			{#if loading}
				<span class="loading loading-spinner loading-sm"></span>
				Enviando...
			{:else}
				<Send class="h-5 w-5" strokeWidth={2} />
				Registrar chamado
			{/if}
		</button>
		<button type="button" class="btn btn-ghost" onclick={resetForm} disabled={loading}>
			<X class="h-5 w-5" strokeWidth={2} />
			Limpar
		</button>
	</section>
</form>
