import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { AlertCircle, Check, Image as ImageIcon, Loader2, MapPin, Power, Save, Store, Upload } from 'lucide-react';
import { api, resolveMediaUrl } from '../../api';

interface Restaurant {
  id: string;
  owner_email: string;
  name: string;
  description: string;
  address: string;
  latitude: number;
  longitude: number;
  image_url: string | null;
  status: 'active' | 'closed';
}

interface RestaurantProfileFormProps {
  onRestaurantUpdated?: (restaurant: Restaurant) => void;
}

export default function RestaurantProfileForm({ onRestaurantUpdated }: RestaurantProfileFormProps) {
  const queryClient = useQueryClient();
  const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [uploading, setUploading] = useState(false);

  const [formData, setFormData] = useState({
    name: '',
    description: '',
    address: '',
    latitude: 37.7749,
    longitude: -122.4194,
    image_url: '',
    status: 'active' as 'active' | 'closed',
  });

  const { data, isLoading } = useQuery({
    queryKey: ['restaurant-me'],
    queryFn: async () => {
      const res = await api.get('/api/restaurants/me');
      return (res.data?.restaurant || null) as Restaurant | null;
    },
  });

  useEffect(() => {
    if (data) {
      setFormData({
        name: data.name || '',
        description: data.description || '',
        address: data.address || '',
        latitude: typeof data.latitude === 'number' ? data.latitude : 37.7749,
        longitude: typeof data.longitude === 'number' ? data.longitude : -122.4194,
        image_url: data.image_url || '',
        status: data.status || 'active',
      });
      if (onRestaurantUpdated) {
        onRestaurantUpdated(data);
      }
    }
  }, [data, onRestaurantUpdated]);

  const uploadMutation = useMutation({
    mutationFn: async (file: File) => {
      const fd = new FormData();
      fd.append('file', file);
      const res = await api.post('/api/upload', fd, {
        headers: { 'Content-Type': undefined },
      });
      return res.data?.url as string;
    },
    onSuccess: (url) => {
      setFormData((prev) => ({ ...prev, image_url: url }));
      setMsg({ type: 'success', text: 'Image uploaded successfully' });
      setUploading(false);
    },
    onError: () => {
      setMsg({ type: 'error', text: 'Failed to upload image' });
      setUploading(false);
    },
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      if (data?.id) {
        const res = await api.patch(`/api/restaurants/${data.id}`, {
          name: formData.name,
          description: formData.description,
          address: formData.address,
          latitude: Number(formData.latitude),
          longitude: Number(formData.longitude),
          image_url: formData.image_url,
          status: formData.status,
        });
        return res.data?.restaurant as Restaurant;
      } else {
        const res = await api.post('/api/restaurants', {
          name: formData.name,
          description: formData.description,
          address: formData.address,
          latitude: Number(formData.latitude),
          longitude: Number(formData.longitude),
          image_url: formData.image_url,
        });
        return res.data?.restaurant as Restaurant;
      }
    },
    onSuccess: (updatedRestaurant) => {
      queryClient.invalidateQueries({ queryKey: ['restaurant-me'] });
      queryClient.invalidateQueries({ queryKey: ['restaurants'] });
      setMsg({ type: 'success', text: 'Restaurant profile saved successfully!' });
      if (onRestaurantUpdated && updatedRestaurant) {
        onRestaurantUpdated(updatedRestaurant);
      }
    },
    onError: (err: any) => {
      setMsg({ type: 'error', text: err?.response?.data?.msg || 'Failed to save restaurant profile' });
    },
  });

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setUploading(true);
      uploadMutation.mutate(file);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setMsg(null);
    saveMutation.mutate();
  };

  const handleToggleStatus = async () => {
    const newStatus = formData.status === 'active' ? 'closed' : 'active';
    setFormData((prev) => ({ ...prev, status: newStatus }));
    if (data?.id) {
      try {
        await api.patch(`/api/restaurants/${data.id}`, {
          status: newStatus,
        });
        queryClient.invalidateQueries({ queryKey: ['restaurant-me'] });
        setMsg({ type: 'success', text: `Store status changed to ${newStatus}` });
      } catch (err) {
        setFormData((prev) => ({ ...prev, status: data.status }));
        setMsg({ type: 'error', text: 'Failed to update store status' });
      }
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-12 bg-surface rounded-xl border border-border">
        <Loader2 className="w-6 h-6 animate-spin text-accent mr-2" />
        <span className="text-sm font-medium text-mutedForeground">Loading kitchen profile...</span>
      </div>
    );
  }

  return (
    <div className="bg-surface rounded-xl border border-border p-6 shadow-sm">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-divider">
        <div>
          <div className="flex items-center gap-2">
            <Store className="w-5 h-5 text-accent" />
            <h2 className="text-xl font-bold font-display text-foreground">
              {data ? 'Kitchen Profile & Settings' : 'Register Your Restaurant'}
            </h2>
          </div>
          <p className="text-sm text-mutedForeground mt-1">
            Configure your store details, operational status, and location for delivery dispatch.
          </p>
        </div>

        {data && (
          <div className="flex items-center gap-3 bg-surfaceSecondary p-2 rounded-lg border border-border">
            <span className="text-xs font-semibold text-foreground uppercase tracking-wider">
              Store Status:
            </span>
            <button
              type="button"
              onClick={handleToggleStatus}
              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-semibold transition-colors ${
                formData.status === 'active'
                  ? 'bg-success text-successForeground'
                  : 'bg-destructive text-destructiveForeground'
              }`}
            >
              <Power className="w-3.5 h-3.5" />
              {formData.status === 'active' ? 'OPEN FOR ORDERS' : 'CLOSED'}
            </button>
          </div>
        )}
      </div>

      {msg && (
        <div
          className={`mt-4 p-3 rounded-lg text-sm flex items-center gap-2 ${
            msg.type === 'success'
              ? 'bg-success/10 text-success border border-success/20'
              : 'bg-destructive/10 text-destructive border border-destructive/20'
          }`}
        >
          {msg.type === 'success' ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
          <span>{msg.text}</span>
        </div>
      )}

      <form onSubmit={handleSubmit} className="mt-6 space-y-5">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label className="block text-xs font-semibold text-foreground uppercase mb-1">
              Restaurant Name *
            </label>
            <input
              type="text"
              required
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="e.g. Spice Garden Bistro"
              className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-foreground uppercase mb-1">
              Street Address *
            </label>
            <div className="relative">
              <MapPin className="w-4 h-4 absolute left-3 top-2.5 text-mutedForeground" />
              <input
                type="text"
                required
                value={formData.address}
                onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                placeholder="123 Culinary Way, Downtown"
                className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
              />
            </div>
          </div>
        </div>

        <div>
          <label className="block text-xs font-semibold text-foreground uppercase mb-1">
            Store Description
          </label>
          <textarea
            rows={2}
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            placeholder="Authentic artisanal meals prepared daily with fresh ingredients."
            className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
          />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className="block text-xs font-semibold text-foreground uppercase mb-1">
              Latitude Coords *
            </label>
            <input
              type="number"
              step="any"
              required
              value={formData.latitude}
              onChange={(e) => setFormData({ ...formData, latitude: parseFloat(e.target.value) || 0 })}
              className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-foreground uppercase mb-1">
              Longitude Coords *
            </label>
            <input
              type="number"
              step="any"
              required
              value={formData.longitude}
              onChange={(e) => setFormData({ ...formData, longitude: parseFloat(e.target.value) || 0 })}
              className="w-full px-3 py-2 bg-background border border-border rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-accent"
            />
          </div>
        </div>

        <div>
          <label className="block text-xs font-semibold text-foreground uppercase mb-2">
            Store Banner Image
          </label>
          <div className="flex flex-col sm:flex-row items-center gap-4">
            {formData.image_url ? (
              <div className="relative w-full sm:w-48 h-28 rounded-lg overflow-hidden border border-border bg-muted">
                <img
                  src={resolveMediaUrl(formData.image_url)}
                  alt="Store Banner"
                  className="w-full h-full object-cover"
                />
              </div>
            ) : (
              <div className="w-full sm:w-48 h-28 rounded-lg border border-dashed border-border bg-surfaceSecondary flex flex-col items-center justify-center text-mutedForeground">
                <ImageIcon className="w-8 h-8 mb-1 opacity-50" />
                <span className="text-xs">No image set</span>
              </div>
            )}

            <div className="flex-1 w-full">
              <label className="inline-flex items-center justify-center gap-2 px-4 py-2 border border-border rounded-md shadow-sm text-xs font-semibold text-foreground bg-surface hover:bg-surfaceSecondary cursor-pointer transition-colors">
                {uploading ? <Loader2 className="w-4 h-4 animate-spin text-accent" /> : <Upload className="w-4 h-4 text-accent" />}
                {uploading ? 'Uploading...' : 'Choose Cover Photo'}
                <input
                  type="file"
                  accept="image/*"
                  onChange={handleImageChange}
                  disabled={uploading}
                  className="hidden"
                />
              </label>
              <p className="text-xs text-mutedForeground mt-1.5">
                PNG, JPG or WebP images up to 5MB. Formats stored securely via R2 storage.
              </p>
            </div>
          </div>
        </div>

        <div className="pt-4 border-t border-divider flex justify-end">
          <button
            type="submit"
            disabled={saveMutation.isPending || uploading}
            className="flex items-center gap-2 px-6 py-2.5 bg-primary text-primaryForeground hover:opacity-90 rounded-md text-sm font-semibold transition-opacity disabled:opacity-50"
          >
            {saveMutation.isPending ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Save className="w-4 h-4" />
            )}
            {data ? 'Save Changes' : 'Create Restaurant Profile'}
          </button>
        </div>
      </form>
    </div>
  );
}