'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 type { Cluster, ClusterPool } from '@/types';
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
import { useConfirm } from '@/components/confirm-modal';

export default function AdminPoolsPage() {
  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-resource',
    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('Cluster pool created!');
      resetForm();
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.message || 'Failed to create pool');
    },
  });

  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('Cluster pool updated!');
      resetForm();
    },
    onError: (err: any) => {
      toast.error(err?.response?.data?.message || 'Failed to update pool');
    },
  });

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

  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],
    }));
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="page-header">
        <div>
          <h1 className="page-title">Cluster Pools</h1>
          <p className="page-subtitle">
            Load-balanced groups of clusters for automatic app distribution
          </p>
        </div>
        <button
          onClick={() => { showForm ? resetForm() : setShowForm(true); }}
          className={showForm ? 'btn-ghost' : 'btn-primary'}
        >
          {showForm ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ Create Pool'}
        </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 ? `Edit "${editingPool.name}"` : 'Create New Cluster Pool'}
          </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">Pool Name</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">Strategy</label>
              <select
                className="input-field"
                value={form.strategy}
                onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
              >
                <option value="weighted-resource">Weighted Resource — prefer healthy capacity and higher weights</option>
                <option value="least-apps">Least Apps — deploy to cluster with fewest apps</option>
                <option value="round-robin">Round Robin — rotate across clusters evenly</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">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">Description</label>
            <input
              className="input-field"
              placeholder="Load-balanced pool for production workloads"
              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 })}
            />
            Use as default allocator pool
          </label>

          {/* Cluster selection */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              Select Clusters ({form.clusterIds.length} selected)
            </label>
            {clusters.length === 0 ? (
              <p className="text-sm text-gray-400 py-4 text-center">
                No clusters registered. Add clusters first.
              </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 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">
                          <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 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">
                                  Default
                                </span>
                              )}
                            </p>
                            <p className="text-xs text-gray-500">
                              {cluster.provider || 'Unknown'} · {cluster.region || 'N/A'} · 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'
                        }`}>
                          {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'
                        }`}>
                          {cluster.healthStatus || 'unknown'}
                        </span>
                      </div>
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          <div className="flex space-x-3">
            <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" /> Saving...</>
                : editingPool
                ? 'Update Pool'
                : 'Create Pool'}
            </button>
            <button onClick={resetForm} className="btn-secondary">
              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">No cluster pools created yet</p>
          <p className="text-sm text-gray-400 mt-1">
            Create a pool to enable load-balanced deployment across multiple clusters
          </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 ? 'Active' : 'Inactive'}
                      </span>
                      <span className="badge badge-purple flex items-center gap-1">
                        {pool.strategy === 'weighted-resource'
                          ? <><BarChart3 className="w-3 h-3" /> Weighted Resource</>
                          : pool.strategy === 'least-apps'
                          ? <><BarChart3 className="w-3 h-3" /> Least Apps</>
                          : <><RotateCw className="w-3 h-3" /> Round Robin</>}
                      </span>
                      {pool.isDefault && <span className="badge badge-blue">Default Pool</span>}
                      <span className="badge badge-gray">Priority {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 || 'N/A'} · {cluster.region || 'N/A'} · weight {cluster.weight || 1} · {cluster.healthStatus || 'unknown'})
                          </span>
                        </div>
                      )) : (
                        <p className="text-xs text-gray-400">No clusters in this pool (they may have been deleted)</p>
                      )}
                    </div>

                    <p className="text-xs text-gray-400 mt-2">
                      {activeClusters.length}/{poolClusters.length} clusters active · Created {new Date(pool.createdAt).toLocaleDateString()}
                    </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" /> Edit
                    </button>
                    <button
                      onClick={async () => {
                        const ok = await confirm({
                          title: `Delete Pool "${pool.name}"`,
                          message: 'Apps already assigned to this pool will keep their current cluster.',
                          confirmText: 'Delete',
                          variant: 'danger',
                        });
                        if (ok) deleteMutation.mutate(pool.id);
                      }}
                      className="text-sm text-red-600 hover:text-red-800"
                    >
                      Remove
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}