import { useState, useEffect } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import toast from 'react-hot-toast'
import client from '../../../api/client'

// ── Helpers ───────────────────────────────────────────────────────────────────

function Toggle({ checked, onChange, disabled = false }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      style={{
        width: 44, height: 24, borderRadius: 999, border: 'none',
        cursor: disabled ? 'default' : 'pointer',
        background: checked ? '#16a34a' : '#d1d5db',
        position: 'relative', transition: 'background 150ms', flexShrink: 0,
        opacity: disabled ? 0.5 : 1,
      }}
    >
      <span style={{
        position: 'absolute', top: 3, left: checked ? 23 : 3,
        width: 18, height: 18, borderRadius: '50%', background: 'white',
        transition: 'left 150ms', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      }} />
    </button>
  )
}

function SectionTitle({ children }) {
  return (
    <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-3 mt-6 first:mt-0">
      {children}
    </h3>
  )
}

function SettingRow({ label, hint, children }) {
  return (
    <div className="flex items-start justify-between gap-6 py-3 border-b border-slate-100 last:border-0">
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-slate-700">{label}</p>
        {hint && <p className="text-xs text-slate-400 mt-0.5">{hint}</p>}
      </div>
      <div className="shrink-0">{children}</div>
    </div>
  )
}

// ── Main Component ────────────────────────────────────────────────────────────

