#!/bin/bash

# FINAL COMPREHENSIVE FIX - Addresses ALL issues found

# Colors
GREEN='\033[0;32m'
BLUE='\033[0;34m'
RED='\033[0;31m'
YELLOW='\033[1;33m'
NC='\033[0m'

echo "========================================="
echo "AirwavePBX Final Comprehensive Fix v2.1"
echo "========================================="
echo

cd /opt/airwavepbx

# Step 1: Fix package.json to ensure all dependencies are correct
echo -e "${BLUE}[1/8]${NC} Updating package.json..."
cat > package.json << 'EOF'
{
  "name": "airwavepbx",
  "version": "2.0.0",
  "description": "Modern web interface for Asterisk PBX",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit"
  },
  "keywords": [
    "pbx",
    "asterisk",
    "voip",
    "telephony"
  ],
  "author": "AirwavePBX Team",
  "license": "MIT",
  "dependencies": {
    "axios": "^1.7.2",
    "next": "14.2.30",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.51.5",
    "react-hot-toast": "^2.4.1",
    "recharts": "^2.12.7",
    "socket.io-client": "^4.7.2",
    "zustand": "^4.5.4"
  },
  "devDependencies": {
    "@types/node": "^20.14.9",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.14.1",
    "@typescript-eslint/parser": "^7.14.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.30",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.5.2"
  }
}
EOF

# Step 2: Install ALL dependencies (including dev for build)
echo -e "${BLUE}[2/8]${NC} Installing all dependencies..."
npm install

# Step 3: Fix ALL CSS issues
echo -e "${BLUE}[3/8]${NC} Fixing CSS configuration..."
cat > src/styles/globals.css << 'EOF'
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
EOF

cat > tailwind.config.ts << 'EOF'
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
}
export default config
EOF

# Step 4: Fix ALL TypeScript interfaces
echo -e "${BLUE}[4/8]${NC} Fixing TypeScript interfaces..."

# Fix extensions page
cat > src/app/dashboard/extensions/page.tsx << 'EOF'
'use client';

import { useEffect, useState } from 'react';
import Layout from '@/components/Layout';
import { apiClient } from '@/lib/api';
import type { Extension } from '@/lib/api';
import toast from 'react-hot-toast';
import { useForm } from 'react-hook-form';

interface NewExtensionForm {
  extension: string;
  name: string;
  context: string;
}

