'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '@/lib/api';
import { toast } from 'react-toastify';
import { useT, useLocale } from '@/i18n/I18nProvider';
import type { Cluster, ClusterPool } from '@/types';
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
import { useConfirm } from '@/components/confirm-modal';
import { Select } from '@/components/ui/select';

export default function AdminPoolsPage() {
  const t = useT();
  const p = t.dashboard.pools;
  const locale = useLocale();
  const strategyOption = (s: string) => (p.strategyOptions as Record<string, string>)[s] ?? s;
  const strategyShort = (s: string) => (p.strategyShort as Record<string, string>)[s] ?? s;
  const clusterStatusLabel = (s?: string) => (s && (p.clusterStatus as Record<string, string>)[s]) || s || '';
  const clusterHealthLabel = (h?: string) => (h && (p.clusterHealth as Record<string, string>)[h]) || h || p.clusterHealth.unknown;
  const queryClient = useQueryClient();
  const confirm = useConfirm();
  const [showForm, setShowForm] = useState(false);
  const [editingPool, setEditingPool] = useState<ClusterPool | null>(null);
  const [form, setForm] = useState({
    name: '',
    description: '',
    strategy: 'weighted-resource' as 'least-apps' | 'round-robin' | 'weighted-round-robin' | 'least-loaded' | 'weighted-resource' | 'region-based',
    clusterIds: [] as string[],
    isDefault: false,
    priority: 100,
  });

  const { data: pools = [], isLoading } = useQuery<ClusterPool[]>({
    queryKey: ['admin-pools'],
    queryFn: () => api.get('/clusters/pools').then((r) => r.data),
  });

  const { data: clusters = [] } = useQuery<Cluster[]>({
    queryKey: ['admin-clusters'],
    queryFn: () => api.get('/clusters').then((r) => r.data),
  });

  const createMutation = useMutation({
    mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
      toast.success(p.poolCreated);
      resetForm();
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.message || p.createFailed);
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: typeof form }) =>
      api.patch(`/clusters/pools/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
      toast.success(p.poolUpdated);
      resetForm();
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.message || p.updateFailed);
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
      toast.success(p.poolDeleted);
    },
  });

  const resetForm = () => {
    setShowForm(false);
    setEditingPool(null);
    setForm({ name: '', description: '', strategy: 'weighted-resource', clusterIds: [], isDefault: false, priority: 100 });
  };

  const startEdit = (pool: ClusterPool) => {
    setEditingPool(pool);
    setForm({
      name: pool.name,
      description: pool.description || '',
      strategy: pool.strategy,
      clusterIds: pool.clusterIds,
      isDefault: pool.isDefault || false,
      priority: pool.priority || 100,
    });
    setShowForm(true);
  };

  const handleSubmit = () => {
    if (editingPool) {
      updateMutation.mutate({ id: editingPool.id, data: form });
    } else {
      createMutation.mutate(form);
    }
  };

  const toggleCluster = (clusterId: string) => {
    setForm((prev) => ({
      ...prev,
      clusterIds: prev.clusterIds.includes(clusterId)
        ? prev.clusterIds.filter((id) => id !== clusterId)
        : [...prev.clusterIds, clusterId],
    }));
  };

  const strategyIcon = (strategy: string) =>
    strategy === 'weighted-round-robin' || strategy === 'round-robin' ? (
      <RotateCw className="w-3 h-3" />
    ) : (
      <BarChart3 className="w-3 h-3" />
    );

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="page-header">
        <div>
          <h1 className="page-title">{p.title}</h1>
          <p className="page-subtitle">{p.subtitle}</p>
        </div>
        <button
          onClick={() => { showForm ? resetForm() : setShowForm(true); }}
          className={showForm ? 'btn-ghost' : 'btn-primary'}
        >
          {showForm ? <><X className="w-4 h-4 inline" /> {t.common.cancel}</> : `+ ${p.createPool}`}
        </button>
      </div>

      {/* Create/Edit Form */}
      {showForm && (
        <div className="card space-y-4 animate-slide-up">
          <h2 className="text-lg font-semibold text-gray-900">
            {editingPool ? p.editTitle.replace('{name}', editingPool.name) : p.createNewPool}
          </h2>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">{p.poolName}</label>
              <input
                className="input-field"
                placeholder="production-pool"
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">{p.strategy}</label>
              <Select
                size="md"
                ariaLabel={p.strategy}
                value={form.strategy}
                onChange={(v) => setForm({ ...form, strategy: v as any })}
                options={[
                  { value: 'weighted-resource', label: strategyOption('weighted-resource') },
                  { value: 'least-loaded', label: strategyOption('least-loaded') },
                  { value: 'weighted-round-robin', label: strategyOption('weighted-round-robin') },
                  { value: 'region-based', label: strategyOption('region-based') },
                  { value: 'least-apps', label: strategyOption('least-apps') },
                  { value: 'round-robin', label: strategyOption('round-robin') },
                ]}
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">{p.priority}</label>
              <input
                type="number"
                min={1}
                className="input-field"
                value={form.priority}
                onChange={(e) => setForm({ ...form, priority: Number(e.target.value) || 100 })}
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">{p.description}</label>
            <input
              className="input-field"
              placeholder={p.descriptionPlaceholder}
              value={form.description}
              onChange={(e) => setForm({ ...form, description: e.target.value })}
            />
          </div>

          <label className="flex items-center gap-2 text-sm text-gray-700">
            <input
              type="checkbox"
              checked={form.isDefault}
              onChange={(e) => setForm({ ...form, isDefault: e.target.checked })}
            />
            {p.useAsDefault}
          </label>

          {/* Cluster selection */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              {p.selectClusters.replace('{n}', String(form.clusterIds.length))}
            </label>
            {clusters.length === 0 ? (
              <p className="text-sm text-gray-400 py-4 text-center">
                {p.noClustersRegistered}
              </p>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {clusters.map((cluster) => {
                  const isSelected = form.clusterIds.includes(cluster.id);
                  return (
                    <button
                      key={cluster.id}
                      type="button"
                      onClick={() => toggleCluster(cluster.id)}
                      className={`p-3 rounded-xl border-2 text-left rtl:text-right transition-all ${
                        isSelected
                          ? 'border-primary-500 bg-primary-50 shadow-sm'
                          : 'border-gray-200 hover:border-gray-300'
                      }`}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-3 rtl:space-x-reverse">
                          <div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
                            isSelected ? 'border-primary-500 bg-primary-500' : 'border-gray-300'
                          }`}>
                            {isSelected && <span className="text-white text-xs">✓</span>}
                          </div>
                          <div>
                            <p className="font-semibold text-sm text-gray-900">
                              {cluster.name}
                              {cluster.isDefault && (
                                <span className="ml-2 rtl:ml-0 rtl:mr-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
                                  {p.defaultBadge}
                                </span>
                              )}
                            </p>
                            <p className="text-xs text-gray-500">
                              {cluster.provider || p.na} · {cluster.region || p.na} · {p.weight} {cluster.weight || 1}
                            </p>
                          </div>
                        </div>
                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                          cluster.status === 'active'
                            ? 'bg-green-100 text-green-700'
                            : 'bg-red-100 text-red-700'
                        }`}>
                          {clusterStatusLabel(cluster.status)}
                        </span>
                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                          cluster.healthStatus === 'healthy'
                            ? 'bg-green-100 text-green-700'
                            : cluster.healthStatus === 'degraded'
                            ? 'bg-yellow-100 text-yellow-700'
                            : cluster.healthStatus === 'unhealthy'
                            ? 'bg-red-100 text-red-700'
                            : 'bg-gray-100 text-gray-600'
                        }`}>
                          {clusterHealthLabel(cluster.healthStatus)}
                        </span>
                      </div>
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          <div className="flex space-x-3 rtl:space-x-reverse">
            <button
              onClick={handleSubmit}
              disabled={
                !form.name ||
                form.clusterIds.length === 0 ||
                createMutation.isPending ||
                updateMutation.isPending
              }
              className="btn-primary disabled:opacity-50"
            >
              {createMutation.isPending || updateMutation.isPending
                ? <><Clock className="w-4 h-4 inline animate-spin" /> {p.saving}</>
                : editingPool
                ? p.updatePool
                : p.createPool}
            </button>
            <button onClick={resetForm} className="btn-secondary">
              {t.common.cancel}
            </button>
          </div>
        </div>
      )}

      {/* Pool List */}
      {isLoading ? (
        <div className="space-y-3">
          {[1,2].map(i => (
            <div key={i} className="card space-y-3">
              <div className="flex items-center gap-3">
                <div className="skeleton h-5 w-32" />
                <div className="skeleton h-5 w-16 rounded-full" />
              </div>
              <div className="skeleton h-3 w-64" />
              <div className="flex gap-2">
                <div className="skeleton h-8 w-28 rounded-lg" />
                <div className="skeleton h-8 w-28 rounded-lg" />
              </div>
            </div>
          ))}
        </div>
      ) : pools.length === 0 ? (
        <div className="card text-center py-16">
          <Scale className="w-12 h-12 mx-auto text-gray-300 mb-4" />
          <p className="text-gray-600 font-medium">{p.noPools}</p>
          <p className="text-sm text-gray-400 mt-1">{p.noPoolsHint}</p>
        </div>
      ) : (
        <div className="grid gap-4">
          {pools.map((pool) => {
            const poolClusters = clusters.filter((c) => pool.clusterIds.includes(c.id));
            const activeClusters = poolClusters.filter((c) => c.status === 'active');
            return (
              <div key={pool.id} className="card">
                <div className="flex flex-col sm:flex-row sm:items-start gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap mb-2">
                      <h3 className="text-lg font-semibold text-gray-900">{pool.name}</h3>
                      <span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
                        {pool.isActive ? p.active : p.inactive}
                      </span>
                      <span className="badge badge-purple flex items-center gap-1">
                        {strategyIcon(pool.strategy)} {strategyShort(pool.strategy)}
                      </span>
                      {pool.isDefault && <span className="badge badge-blue">{p.defaultPool}</span>}
                      <span className="badge badge-gray">{p.priorityBadge.replace('{n}', String(pool.priority || 100))}</span>
                    </div>
                    {pool.description && (
                      <p className="text-sm text-gray-500 mb-3">{pool.description}</p>
                    )}

                    {/* Cluster chips */}
                    <div className="flex flex-wrap gap-2">
                      {poolClusters.length > 0 ? poolClusters.map((cluster) => (
                        <div
                          key={cluster.id}
                          className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium ${
                            cluster.status === 'active'
                              ? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
                              : 'bg-red-50 text-red-700 border border-red-200'
                          }`}
                        >
                          <span>{cluster.status === 'active' ? <CheckCircle className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}</span>
                          <span>{cluster.name}</span>
                          <span className="text-gray-400">
                            ({cluster.provider || p.na} · {cluster.region || p.na} · {p.weight} {cluster.weight || 1} · {clusterHealthLabel(cluster.healthStatus)})
                          </span>
                        </div>
                      )) : (
                        <p className="text-xs text-gray-400">{p.noClustersInPool}</p>
                      )}
                    </div>

                    <p className="text-xs text-gray-400 mt-2">
                      {p.clustersActive
                        .replace('{active}', String(activeClusters.length))
                        .replace('{total}', String(poolClusters.length))
                        .replace('{date}', new Date(pool.createdAt).toLocaleDateString(locale))}
                    </p>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <button
                      onClick={() => startEdit(pool)}
                      className="btn-ghost text-sm"
                    >
                      <Pencil className="w-3 h-3 inline" /> {p.edit}
                    </button>
                    <button
                      onClick={async () => {
                        const ok = await confirm({
                          title: p.deletePoolTitle.replace('{name}', pool.name),
                          message: p.deletePoolMessage,
                          confirmText: t.common.delete,
                          variant: 'danger',
                        });
                        if (ok) deleteMutation.mutate(pool.id);
                      }}
                      className="text-sm text-red-600 hover:text-red-800"
                    >
                      {p.remove}
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}