'use client'

import { useEffect, useState } from 'react'
import { getSettings, updateSettings } from '@/app/actions'
import { toast } from 'sonner'
import { Loader2, Save, MessageSquare, MessageCircle, AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'

export default function IntegrationsPage() {
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [settings, setSettings] = useState({
    MATTERMOST_NOTIF_ENABLED: 'false',
    MATTERMOST_BOT_TOKEN: '',
    MATTERMOST_API_URL: '',
    MATTERMOST_WEBHOOK_URL: '',
    MATTERMOST_TEMPLATE: '',
    WHATSAPP_TEMPLATE: '',
  })

  useEffect(() => {
    const fetchSettings = async () => {
      const data = await getSettings()
      if (data) {
        setSettings({
          MATTERMOST_NOTIF_ENABLED: data.MATTERMOST_NOTIF_ENABLED || 'false',
          MATTERMOST_BOT_TOKEN: data.MATTERMOST_BOT_TOKEN || '',
          MATTERMOST_API_URL: data.MATTERMOST_API_URL || '',
          MATTERMOST_WEBHOOK_URL: data.MATTERMOST_WEBHOOK_URL || '',
          MATTERMOST_TEMPLATE:
            data.MATTERMOST_TEMPLATE ||
            'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}',
          WHATSAPP_TEMPLATE:
            data.WHATSAPP_TEMPLATE ||
            'Halo tim! Lagi ada orderan open nih untuk {title}. Mumpung belum di-checkout, yang mau ikutan nitip bisa langsung cek ke sini ya: {url}',
        })
      }
      setLoading(false)
    }
    fetchSettings()
  }, [])

  const handleChange = (key: string, value: string) => {
    setSettings((prev) => ({ ...prev, [key]: value }))
  }

  const handleSave = async () => {
    setSaving(true)
    const res = await updateSettings(settings)
    if (res.success) {
      toast.success('Berhasil Disimpan', {
        description: 'Pengaturan integrasi berhasil disimpan!',
        duration: 3000,
      })
    } else {
      toast.error('Gagal', {
        description: 'Gagal menyimpan pengaturan',
        duration: 3000,
      })
    }
    setSaving(false)
  }

  if (loading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
      </div>
    )
  }

  return (
    <div className="space-y-8 p-6">
      <div>
        <h2 className="text-xl font-bold text-slate-900 dark:text-white">Integrasi & Sharing</h2>
        <p className="mt-1 text-xs text-slate-500">
          Konfigurasi endpoint API dan template pesan otomatis.
        </p>
      </div>

      <div className="max-w-3xl space-y-6">
        {/* Mattermost Section */}
        <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
          <div className="flex items-center gap-2 font-black text-indigo-600 dark:text-indigo-400">
            <MessageSquare className="h-5 w-5" />
            <h3>Konfigurasi Mattermost</h3>
          </div>
          <p className="text-xs text-slate-500">
            Atur integrasi Mattermost. Bagian atas untuk Notifikasi Personal (DM) ke Kreator, sedangkan bagian bawah untuk fitur Share (Broadcast) PO menggunakan Webhook.
          </p>

          <div className="flex flex-row items-start space-x-3 space-y-0 rounded-md border border-slate-200 p-4 dark:border-slate-800 bg-white dark:bg-slate-950">
            <Checkbox
              id="mattermostNotifEnabled"
              checked={settings.MATTERMOST_NOTIF_ENABLED === 'true'}
              onCheckedChange={(checked) => handleChange('MATTERMOST_NOTIF_ENABLED', checked ? 'true' : 'false')}
            />
            <div className="space-y-1 leading-none w-full">
              <Label htmlFor="mattermostNotifEnabled" className="text-sm font-bold">
                Aktifkan DM Kreator saat Update Pesanan (Menggunakan Bot API)
              </Label>
              <p className="text-xs text-slate-500 mb-3">
                Kirim notifikasi otomatis ke channel/DM kreator PO tiap ada update pesanan. (Membutuhkan Bot Token).
              </p>
              
              {settings.MATTERMOST_NOTIF_ENABLED === 'true' && (
                <div className="space-y-4 mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
                  <div className="space-y-1.5">
                    <Label className="text-[11px] font-bold text-slate-700 uppercase">API URL POST</Label>
                    <Input
                      value={settings.MATTERMOST_API_URL}
                      onChange={(e) => handleChange('MATTERMOST_API_URL', e.target.value)}
                      className="h-10 rounded-xl"
                      placeholder="https://mattermost.domain.com/api/v4/posts"
                    />
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-[11px] font-bold text-slate-700 uppercase">Bot Bearer Token</Label>
                    <Input
                      type="password"
                      value={settings.MATTERMOST_BOT_TOKEN}
                      onChange={(e) => handleChange('MATTERMOST_BOT_TOKEN', e.target.value)}
                      className="h-10 rounded-xl"
                      placeholder="Masukan Bearer Token"
                    />
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="space-y-1.5 mt-6 pt-6 border-t border-slate-200 dark:border-slate-800">
            <h4 className="text-sm font-bold text-slate-800 dark:text-slate-200 mb-3">Broadcast via Incoming Webhook</h4>
            <Label className="text-xs font-bold text-slate-700 uppercase">Webhook URL</Label>
            <Input
              value={settings.MATTERMOST_WEBHOOK_URL}
              onChange={(e) => handleChange('MATTERMOST_WEBHOOK_URL', e.target.value)}
              className="h-11 rounded-xl bg-white dark:bg-slate-950"
              placeholder="https://mattermost.yourdomain.com/hooks/xxx"
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
            <Textarea
              value={settings.MATTERMOST_TEMPLATE}
              onChange={(e) => handleChange('MATTERMOST_TEMPLATE', e.target.value)}
              className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
              placeholder="Template pesan..."
            />
            <p className="flex items-center gap-1 text-[10px] text-slate-500">
              <AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
            </p>
          </div>
        </div>

        {/* WhatsApp Section */}
        <div className="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/50 p-5 dark:border-slate-800 dark:bg-slate-900/50">
          <div className="flex items-center gap-2 font-black text-emerald-600 dark:text-emerald-400">
            <MessageCircle className="h-5 w-5" />
            <h3>WhatsApp Share Template</h3>
          </div>
          <p className="text-xs text-slate-500">
            Atur template teks default saat user menekan tombol share ke WhatsApp.
          </p>

          <div className="space-y-1.5">
            <Label className="text-xs font-bold text-slate-700 uppercase">Pesan Template</Label>
            <Textarea
              value={settings.WHATSAPP_TEMPLATE}
              onChange={(e) => handleChange('WHATSAPP_TEMPLATE', e.target.value)}
              className="min-h-[100px] rounded-xl bg-white dark:bg-slate-950"
              placeholder="Template pesan..."
            />
            <p className="flex items-center gap-1 text-[10px] text-slate-500">
              <AlertCircle className="h-3 w-3" /> Gunakan variabel: {'{title}'}, {'{url}'}
            </p>
          </div>
        </div>

        <div className="pt-2">
          <Button
            onClick={handleSave}
            disabled={saving}
            className="h-11 w-full rounded-xl bg-[#1B2CC1] px-8 font-bold text-white shadow-md hover:bg-[#15229E] sm:w-auto"
          >
            {saving ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Save className="mr-2 h-4 w-4" />
            )}
            Simpan Konfigurasi
          </Button>
        </div>
      </div>
    </div>
  )
}