"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { InfoTributaria } from "@/types/factura"
import { useConfiguracionesTributarias } from '@/hooks/useConfiguracionesTributarias'
import { Button } from "@/components/ui/button"
import { ExternalLink } from 'lucide-react'

interface InfoTributariaFormProps {
  infoTributaria: InfoTributaria
  onChange: (field: keyof InfoTributaria, value: string) => void
}

export function InfoTributariaForm({ infoTributaria, onChange }: InfoTributariaFormProps) {
  const { configuraciones } = useConfiguracionesTributarias()

  const loadConfiguracion = (config: any) => {
    onChange('ambiente', config.ambiente)
    onChange('tipoEmision', config.tipoEmision)
    onChange('razonSocial', config.razonSocial)
    onChange('nombreComercial', config.nombreComercial)
    onChange('ruc', config.ruc)
    onChange('dirMatriz', config.dirMatriz)
    onChange('estab', config.estab)
    onChange('ptoEmi', config.ptoEmi)
    onChange('secuencial', config.secuencial)
    // Nota: claveAcceso no se guarda en la base de datos por seguridad
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>Información Tributaria</CardTitle>
            <CardDescription>Datos del emisor de la factura</CardDescription>
          </div>
          {configuraciones.length > 0 && (
            <div className="flex gap-2">
              <Select onValueChange={(value) => {
                const config = configuraciones.find(c => c.id === value)
                if (config) {
                  loadConfiguracion(config)
                }
              }}>
                <SelectTrigger className="w-[200px]">
                  <SelectValue placeholder="Cargar configuración" />
                </SelectTrigger>
                <SelectContent>
                  {configuraciones.filter(c => c.activo).map((config) => (
                    <SelectItem key={config.id} value={config.id}>
                      {config.razonSocial} ({config.ruc})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <Button
                variant="outline"
                size="sm"
                onClick={() => window.open('/configuracion', '_blank')}
              >
                <ExternalLink className="w-4 h-4" />
              </Button>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="space-y-2">
            <Label htmlFor="ambiente">Ambiente</Label>
            <Select value={infoTributaria.ambiente} onValueChange={(value) => onChange('ambiente', value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1 - Pruebas</SelectItem>
                <SelectItem value="2">2 - Producción</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="tipoEmision">Tipo Emisión</Label>
            <Select value={infoTributaria.tipoEmision} onValueChange={(value) => onChange('tipoEmision', value)}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1 - Normal</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="ruc">RUC *</Label>
            <Input
              id="ruc"
              value={infoTributaria.ruc}
              onChange={(e) => onChange('ruc', e.target.value)}
              placeholder="13 dígitos"
              maxLength={13}
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="razonSocial">Razón Social *</Label>
            <Input
              id="razonSocial"
              value={infoTributaria.razonSocial}
              onChange={(e) => onChange('razonSocial', e.target.value)}
              placeholder="Empresa S.A."
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="nombreComercial">Nombre Comercial *</Label>
            <Input
              id="nombreComercial"
              value={infoTributaria.nombreComercial}
              onChange={(e) => onChange('nombreComercial', e.target.value)}
              placeholder="Nombre Comercial"
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="claveAcceso">Clave de Acceso *</Label>
            <Input
              id="claveAcceso"
              value={infoTributaria.claveAcceso}
              onChange={(e) => onChange('claveAcceso', e.target.value)}
              placeholder="49 dígitos"
              maxLength={49}
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="estab">Establecimiento</Label>
            <Input
              id="estab"
              value={infoTributaria.estab}
              onChange={(e) => onChange('estab', e.target.value)}
              placeholder="001"
              maxLength={3}
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="ptoEmi">Punto Emisión</Label>
            <Input
              id="ptoEmi"
              value={infoTributaria.ptoEmi}
              onChange={(e) => onChange('ptoEmi', e.target.value)}
              placeholder="001"
              maxLength={3}
            />
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="secuencial">Secuencial</Label>
            <Input
              id="secuencial"
              value={infoTributaria.secuencial}
              onChange={(e) => onChange('secuencial', e.target.value)}
              placeholder="000000001"
              maxLength={9}
            />
          </div>
          
          <div className="space-y-2 lg:col-span-3">
            <Label htmlFor="dirMatriz">Dirección Matriz *</Label>
            <Input
              id="dirMatriz"
              value={infoTributaria.dirMatriz}
              onChange={(e) => onChange('dirMatriz', e.target.value)}
              placeholder="Av. Principal 123 y Secundaria"
            />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}