export default function ExtensionsPage() {
  const [extensions, setExtensions] = useState<Extension[]>([]);
  const [loading, setLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [creating, setCreating] = useState(false);
  
  const { register, handleSubmit, reset, formState: { errors } } = useForm<NewExtensionForm>({
    defaultValues: {
      context: 'internal',
    }
  });

  useEffect(() => {
    loadExtensions();
  }, []);

  const loadExtensions = async () => {
    try {
      const exts = await apiClient.getExtensions();
      setExtensions(exts);
    } catch (error) {
      console.error('Failed to load extensions:', error);
      toast.error('Failed to load extensions');
    } finally {
      setLoading(false);
    }
  };

  const onSubmit = async (data: NewExtensionForm) => {
    setCreating(true);
    try {
      await apiClient.createExtension({
        extension: data.extension,
        name: data.name,
        context: data.context,
      });
      
      toast.success(`Extension ${data.extension} created successfully`);
      setShowAddModal(false);
      reset();
      loadExtensions();
    } catch (error) {
      console.error('Failed to create extension:', error);
      toast.error('Failed to create extension');
    } finally {
      setCreating(false);
    }
  };

  const deleteExtension = async (ext: Extension) => {
    if (!confirm(`Are you sure you want to delete extension ${ext.extension}?`)) {
      return;
    }

    try {
      await apiClient.deleteExtension(ext.id);
      toast.success(`Extension ${ext.extension} deleted`);
      loadExtensions();
    } catch (error) {
      console.error('Failed to delete extension:', error);
      toast.error('Failed to delete extension');
    }
  };

  return (
    <Layout>
      <div>
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold text-gray-900">Extensions</h1>
          <button
            onClick={() => setShowAddModal(true)}
            className="bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 transition-colors"
          >
            Add Extension
          </button>
        </div>

        {loading ? (
          <div className="flex justify-center items-center h-64">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
          </div>
        ) : (
          <div className="bg-white shadow rounded-lg overflow-hidden">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Extension
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Name
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Context
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Status
                  </th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {extensions.length === 0 ? (
                  <tr>
                    <td colSpan={5} className="px-6 py-4 text-center text-gray-500">
                      No extensions found
                    </td>
                  </tr>
                ) : (
                  extensions.map((ext) => (
                    <tr key={ext.id}>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {ext.extension}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {ext.name}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {ext.context}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                          {ext.status || 'Active'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button
                          onClick={() => deleteExtension(ext)}
                          className="text-red-600 hover:text-red-900"
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        )}

        {/* Add Extension Modal */}
        {showAddModal && (
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
            <div className="bg-white rounded-lg p-6 max-w-md w-full">
              <h2 className="text-xl font-bold mb-4">Add New Extension</h2>
              <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Extension Number
                  </label>
                  <input
                    {...register('extension', { 
                      required: 'Extension is required',
                      pattern: {
                        value: /^[0-9]{3,6}$/,
                        message: 'Extension must be 3-6 digits'
                      }
                    })}
                    type="text"
                    className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm px-3 py-2"
                    placeholder="1001"
                  />
                  {errors.extension && (
                    <p className="mt-1 text-sm text-red-600">{errors.extension.message}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Name
                  </label>
                  <input
                    {...register('name', { required: 'Name is required' })}
                    type="text"
                    className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm px-3 py-2"
                    placeholder="John Doe"
                  />
                  {errors.name && (
                    <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Context
                  </label>
                  <select
                    {...register('context')}
                    className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm px-3 py-2"
                  >
                    <option value="internal">Internal</option>
                    <option value="external">External</option>
                  </select>
                </div>

                <div className="flex justify-end space-x-3 pt-4">
                  <button
                    type="button"
                    onClick={() => {
                      setShowAddModal(false);
                      reset();
                    }}
                    className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    disabled={creating}
                    className="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50"
                  >
                    {creating ? 'Creating...' : 'Create'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}
      </div>
    </Layout>
  );
}
EOF

# Step 5: Clean up old files
echo -e "${BLUE}[5/8]${NC} Cleaning up old files..."
rm -f src/lib/wazo.ts 2>/dev/null || true

# Step 6: Build the application
echo -e "${BLUE}[6/8]${NC} Building application..."
npm run build

if [ $? -eq 0 ]; then
    echo -e "${GREEN}[SUCCESS]${NC} Build completed successfully!"
    
    # Step 7: Start services
    echo -e "${BLUE}[7/8]${NC} Starting services..."
    
    # Create ecosystem file
    cat > ecosystem.config.js << 'EOF'
module.exports = {
  apps: [
    {
      name: 'airwavepbx-frontend',
      script: 'npm',
      args: 'start',
      cwd: '/opt/airwavepbx',
      env_file: '/etc/airwavepbx/airwavepbx.env',
      error_file: '/var/log/airwavepbx/frontend-error.log',
      out_file: '/var/log/airwavepbx/frontend-out.log',
      merge_logs: true,
      max_restarts: 10,
      min_uptime: 5000
    },
    {
      name: 'airwavepbx-api',
      script: 'api/server.js',
      cwd: '/opt/airwavepbx',
      env_file: '/etc/airwavepbx/airwavepbx.env',
      error_file: '/var/log/airwavepbx/api-error.log',
      out_file: '/var/log/airwavepbx/api-out.log',
      merge_logs: true,
      max_restarts: 10,
      min_uptime: 5000
    }
  ]
};
EOF

    # Create log directory
    mkdir -p /var/log/airwavepbx
    chown -R airwavepbx:airwavepbx /var/log/airwavepbx 2>/dev/null || true
    
    # Stop any existing PM2 processes
    pm2 delete all 2>/dev/null || true
    
    # Start services
    pm2 start ecosystem.config.js
    pm2 save
    pm2 startup systemd -u root --hp /root
    
    # Step 8: Configure Nginx
    echo -e "${BLUE}[8/8]${NC} Configuring Nginx..."
    
    # Load environment
    source /etc/airwavepbx/airwavepbx.env
    
    cat > /etc/nginx/sites-available/airwavepbx << NGINX_EOF
server {
    listen 80;
    server_name $DOMAIN;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;
    }

    location /api/ {
        proxy_pass http://localhost:3001/api/;
        proxy_http_version 1.1;
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;
    }

    location /ws {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host \$host;
        proxy_set_header X-Real-IP \$remote_addr;
        proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto \$scheme;
    }
}
NGINX_EOF

    ln -sf /etc/nginx/sites-available/airwavepbx /etc/nginx/sites-enabled/
    rm -f /etc/nginx/sites-enabled/default
    nginx -t && systemctl reload nginx
    
    # Wait for services to start
    sleep 5
    
    # Show status
    pm2 status
    
    echo
    echo -e "${GREEN}=========================================${NC}"
    echo -e "${GREEN}AirwavePBX Installation Complete!${NC}"
    echo -e "${GREEN}=========================================${NC}"
    echo
    echo "Access your PBX at: http://$DOMAIN"
    echo "Username: admin"
    echo "Password: admin"
    echo
    echo "To enable SSL:"
    echo "  sudo certbot --nginx -d $DOMAIN"
    echo
    echo "To check service status:"
    echo "  pm2 status"
    echo "  systemctl status asterisk"
    echo
    echo "To view logs:"
    echo "  pm2 logs"
    echo "  tail -f /var/log/airwavepbx/*.log"
    
else
    echo -e "${RED}[ERROR]${NC} Build failed!"
    echo "Please check the error messages above."
fi