'use client';

import FormInput from '@/components/ui/FormInput';
import FormSelect from '@/components/ui/FormSelect';
import { BROKER_OPTIONS, STATUS_OPTIONS } from '@/constants/brokers';

export default function BrokerForm({ formData, onChange, mode, selectedBroker }) {
  return (
    <>
      <p className="text-sm text-gray-500 mb-6">
        Choose your preferred exchange to add a broker.
      </p>

      <div className="space-y-4 mb-6">
        <h3 className="font-semibold text-gray-900">Broker Details</h3>
        
        <FormInput
          label="Name"
          value={formData.name}
          onChange={(val) => onChange({ ...formData, name: val })}
          placeholder="Enter a Name"
          required
        />

        <FormSelect
          label="Select Broker"
          value={formData.broker}
          onChange={(val) => onChange({ ...formData, broker: val })}
          options={BROKER_OPTIONS}
          placeholder="Select Broker"
        />

        <FormInput
          label="Balance"
          value={formData.balance}
          onChange={(val) => onChange({ ...formData, balance: val })}
          placeholder="$0.00"
          type="text"
        />

        <FormSelect
          label="Status"
          value={formData.status}
          onChange={(val) => onChange({ ...formData, status: val })}
          options={STATUS_OPTIONS}
          placeholder="Select Status"
        />
      </div>

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="font-semibold text-gray-900">API Details</h3>
          {mode === 'edit' ? (
            <button className="text-sm text-teal-500 hover:text-teal-600">
              Update Key 🔄
            </button>
          ) : (
            <button className="text-sm text-teal-500 hover:text-teal-600">
              Help me connect to API
            </button>
          )}
        </div>

        <FormInput
          label="API Key"
          value={formData.apiKey}
          onChange={(val) => onChange({ ...formData, apiKey: val })}
          placeholder="api_key_1234567890abcdef"
          helperText={
            mode === 'edit' && selectedBroker 
              ? `Date Created: ${selectedBroker.dateCreated}` 
              : ''
          }
        />

        <FormInput
          label="Secret API Key"
          value={formData.secretKey}
          onChange={(val) => onChange({ ...formData, secretKey: val })}
          placeholder="sk_412345LH..."
          type="password"
        />
      </div>
    </>
  );
}