"use client";

import { Building2, Check, Image as ImageIcon, Loader2, Upload } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { CompanyProfile } from "@/types/settings";

interface CompanyProfileTabProps {
  company: CompanyProfile | null;
  onSave: (data: Partial<CompanyProfile>) => Promise<any>;
  isSaving?: boolean;
}

export function CompanyProfileTab({ company, onSave, isSaving = false }: CompanyProfileTabProps) {
  const [formData, setFormData] = useState<Partial<CompanyProfile>>({
    legalName: company?.legalName || "",
    tradeName: company?.tradeName || "",
    document: company?.document || "",
    stateRegistration: company?.stateRegistration || "",
    email: company?.email || "",
    phone: company?.phone || "",
    logoUrl: company?.logoUrl || null,
    zipCode: company?.zipCode || "",
    street: company?.street || "",
    number: company?.number || "",
    district: company?.district || "",
    city: company?.city || "",
    state: company?.state || "",
  });

  useEffect(() => {
    if (company) {
      setFormData({
        legalName: company.legalName || "",
        tradeName: company.tradeName || "",
        document: company.document || "",
        stateRegistration: company.stateRegistration || "",
        email: company.email || "",
        phone: company.phone || "",
        logoUrl: company.logoUrl || null,
        zipCode: company.zipCode || "",
        street: company.street || "",
        number: company.number || "",
        district: company.district || "",
        city: company.city || "",
        state: company.state || "",
      });
    }
  }, [company]);

  const [savedSuccess, setSavedSuccess] = useState(false);

  const handleLogoUploadSim = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setFormData((prev) => ({ ...prev, logoUrl: event.target?.result as string }));
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSave(formData);
    setSavedSuccess(true);
    setTimeout(() => setSavedSuccess(false), 3000);
  };

  return (
    <Card className="p-6 shadow-xs border space-y-6">
      <div className="flex items-center justify-between border-b pb-4">
        <div>
          <h2 className="text-lg font-bold text-foreground flex items-center gap-2">
            <Building2 className="h-5 w-5 text-primary" /> Dados da Empresa & Identidade Visual (Logo)
          </h2>
          <p className="text-xs text-muted-foreground">
            Essas informações e a logo serão exibidas no cabeçalho dos relatórios, contratos e documentos impressos.
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Upload da Logo da Empresa */}
        <div className="rounded-xl border bg-muted/30 p-5">
          <label className="mb-2 block text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Logo da Empresa (Impresso nos Relatórios & Contratos)
          </label>
          <div className="flex flex-wrap items-center gap-6">
            <div className="flex h-24 w-48 items-center justify-center rounded-xl border-2 border-dashed border-input bg-card p-2 text-center shadow-xs">
              {formData.logoUrl ? (
                <img
                  src={formData.logoUrl}
                  alt="Logo da Empresa"
                  className="max-h-full max-w-full object-contain"
                />
              ) : (
                <div className="flex flex-col items-center gap-1 text-muted-foreground">
                  <ImageIcon className="h-8 w-8 text-muted-foreground/60" />
                  <span className="text-xs font-semibold">Sua Logo Aqui</span>
                </div>
              )}
            </div>

            <div className="space-y-2">
              <label className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-xs font-semibold text-primary-foreground shadow-xs hover:bg-blue-600 transition">
                <Upload className="h-4 w-4" /> Selecionar Imagem (PNG/JPG)
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleLogoUploadSim}
                  className="hidden"
                />
              </label>
              <p className="text-xs text-muted-foreground">
                Tamanho recomendado: 400x120px em formato PNG ou JPG com fundo transparente.
              </p>
            </div>
          </div>
        </div>

        {/* Informações Cadastrais */}
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-sm font-medium">Razão Social *</label>
            <Input
              value={formData.legalName || ""}
              onChange={(e) => setFormData({ ...formData, legalName: e.target.value })}
              placeholder="Ex: BlackLoc Locações Industriais LTDA"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Nome Fantasia</label>
            <Input
              value={formData.tradeName || ""}
              onChange={(e) => setFormData({ ...formData, tradeName: e.target.value })}
              placeholder="Ex: BlackLoc"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">CNPJ *</label>
            <Input
              value={formData.document || ""}
              onChange={(e) => setFormData({ ...formData, document: e.target.value })}
              placeholder="12.345.678/0001-90"
              required
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Inscrição Estadual</label>
            <Input
              value={formData.stateRegistration || ""}
              onChange={(e) => setFormData({ ...formData, stateRegistration: e.target.value })}
              placeholder="123.456.789.110"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">E-mail Principal</label>
            <Input
              type="email"
              value={formData.email || ""}
              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
              placeholder="contato@empresa.com.br"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Telefone / WhatsApp</label>
            <Input
              value={formData.phone || ""}
              onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
              placeholder="(81) 3344-5566"
            />
          </div>
        </div>

        {/* Endereço Completo */}
        <div className="space-y-3 border-t pt-4">
          <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Endereço da Sede
          </h3>
          <div className="grid gap-4 sm:grid-cols-3">
            <div>
              <label className="mb-1 block text-xs font-medium">CEP</label>
              <Input
                value={formData.zipCode || ""}
                onChange={(e) => setFormData({ ...formData, zipCode: e.target.value })}
                placeholder="50000-000"
              />
            </div>

            <div className="sm:col-span-2">
              <label className="mb-1 block text-xs font-medium">Logradouro / Av.</label>
              <Input
                value={formData.street || ""}
                onChange={(e) => setFormData({ ...formData, street: e.target.value })}
                placeholder="Av. Engenheiros Unidos"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium">Número</label>
              <Input
                value={formData.number || ""}
                onChange={(e) => setFormData({ ...formData, number: e.target.value })}
                placeholder="1500"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium">Bairro</label>
              <Input
                value={formData.district || ""}
                onChange={(e) => setFormData({ ...formData, district: e.target.value })}
                placeholder="Boa Viagem"
              />
            </div>

            <div>
              <label className="mb-1 block text-xs font-medium">Cidade / UF</label>
              <Input
                value={`${formData.city || ""} - ${formData.state || ""}`}
                onChange={(e) => {
                  const parts = e.target.value.split("-");
                  setFormData({ ...formData, city: parts[0]?.trim(), state: parts[1]?.trim() });
                }}
                placeholder="Recife - PE"
              />
            </div>
          </div>
        </div>

        {/* Botão de Salvar */}
        <div className="flex items-center justify-end gap-3 border-t pt-4">
          {savedSuccess && (
            <span className="text-xs font-semibold text-emerald-600 flex items-center gap-1">
              <Check className="h-4 w-4" /> Alterações salvas com sucesso!
            </span>
          )}
          <Button type="submit" disabled={isSaving}>
            {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Salvar Dados da Empresa
          </Button>
        </div>
      </form>
    </Card>
  );
}