'use client';

import { DashboardLayout } from '@/components/layout/dashboard-layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import { Store, MapPin, Phone, Mail, Globe, Clock, Image as ImageIcon, Palette, Save, ExternalLink } from 'lucide-react';
import { demoRestaurant } from '@/lib/demo-data';
import { cn } from '@/lib/utils';

export default function RestaurantSetupPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Restaurant Profile</h1>
            <p className="mt-1 text-sm text-zinc-500">Manage your restaurant&apos;s public information and branding.</p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <ExternalLink className="h-4 w-4" /> Preview
            </Button>
            <Button variant="primary" size="sm">
              <Save className="h-4 w-4" /> Save Changes
            </Button>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          <div className="space-y-6 lg:col-span-2">
            {/* Basic Info */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Store className="h-4 w-4" /> Basic Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">Restaurant Name</label>
                  <Input defaultValue={demoRestaurant.name} />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">URL Slug</label>
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-zinc-400">scanmenu.app/</span>
                    <Input defaultValue={demoRestaurant.slug} className="flex-1" />
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">Description</label>
                  <Textarea defaultValue={demoRestaurant.description} rows={3} />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Currency</label>
                    <Input defaultValue={demoRestaurant.currency} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Timezone</label>
                    <Input defaultValue={demoRestaurant.timezone} />
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Contact */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Phone className="h-4 w-4" /> Contact Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">Address</label>
                  <div className="relative">
                    <MapPin className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
                    <Input defaultValue={demoRestaurant.address} className="pl-10" />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Phone</label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
                      <Input defaultValue={demoRestaurant.phone} className="pl-10" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Email</label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
                      <Input defaultValue={demoRestaurant.email} className="pl-10" />
                    </div>
                  </div>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">Website</label>
                  <div className="relative">
                    <Globe className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-400" />
                    <Input defaultValue={demoRestaurant.website} className="pl-10" />
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Opening Hours */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Clock className="h-4 w-4" /> Opening Hours</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {Object.entries(demoRestaurant.opening_hours || {}).map(([day, hours]) => (
                    <div key={day} className="flex items-center gap-4">
                      <span className="w-24 text-sm font-medium capitalize text-zinc-700">{day}</span>
                      <div className="flex items-center gap-2 flex-1">
                        <Input type="time" defaultValue={hours.open} className="w-32" />
                        <span className="text-zinc-400">to</span>
                        <Input type="time" defaultValue={hours.close} className="w-32" />
                      </div>
                      <label className="flex items-center gap-2">
                        <input type="checkbox" defaultChecked={!hours.closed} className="h-4 w-4 rounded border-zinc-300 text-emerald-600 focus:ring-emerald-500" />
                        <span className="text-xs text-zinc-500">Open</span>
                      </label>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Logo */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><ImageIcon className="h-4 w-4" /> Logo</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-800/50">
                  <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-500 to-cyan-500 text-2xl font-bold text-white shadow-lg">
                    GK
                  </div>
                  <Button variant="outline" size="sm" className="mt-4">Upload Logo</Button>
                </div>
              </CardContent>
            </Card>

            {/* Cover Image */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><ImageIcon className="h-4 w-4" /> Cover Image</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-800/50">
                  <ImageIcon className="h-10 w-10 text-zinc-300" />
                  <p className="mt-2 text-xs text-zinc-400">Recommended: 1200 x 400</p>
                  <Button variant="outline" size="sm" className="mt-3">Upload Cover</Button>
                </div>
              </CardContent>
            </Card>

            {/* Theme */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Palette className="h-4 w-4" /> Theme Color</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex gap-2">
                  {['#10b981', '#3b82f6', '#8b5cf6', '#f59e0b', '#ef4444', '#ec4899', '#14b8a6', '#6366f1'].map((color) => (
                    <button
                      key={color}
                      className={cn(
                        "h-8 w-8 rounded-lg ring-offset-2 transition-all hover:scale-110",
                        color === demoRestaurant.theme_color ? "ring-2 ring-emerald-500" : "ring-2 ring-transparent"
                      )}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* Status */}
            <Card>
              <CardContent className="pt-6">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-zinc-700">Restaurant Status</span>
                  <Badge variant="success">Active</Badge>
                </div>
                <p className="mt-2 text-xs text-zinc-500">Your restaurant is visible to customers</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}