'use client';

import { Upload } from 'lucide-react';
import { CompanySettings } from '../page';

interface GeneralSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
}

export default function GeneralSettings({ settings, setSettings }: GeneralSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <h3 className="text-lg font-semibold text-slate-800">General Information</h3>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">Company Name</label>
          <input
            type="text"
            value={settings.name}
            onChange={(e) => setSettings({ ...settings, name: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Short Name</label>
          <input
            type="text"
            value={settings.shortName}
            onChange={(e) => setSettings({ ...settings, shortName: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Tagline</label>
          <input
            type="text"
            value={settings.tagLine}
            onChange={(e) => setSettings({ ...settings, tagLine: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Website</label>
          <input
            type="text"
            value={settings.website}
            onChange={(e) => setSettings({ ...settings, website: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Description</label>
        <textarea
          value={settings.description}
          onChange={(e) => setSettings({ ...settings, description: e.target.value })}
          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          rows={3}
        />
      </div>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">Email</label>
          <input
            type="email"
            value={settings.email}
            onChange={(e) => setSettings({ ...settings, email: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Phone</label>
          <input
            type="text"
            value={settings.phone}
            onChange={(e) => setSettings({ ...settings, phone: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Address</label>
        <textarea
          value={settings.address}
          onChange={(e) => setSettings({ ...settings, address: e.target.value })}
          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          rows={2}
        />
      </div>

      <div className="grid lg:grid-cols-3 gap-4">
        <div>
          <label className="text-sm text-slate-600">City</label>
          <input
            type="text"
            value={settings.city}
            onChange={(e) => setSettings({ ...settings, city: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Country</label>
          <input
            type="text"
            value={settings.country}
            onChange={(e) => setSettings({ ...settings, country: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Timezone</label>
          <select
            value={settings.timezone}
            onChange={(e) => setSettings({ ...settings, timezone: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          >
            <option value="Asia/Dhaka">Asia/Dhaka (GMT+6)</option>
            <option value="Asia/Kolkata">Asia/Kolkata (GMT+5:30)</option>
            <option value="UTC">UTC (GMT+0)</option>
          </select>
        </div>
      </div>

      <h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">Business Registration</h3>

      <div className="grid lg:grid-cols-3 gap-4">
        <div>
          <label className="text-sm text-slate-600">TIN Number</label>
          <input
            type="text"
            value={settings.tin}
            onChange={(e) => setSettings({ ...settings, tin: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">BIN Number</label>
          <input
            type="text"
            value={settings.bin}
            onChange={(e) => setSettings({ ...settings, bin: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Trade License</label>
          <input
            type="text"
            value={settings.tradeLicense}
            onChange={(e) => setSettings({ ...settings, tradeLicense: e.target.value })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Documents</label>
        <div className="mt-2 p-4 border-2 border-dashed border-slate-200 rounded-lg text-center hover:border-accent cursor-pointer">
          <Upload className="w-8 h-8 mx-auto text-slate-400" />
          <p className="text-sm text-slate-500 mt-1">Drop files here or click to upload</p>
          <p className="text-xs text-slate-400">PDF, JPG, PNG up to 10MB</p>
        </div>
      </div>
    </div>
  );
}