export default function FiscalTab() {
  const queryClient = useQueryClient()
  const { data: settings, isLoading } = useQuery({
    queryKey: ['pos-settings'],
    queryFn: () => client.get('/api/settings/').then(r => r.data),
    staleTime: 30_000,
  })

  const val = (key) => settings?.[key]?.value ?? ''

  // Local state for folder paths (to show test result without saving first)
  const [outFolder, setOutFolder] = useState('')
  const [inFolder, setInFolder]   = useState('')
  const [testResult, setTestResult] = useState(null)
  const [testing, setTesting] = useState(false)

  // VAT groups state (parsed from JSON setting)
  const [vatGroups, setVatGroups] = useState([])
  // End message lines
  const [endLines, setEndLines] = useState(['', '', '', '', ''])

  useEffect(() => {
    if (!settings) return
    setOutFolder(val('fiscal.out_folder'))
    setInFolder(val('fiscal.in_folder'))
    try {
      const groups = JSON.parse(val('fiscal.vat_groups') || '[]')
      setVatGroups(Array.isArray(groups) ? groups : [])
    } catch { setVatGroups([]) }
    try {
      const lines = JSON.parse(val('fiscal.end_message') || '[]')
      const padded = [...lines, '', '', '', '', ''].slice(0, 5)
      setEndLines(padded)
    } catch { setEndLines(['', '', '', '', '']) }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [settings])

  const saveSetting = useMutation({
    mutationFn: ({ key, value }) => client.put(`/api/settings/${key}`, { value }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['pos-settings'] }),
  })

  function save(key, value) {
    saveSetting.mutate({ key, value }, {
      onError: () => toast.error(`Αποτυχία αποθήκευσης ${key}`),
    })
  }

  function saveAndToast(key, value, label) {
    saveSetting.mutate({ key, value }, {
      onSuccess: () => toast.success(`${label} αποθηκεύτηκε`),
      onError: () => toast.error('Αποτυχία αποθήκευσης'),
    })
  }

  async function testFolders() {
    setTesting(true)
    setTestResult(null)
    try {
      const res = await client.post('/api/fiscal/test-folders', {
        out_folder: outFolder,
        in_folder: inFolder,
      })
      setTestResult(res.data)
    } catch (e) {
      setTestResult({ ok: false, out_folder_error: String(e), in_folder_error: null })
    } finally {
      setTesting(false)
    }
  }

  function saveFolders() {
    save('fiscal.out_folder', outFolder)
    save('fiscal.in_folder', inFolder)
    toast.success('Φάκελοι αποθηκεύτηκαν')
    setTestResult(null)
  }

  // VAT group helpers
  function addVatGroup() {
    setVatGroups(prev => [...prev, { machine_id: '', friendly_name: '' }])
  }
  function removeVatGroup(i) {
    setVatGroups(prev => prev.filter((_, idx) => idx !== i))
  }
  function updateVatGroup(i, field, value) {
    setVatGroups(prev => prev.map((g, idx) => idx === i ? { ...g, [field]: value } : g))
  }
  function saveVatGroups() {
    const cleaned = vatGroups
      .filter(g => String(g.machine_id).trim() && g.friendly_name.trim())
      .map(g => ({ machine_id: parseInt(g.machine_id, 10), friendly_name: g.friendly_name.trim() }))
    saveAndToast('fiscal.vat_groups', JSON.stringify(cleaned), 'Ομάδες ΦΠΑ')
  }

  // End message helpers
  function updateEndLine(i, value) {
    setEndLines(prev => prev.map((l, idx) => idx === i ? value : l))
  }
  function saveEndMessage() {
    const cleaned = endLines.map(l => l.trim())
    saveAndToast('fiscal.end_message', JSON.stringify(cleaned), 'Μήνυμα τέλους')
  }

  if (isLoading) return <div className="text-sm text-slate-400 py-8 text-center">Φόρτωση…</div>

  const fiscalEnabled = val('fiscal.enabled') === 'true'

  return (
    <div className="max-w-xl space-y-1">

      {/* Master switch */}
      <div className="card px-5 py-4">
        <div className="flex items-center justify-between gap-4">
          <div>
            <p className="font-semibold text-slate-800">Φορολογική Εκτύπωση (ΦΗΜ)</p>
            <p className="text-xs text-slate-400 mt-0.5">
              Ενεργοποιεί αυτόματη αποστολή αποδείξεων στη Φορολογική Μηχανή κατά την πληρωμή
            </p>
          </div>
          <Toggle
            checked={fiscalEnabled}
            onChange={v => save('fiscal.enabled', v ? 'true' : 'false')}
          />
        </div>

        {fiscalEnabled && (
          <div className="mt-3 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-xs text-amber-800">
            Η ΦΗΜ είναι <strong>ενεργή</strong>. Κάθε πληρωμή στο PWA θα αποστέλλει αυτόματα απόδειξη.
            Βεβαιωθείτε ότι οι φάκελοι και οι ομάδες ΦΠΑ είναι σωστά ρυθμισμένα.
          </div>
        )}
      </div>

      {/* Driver type */}
      <div className="card px-5 divide-y divide-slate-100">
        <SectionTitle>Τύπος Προγράμματος Οδήγησης</SectionTitle>
        <SettingRow
          label="Τύπος ΦΗΜ"
          hint="Επί του παρόντος υποστηρίζεται μόνο TXT File (dTEC100extra)"
        >
          <select
            value={val('fiscal.type')}
            onChange={e => save('fiscal.type', e.target.value)}
            className="input text-sm h-9 pr-8"
          >
            <option value="txt_file">TXT File (dTEC100extra)</option>
          </select>
        </SettingRow>
      </div>

      {/* Folder paths */}
      <div className="card px-5 py-4 space-y-3">
        <SectionTitle>Φάκελοι Επικοινωνίας</SectionTitle>
        <p className="text-xs text-slate-500 -mt-2">
          Οι φάκελοι πρέπει να είναι προσβάσιμοι μέσα από το Docker container (mounted volume ή UNC path).
          <br />
          <span className="font-medium">OUT folder</span> = εκεί γράφει το Xenia (ο driver τα διαβάζει ως IN).
          <br />
          <span className="font-medium">IN folder</span> = εκεί γράφει ο driver τις απαντήσεις (το Xenia τις διαβάζει).
        </p>

        <div className="space-y-2">
          <div>
            <label className="text-xs font-medium text-slate-600 block mb-1">OUT Folder (Xenia → ΦΗΜ driver)</label>
            <input
              className="input w-full text-sm font-mono"
              placeholder="/mnt/fiscal/in"
              value={outFolder}
              onChange={e => setOutFolder(e.target.value)}
            />
          </div>
          <div>
            <label className="text-xs font-medium text-slate-600 block mb-1">IN Folder (ΦΗΜ driver → Xenia)</label>
            <input
              className="input w-full text-sm font-mono"
              placeholder="/mnt/fiscal/out"
              value={inFolder}
              onChange={e => setInFolder(e.target.value)}
            />
          </div>
        </div>

        <div className="flex gap-2 pt-1">
          <button
            onClick={testFolders}
            disabled={testing || !outFolder || !inFolder}
            className="btn btn-secondary text-sm px-4"
          >
            {testing ? 'Έλεγχος…' : 'Έλεγχος σύνδεσης'}
          </button>
          <button
            onClick={saveFolders}
            disabled={!outFolder || !inFolder}
            className="btn btn-primary text-sm px-4"
          >
            Αποθήκευση
          </button>
        </div>

        {testResult && (
          <div className={`rounded-lg border px-3 py-2 text-xs font-mono ${
            testResult.ok
              ? 'bg-green-50 border-green-200 text-green-800'
              : 'bg-red-50 border-red-200 text-red-800'
          }`}>
            {testResult.ok ? (
              <span>✓ Και οι δύο φάκελοι είναι προσβάσιμοι</span>
            ) : (
              <div className="space-y-1">
                {testResult.out_folder_error && <div>OUT: {testResult.out_folder_error}</div>}
                {testResult.in_folder_error  && <div>IN: {testResult.in_folder_error}</div>}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Clerk / EFTPOS IDs */}
      <div className="card px-5 divide-y divide-slate-100">
        <SectionTitle>Ρυθμίσεις Εντολών</SectionTitle>
        <SettingRow
          label="Clerk ID"
          hint="Κωδικός ταμία για εντολές CR / CD"
        >
          <input
            type="number" min="1"
            className="input w-20 text-sm text-center"
            value={val('fiscal.clerk_id')}
            onChange={e => save('fiscal.clerk_id', e.target.value)}
          />
        </SettingRow>
        <SettingRow
          label="EFTPOS ID"
          hint="Αριθμός τερματικού EFTPOS για εντολή CD (πληρωμή με κάρτα)"
        >
          <input
            type="number" min="1"
            className="input w-20 text-sm text-center"
            value={val('fiscal.eftpos_id')}
            onChange={e => save('fiscal.eftpos_id', e.target.value)}
          />
        </SettingRow>
      </div>

      {/* End message */}
      <div className="card px-5 py-4 space-y-3">
        <SectionTitle>Μήνυμα Τέλους Απόδειξης (FM)</SectionTitle>
        <p className="text-xs text-slate-500 -mt-2">
          Μέχρι 5 γραμμές κειμένου που εκτυπώνονται στο τέλος κάθε απόδειξης.
          Αφήστε κενές τις γραμμές που δεν θέλετε να χρησιμοποιήσετε.
        </p>
        {endLines.map((line, i) => (
          <div key={i} className="flex items-center gap-2">
            <span className="text-xs text-slate-400 w-4 text-right shrink-0">{i + 1}</span>
            <input
              className="input flex-1 text-sm font-mono uppercase"
              placeholder={`Γραμμή ${i + 1}…`}
              value={line}
              maxLength={40}
              onChange={e => updateEndLine(i, e.target.value)}
            />
          </div>
        ))}
        <button onClick={saveEndMessage} className="btn btn-primary text-sm px-4">
          Αποθήκευση μηνύματος
        </button>
      </div>

      {/* VAT Groups */}
      <div className="card px-5 py-4 space-y-3">
        <SectionTitle>Ομάδες ΦΠΑ ΦΗΜ</SectionTitle>
        <p className="text-xs text-slate-500 -mt-2">
          Ορίστε τις ομάδες ΦΠΑ όπως είναι προγραμματισμένες στη ΦΗΜ.
          Το <strong>ID ΦΗΜ</strong> είναι ο αριθμός που χρησιμοποιεί η μηχανή (π.χ. 1, 2, 3…).
          Θα χρησιμοποιηθούν κατά την ανάθεση σε προϊόντα.
        </p>

        {vatGroups.length === 0 && (
          <p className="text-xs text-slate-400 italic">Δεν έχουν οριστεί ομάδες ΦΠΑ ακόμα.</p>
        )}

        <div className="space-y-2">
          {vatGroups.map((g, i) => (
            <div key={i} className="flex items-center gap-2">
              <div className="flex flex-col gap-0.5">
                <span className="text-[10px] text-slate-400 font-medium">ID ΦΗΜ</span>
                <input
                  type="number" min="1"
                  className="input w-16 text-sm text-center"
                  placeholder="1"
                  value={g.machine_id}
                  onChange={e => updateVatGroup(i, 'machine_id', e.target.value)}
                />
              </div>
              <div className="flex flex-col flex-1 gap-0.5">
                <span className="text-[10px] text-slate-400 font-medium">Φιλικό όνομα</span>
                <input
                  className="input text-sm"
                  placeholder="π.χ. Νερό, Καφές, Αλκοόλ…"
                  value={g.friendly_name}
                  onChange={e => updateVatGroup(i, 'friendly_name', e.target.value)}
                />
              </div>
              <button
                onClick={() => removeVatGroup(i)}
                className="btn btn-danger text-xs px-2 py-1.5 min-h-0 h-8 mt-4 shrink-0"
              >
                ✕
              </button>
            </div>
          ))}
        </div>

        <div className="flex gap-2 pt-1">
          <button onClick={addVatGroup} className="btn btn-secondary text-sm px-3">
            + Προσθήκη ομάδας
          </button>
          {vatGroups.length > 0 && (
            <button onClick={saveVatGroups} className="btn btn-primary text-sm px-4">
              Αποθήκευση ομάδων
            </button>
          )}
        </div>
      </div>

    </div>
  )
}
