'use client';

import { useState, useEffect } from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Company } from '@/lib/types/autotask';
import { useApi } from '@/lib/hooks/use-api';
import { Building2 } from 'lucide-react';

interface CompanySelectorEnhancedProps {
  value?: number;
  onValueChange: (value: number | undefined, companyName?: string) => void;
  label?: string;
}

export function CompanySelectorEnhanced({ 
  value, 
  onValueChange, 
  label = 'Select Company' 
}: CompanySelectorEnhancedProps) {
  const { data, loading, error } = useApi<{ companies: Company[] }>('/api/companies');

  const companies = data?.companies || [];

  const handleChange = (val: string) => {
    const companyId = parseInt(val);
    const company = companies.find(c => c.id === companyId);
    onValueChange(companyId, company?.companyName);
  };

  return (
    <div className="space-y-2">
      <Label htmlFor="company-select" className="flex items-center gap-2">
        <Building2 className="w-4 h-4" />
        {label}
      </Label>
      <Select
        value={value?.toString()}
        onValueChange={handleChange}
        disabled={loading || !!error}
      >
        <SelectTrigger id="company-select">
          <SelectValue placeholder={loading ? 'Loading...' : 'Select a company'} />
        </SelectTrigger>
        <SelectContent>
          {companies.map((company) => (
            <SelectItem key={company.id} value={company.id.toString()}>
              {company.companyName}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}