'use client';

import { Plus, Pencil, Trash2 } from 'lucide-react';
import { CompanySettings } from '../page';

interface PartsSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
  showAddPolicy: boolean;
  setShowAddPolicy: (show: boolean) => void;
  newPolicyName: string;
  setNewPolicyName: (name: string) => void;
  newPolicyDesc: string;
  setNewPolicyDesc: (desc: string) => void;
  editPolicyDescHtml: string;
  setEditPolicyDescHtml: (desc: string) => void;
  editingPolicy: { tab: string; index: number } | null;
  setEditingPolicy: (policy: { tab: string; index: number } | null) => void;
  editPolicyName: string;
  setEditPolicyName: (name: string) => void;
  editPolicyDesc: string;
  setEditPolicyDesc: (desc: string) => void;
}

export default function PartsSettings({
  settings,
  setSettings,
  showAddPolicy,
  setShowAddPolicy,
  newPolicyName,
  setNewPolicyName,
  newPolicyDesc,
  setNewPolicyDesc,
  editPolicyDescHtml,
  setEditPolicyDescHtml,
  editingPolicy,
  setEditingPolicy,
  editPolicyName,
  setEditPolicyName,
  editPolicyDesc,
  setEditPolicyDesc,
}: PartsSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-800">EV Parts</h3>
        <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
          <Plus className="w-3 h-3" /> Add Part
        </button>
      </div>

      {showAddPolicy && (
        <div className="p-3 bg-white rounded-lg border border-blue-200">
          <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Part Name" />
          <div className="grid grid-cols-2 gap-2 mb-2">
            <input type="number" value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
            <input type="number" value={editPolicyDescHtml} onChange={(e) => setEditPolicyDescHtml(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
          </div>
          <div className="flex gap-2">
            <button onClick={() => {
              if (!newPolicyName.trim()) return;
              const newId = 'PRT-' + String(settings.parts.length + 1).padStart(3, '0');
              setSettings({ ...settings, parts: [...settings.parts, { id: newId, name: newPolicyName, buyingPrice: Number(newPolicyDesc), sellingPrice: Number(editPolicyDescHtml) }] });
              setNewPolicyName('');
              setNewPolicyDesc('');
              setEditPolicyDescHtml('');
              setShowAddPolicy(false);
            }} className="px-3 py-1.5 bg-blue-600 text-white rounded text-sm">Add</button>
            <button onClick={() => { setNewPolicyName(''); setNewPolicyDesc(''); setEditPolicyDescHtml(''); setShowAddPolicy(false); }} className="px-3 py-1.5 bg-slate-200 text-slate-600 rounded text-sm">Cancel</button>
          </div>
        </div>
      )}

      <div className="space-y-2">
        {settings.parts.map((part, i) => (
          <div key={part.id} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
            {editingPolicy?.tab === 'parts' && editingPolicy?.index === i ? (
              <div className="space-y-2">
                <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Part Name" />
                <div className="grid grid-cols-2 gap-2">
                  <input type="number" value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
                  <input type="number" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
                </div>
                <div className="flex gap-2">
                  <button onClick={() => {
                    const updated = [...settings.parts];
                    updated[i] = { ...part, name: editPolicyName, buyingPrice: Number(editPolicyDesc), sellingPrice: Number(newPolicyName) };
                    setSettings({ ...settings, parts: updated });
                    setEditingPolicy(null);
                    setEditPolicyName('');
                    setEditPolicyDesc('');
                    setNewPolicyName('');
                  }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
                  <button onClick={() => { setEditingPolicy(null); setEditPolicyName(''); setEditPolicyDesc(''); setNewPolicyName(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                </div>
              </div>
            ) : (
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <span className="text-sm font-medium text-slate-700">{part.name}</span>
                    <span className="text-xs text-slate-400">({part.id})</span>
                  </div>
                  <div className="flex items-center gap-4 mt-1">
                    <span className="text-xs text-slate-500">Buying: <span className="text-green-600">৳{part.buyingPrice}</span></span>
                    <span className="text-xs text-slate-500">Selling: <span className="text-amber-600">৳{part.sellingPrice}</span></span>
                  </div>
                </div>
                <div className="flex items-center gap-1 ml-2">
                  <button onClick={() => { setEditingPolicy({ tab: 'parts', index: i }); setEditPolicyName(part.name); setEditPolicyDesc(String(part.buyingPrice)); setNewPolicyName(String(part.sellingPrice)); }} className="p-1 text-slate-400 hover:text-blue-600">
                    <Pencil className="w-3.5 h-3.5" />
                  </button>
                  <button onClick={() => {
                    const updated = settings.parts.filter((_, idx) => idx !== i);
                    setSettings({ ...settings, parts: updated });
                  }} className="p-1 text-slate-400 hover:text-red-600">
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
