import { useAddPosition } from '../api/useAddPosition';
import { useAddPositionForm } from '../model/useAddPositionForm';

const inputStyle: React.CSSProperties = {
  padding: '8px 12px',
  border: '1px solid #e0e0e0',
  borderRadius: 'var(--border-radius)',
  fontSize: 14,
};

export function AddPositionForm({ portfolioId }: { portfolioId: number }) {
  const addPosition = useAddPosition(portfolioId);
  const form = useAddPositionForm();

  function handleAddPosition() {
    if (!form.newSecid.trim() || !parseInt(form.newQty, 10)) return;
    addPosition.mutate(
      {
        secid: form.newSecid.trim().toUpperCase(),
        quantity: parseInt(form.newQty, 10),
        buyPrice: form.newPrice ? parseFloat(form.newPrice) : undefined,
        buyDate: form.newDate || undefined,
      },
      {
        onSuccess: () => {
          form.setShowAddForm(false);
          form.reset();
        },
      },
    );
  }

  return (
    <div
      style={{
        marginTop: 12,
        padding: 16,
        background: 'var(--color-surface)',
        border: '1px solid #e0e0e0',
        borderRadius: 'var(--border-radius)',
        display: 'flex',
        gap: 12,
        alignItems: 'flex-end',
      }}
    >
      <div>
        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
          Тикер
        </label>
        <input
          value={form.newSecid}
          onChange={(e) => form.setNewSecid(e.target.value)}
          placeholder="SBER"
          style={{ ...inputStyle, width: 120 }}
        />
      </div>
      <div>
        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
          Количество
        </label>
        <input
          type="number"
          min={1}
          value={form.newQty}
          onChange={(e) => form.setNewQty(e.target.value)}
          style={{ ...inputStyle, width: 100 }}
        />
      </div>
      <div>
        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
          Цена покупки
        </label>
        <input
          type="number"
          step="0.01"
          value={form.newPrice}
          onChange={(e) => form.setNewPrice(e.target.value)}
          placeholder="0.00"
          style={{ ...inputStyle, width: 120 }}
        />
      </div>
      <div>
        <label style={{ display: 'block', fontSize: 12, fontWeight: 600, marginBottom: 4 }}>
          Дата покупки
        </label>
        <input
          type="date"
          value={form.newDate}
          onChange={(e) => form.setNewDate(e.target.value)}
          style={{ ...inputStyle, width: 150 }}
        />
      </div>
      <button
        onClick={handleAddPosition}
        disabled={addPosition.isPending}
        style={{
          padding: '8px 16px',
          background: 'var(--color-primary)',
          color: '#fff',
          border: 'none',
          borderRadius: 'var(--border-radius)',
          fontSize: 13,
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        Добавить
      </button>
    </div>
  );
}