100:"ExplicitChatIdProvider" 101:I[903690,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"$100"] 102:I[838238,["$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$7b","$7c","$7d","$79","$76","$7e","$77","$7f","$80","$81","$82","$83","$78"],"SWRDataProvider"] 104:[] 105:[["b_c2lP8bj8GC0",null],["b_wHgdLbM2Xpd",null],["b_UyJM8h5xnbA",null],["b_PuUqCllPOLl",null]] 106:[["b_c2lP8bj8GC0",{"templateVersionId":null,"templateCanonId":null}],["b_wHgdLbM2Xpd",{"templateVersionId":null,"templateCanonId":null}],["b_UyJM8h5xnbA",{"templateVersionId":null,"templateCanonId":null}],["b_PuUqCllPOLl",{"templateVersionId":null,"templateCanonId":null}]] 107:[["b_beQoNjSI4Fs","$D2025-11-21T22:49:08.113Z"],["b_bhUYYUlkWXj","$D2025-11-21T22:49:29.263Z"],["b_DjrGjnZLB7f","$D2025-11-21T22:49:50.690Z"],["b_qhVHQvaDA7S","$D2025-11-21T22:50:11.362Z"],["b_Ya1hI6RJxLU","$D2025-11-21T22:51:07.010Z"],["b_PymmaPla34V","$D2025-11-21T22:56:47.200Z"],["b_UFWmx86ODpS","$D2025-11-21T23:02:56.821Z"],["b_mbf9kYJQTwy","$D2025-11-21T23:13:31.468Z"],["b_dilbJ54a4lz","$D2025-11-22T04:23:18.070Z"],["b_PwpsGGW3iCA","$D2025-11-22T04:36:58.189Z"],["b_qEXamGqfuwg","$D2025-11-22T04:38:46.538Z"],["b_PKTxGt7ZUGk","$D2025-11-22T04:49:07.933Z"],["b_lZ0GGPI2aiD","$D2025-11-22T04:50:27.215Z"],["b_PnPQQEsMd5U","$D2025-11-22T04:50:47.345Z"],["b_eVLYzw7Bk84","$D2025-11-22T04:57:44.058Z"],["b_NMWmtvbt3Rq","$D2025-11-22T04:59:43.702Z"],["b_HPkFl4THirM","$D2025-11-22T05:01:37.319Z"],["b_ZYSvl04oc8U","$D2025-11-22T05:01:55.215Z"],["b_xguMqVoSu1r","$D2025-11-22T05:06:47.404Z"],["b_rYk2nRNenBn","$D2025-11-22T05:14:06.060Z"],["b_8YZaN7eJZeK","$D2025-11-22T05:14:22.923Z"],["b_IDmJZAqd0TS","$D2025-11-22T05:17:16.511Z"],["b_8XQBtJ1fEPb","$D2025-11-22T05:17:29.957Z"],["b_9aBy6wJYldW","$D2025-11-22T05:19:37.983Z"],["b_v6X624oZhtn","$D2025-11-22T05:19:50.976Z"],["b_juxif8C4fTc","$D2025-11-22T05:22:31.510Z"],["b_5p1LH87JR2s","$D2025-11-22T05:26:38.858Z"],["b_z56o8uVxVTT","$D2025-11-22T06:58:24.716Z"],["b_lTi3eYSFe5j","$D2025-11-22T07:00:20.887Z"],["b_7yNkBTwPNAR","$D2025-11-22T07:01:44.870Z"],["b_eYjanmiPxvB","$D2025-11-22T07:04:35.198Z"],["b_VOejZrb38Z3","$D2025-11-22T07:05:58.638Z"],["b_xxWCO9Zl2hw","$D2025-11-22T07:08:42.235Z"],["b_DmQhE5bLe5i","$D2025-11-22T07:08:50.335Z"],["b_DSJmGlvUo6u","$D2025-11-22T07:10:21.933Z"],["b_GSgWjgPL2LW","$D2025-11-22T07:12:05.897Z"],["b_iz4gkyiKfnS","$D2025-11-22T07:14:39.781Z"],["b_eASIw0N0Fv8","$D2025-11-22T07:16:25.077Z"],["b_mqyjdwg9m5h","$D2025-11-22T07:19:49.454Z"],["b_1CrGYs3Tn0f","$D2025-11-22T07:22:15.793Z"],["b_kDW6ONB9EEJ","$D2025-11-22T07:24:20.537Z"],["b_MWSzn2f8d4Q","$D2025-11-22T07:26:11.868Z"],["b_Yc5uunWYaB1","$D2025-11-22T07:27:53.293Z"],["b_xBy0Hyzf0Tb","$D2025-11-22T07:31:09.544Z"],["b_5QJYiglm8cs","$D2025-11-22T19:01:56.798Z"],["b_jt8eMPg9SEk","$D2025-11-22T19:02:23.762Z"],["b_E7V96cQOqta","$D2025-11-22T19:10:33.584Z"],["b_tn2XzzwqBP4","$D2025-11-22T19:13:59.316Z"],["b_LoJqGctsxfU","$D2025-11-22T19:19:30.270Z"],["b_3AV6Ng0Z1Dm","$D2025-11-22T22:03:55.296Z"],["b_GWUj3dx0c0l","$D2025-11-22T22:14:29.644Z"],["b_vhmpbw6XB3h","$D2025-11-22T22:39:45.629Z"],["b_gBGTZRb9zKn","$D2025-11-22T22:42:54.903Z"],["b_DZA4DUgTfy6","$D2025-11-22T23:14:44.582Z"],["b_PKiTUqvIwqc","$D2025-11-22T23:17:26.558Z"],["b_QIuQ1DHIyEk","$D2025-11-22T23:20:21.293Z"],["b_4hQJCNW7vfD","$D2025-11-22T23:38:59.465Z"],["b_hWuhJ6Obrdx","$D2025-11-22T23:39:07.638Z"],["b_EiTOwzLhmV4","$D2025-11-22T23:41:57.251Z"],["b_NaLtGByayjt","$D2025-11-22T23:48:14.650Z"],["b_kJUPFuWGcUz","$D2025-11-22T23:49:45.412Z"],["b_b6xiqn9b3Ca","$D2025-11-22T23:51:34.388Z"],["b_bmckFHWrrYi","$D2025-11-22T23:53:47.105Z"],["b_eLi3Ad6Jlwy","$D2025-11-23T00:03:38.747Z"],["b_wwq4dDMKuum","$D2025-11-23T00:10:08.215Z"],["b_tdY39SlbEsI","$D2025-11-23T00:13:26.682Z"],["b_3h7ktG2cinA","$D2025-11-23T00:19:12.778Z"],["b_BJrx2QEAHjQ","$D2025-11-23T00:34:32.427Z"],["b_Cea93hnP08q","$D2025-11-23T00:34:43.573Z"],["b_VmsrkESMBWt","$D2025-11-23T00:36:01.198Z"],["b_hziQmwv095Z","$D2025-11-24T06:47:19.114Z"],["b_DlNak6opPLd","$D2025-11-24T06:49:08.393Z"],["b_LjKEaxgH4ts","$D2025-11-24T06:51:57.025Z"],["b_R2oOgBMB0NS","$D2025-11-24T06:53:32.107Z"],["b_3yGlUOfOjHk","$D2025-11-24T06:54:12.327Z"],["b_Fx97cCYwQgf","$D2025-11-24T06:57:58.579Z"],["b_qXBaIRoRA7W","$D2025-11-24T20:48:46.163Z"],["b_azHM4Jor02e","$D2025-11-24T20:53:19.671Z"],["b_ViVXjHBJ44z","$D2025-11-25T05:30:00.441Z"],["b_SA3en9aeneY","$D2025-11-25T05:36:54.218Z"],["b_vddafzAIYyr","$D2025-11-25T05:37:54.806Z"],["b_Q6odT2SfUxT","$D2025-11-25T05:38:18.239Z"],["b_byVdh530Bwo","$D2025-11-25T05:38:35.462Z"],["b_Zfnj8l7kJTS","$D2025-11-25T05:40:05.313Z"],["b_njlgVVVXhIc","$D2025-11-25T05:40:39.611Z"],["b_dqJI1HYfU6E","$D2025-11-25T05:41:58.719Z"],["b_jd52f6c9p8j","$D2025-11-25T05:42:22.708Z"],["b_fzqLr0p3xQP","$D2025-11-25T05:42:44.273Z"],["b_pkxcBt5e4kS","$D2025-11-25T05:42:55.448Z"],["b_7LJEMEAHhL0","$D2025-11-25T05:44:04.656Z"],["b_tJ5mt11ohEf","$D2025-11-25T05:54:38.115Z"],["b_NhelddMkkNK","$D2025-11-25T05:56:42.176Z"],["b_xVEMlA7aLWL","$D2025-11-25T05:57:18.005Z"],["b_VmkZk8EFKfo","$D2025-11-25T05:57:59.338Z"],["b_1VAb2feEDv2","$D2025-11-25T06:15:05.123Z"],["b_4Wsus1dbuY6","$D2025-11-25T06:20:03.460Z"],["b_ZbEpfmOH4gZ","$D2025-11-25T06:25:50.472Z"],["b_uX6iA3pD8m6","$D2025-11-25T06:28:17.695Z"],["b_kXUw0K6nOYi","$D2025-11-25T06:42:36.296Z"],["b_p48aC1DxRpH","$D2025-11-25T20:54:48.900Z"],["b_wy22o6tXbuC","$D2025-11-25T20:55:38.558Z"],["b_jkVjtCnOYk0","$D2025-11-25T20:57:35.618Z"],["b_1xSAUpDcEyK","$D2025-11-25T21:03:06.605Z"],["b_F5TYkNw2lPE","$D2025-11-25T21:05:29.321Z"],["b_yywu30vP4US","$D2025-11-25T21:11:01.731Z"],["b_v7vfhRYtObs","$D2025-11-25T21:14:06.659Z"],["b_rY0d28HsQIE","$D2025-11-25T22:48:21.836Z"],["b_amgxICbfvsR","$D2025-11-25T22:53:44.588Z"],["b_hea96vJoROr","$D2025-11-25T22:54:04.746Z"],["b_Wg2aiTx0TgL","$D2025-11-25T23:00:44.381Z"],["b_oyEa1cZkF48","$D2025-11-25T23:35:16.916Z"],["b_8sML0wDbnwT","$D2025-11-25T23:37:28.858Z"],["b_1KCi6QU8aYc","$D2025-11-26T04:21:08.184Z"],["b_UdLmw7KRlhD","$D2025-11-26T04:31:20.117Z"],["b_fwCBeGg52M0","$D2025-11-26T04:32:11.333Z"],["b_mKKWcIG1k5I","$D2025-11-26T05:21:17.637Z"],["b_766PFtRX2IB","$D2025-11-26T05:21:38.583Z"],["b_BCnirIazT22","$D2025-11-26T05:27:19.008Z"],["b_GwdLbLNMewT","$D2025-11-26T05:28:12.367Z"],["b_84oQ9V0WZEY","$D2025-11-26T06:11:56.018Z"],["b_JuvVoz2IDPk","$D2025-11-26T06:17:58.854Z"],["b_M2UhkKT33HL","$D2025-11-26T06:21:47.435Z"],["b_H7YPkT4mnWf","$D2025-11-26T06:22:22.706Z"],["b_1bWzz4x4QqX","$D2025-11-26T06:22:35.290Z"],["b_AriWTCWXaeu","$D2025-11-26T06:23:51.971Z"],["b_CMwM8mxXCPg","$D2025-11-26T06:24:29.964Z"],["b_I9yuWl9QNlA","$D2025-11-27T00:43:31.258Z"],["b_ibrZ91L42QT","$D2025-11-27T00:51:05.442Z"],["b_orXyKjqTQOQ","$D2025-11-27T00:51:26.331Z"],["b_embLdr3ogIK","$D2025-11-27T00:53:23.624Z"],["b_boiRv5P9bc5","$D2025-11-27T00:54:23.790Z"],["b_WSrNjOScrTM","$D2025-11-27T04:45:22.430Z"],["b_cJpHs83Btdy","$D2025-11-27T04:45:39.244Z"],["b_QBofWTmWgwD","$D2025-11-27T04:46:07.597Z"],["b_oXetkxgT4HA","$D2025-11-27T04:46:42.415Z"],["b_X2Uuuhrnyf0","$D2025-11-27T06:16:55.413Z"],["b_DDhrO6CPktn","$D2025-11-27T06:17:14.542Z"],["b_JxqSXn9W2lr","$D2025-11-27T06:17:30.669Z"],["b_SB1bjixq1TW","$D2025-11-27T06:17:54.863Z"],["b_koDxMLhNGLo","$D2025-11-27T06:55:23.247Z"],["b_9NVnUAtn8CR","$D2025-11-27T06:56:10.367Z"],["b_jan6X30AxHk","$D2025-11-27T07:14:29.118Z"],["b_NVmvo1LVudy","$D2025-11-27T07:15:26.853Z"],["b_soYr07oIDuO","$D2025-11-27T07:16:04.352Z"],["b_Ppd1D2jsCAK","$D2025-11-27T07:16:44.659Z"],["b_J3tMhekpav3","$D2025-11-27T07:25:52.846Z"],["b_khML8Y4CzBp","$D2025-11-27T07:26:12.585Z"],["b_Ag15JqVmzhv","$D2025-11-27T07:26:37.162Z"],["b_sLoFa6Zg1A9","$D2025-11-27T07:28:18.251Z"],["b_22TQ0gih1LT","$D2025-11-27T07:29:34.743Z"],["b_sPppATJr5L1","$D2025-11-27T07:30:53.935Z"],["b_hOh5yqPfZ0l","$D2025-11-27T07:35:10.651Z"],["b_XTPWkJpw05u","$D2025-11-27T18:44:26.341Z"],["b_iBUwGxEYnOh","$D2025-11-27T18:46:49.152Z"],["b_z8rCfi5eAqD","$D2025-11-27T18:47:11.869Z"],["b_eGA3k0gc4zR","$D2025-11-27T18:51:49.465Z"],["b_9MFTFYYBkM7","$D2025-11-27T18:52:08.434Z"],["b_qWhnO2ROnIh","$D2025-11-27T23:57:45.978Z"],["b_B8NwrxNFcLj","$D2025-11-27T23:59:23.374Z"],["b_O8lmovlqMXu","$D2025-11-28T00:00:07.718Z"],["b_QfY6Ryqve1q","$D2025-11-28T00:25:57.941Z"],["b_MYPc0a6sZH9","$D2025-11-28T00:31:34.320Z"],["b_lMPoEe1Y3jZ","$D2025-11-28T00:32:48.932Z"],["b_GfiSEBR0UVJ","$D2025-11-30T02:43:23.960Z"],["b_Kdjs8apcFQq","$D2025-11-30T02:45:17.152Z"],["b_FzSOWzCKKSW","$D2025-11-30T02:49:21.328Z"],["b_bJuLVHUNa4E","$D2025-11-30T02:50:48.885Z"],["b_HSX7eKrql0C","$D2025-11-30T02:57:37.809Z"],["b_uDMY8NaHPdH","$D2025-11-30T02:57:53.445Z"],["b_1ofRuQnMhsF","$D2025-11-30T04:17:44.366Z"],["b_ZmoqFQ6RAPk","$D2025-11-30T04:38:58.809Z"],["b_p6YrzTucMqb","$D2025-11-30T04:39:08.512Z"],["b_k9SqPrKbxGh","$D2025-11-30T04:44:42.989Z"],["b_CGNQExi0nWU","$D2025-11-30T04:45:18.942Z"],["b_IAzgUPR5Pj9","$D2025-11-30T04:45:46.218Z"],["b_hxHdalCK1NN","$D2025-11-30T05:43:58.016Z"],["b_JQjwdncJRto","$D2025-11-30T05:44:39.763Z"],["b_5Fyv2B4etKz","$D2025-11-30T05:45:28.729Z"],["b_3lDbxfHszfz","$D2025-11-30T05:50:06.216Z"],["b_CzjTOlJCdnI","$D2025-11-30T05:50:58.180Z"],["b_GRuS3naJmYQ","$D2025-11-30T05:53:39.135Z"],["b_TG5R8nMDBv8","$D2025-11-30T06:02:17.686Z"],["b_QbvzcfoTcBB","$D2025-11-30T06:02:40.412Z"],["b_c2lP8bj8GC0","$D2025-11-30T06:08:16.910Z"],["b_wHgdLbM2Xpd","$D2025-11-30T06:08:38.911Z"],["b_UyJM8h5xnbA","$D2025-11-30T06:09:05.277Z"],["b_PuUqCllPOLl","$D2026-01-02T05:57:41.689Z"]] 108:[["b_c2lP8bj8GC0",false],["b_wHgdLbM2Xpd",false],["b_UyJM8h5xnbA",false],["b_PuUqCllPOLl",false]] 109:[["b_c2lP8bj8GC0","$undefined"],["b_wHgdLbM2Xpd","$undefined"],["b_UyJM8h5xnbA",{"deploymentId":"dpl_aJdTDR4ykk8qcQzNoC46XuYin3Vi"}],["b_PuUqCllPOLl","$undefined"]] 10a:[["b_c2lP8bj8GC0",null],["b_wHgdLbM2Xpd",null],["b_UyJM8h5xnbA",null],["b_PuUqCllPOLl",null]] 10b:[["b_c2lP8bj8GC0",true],["b_wHgdLbM2Xpd",true],["b_UyJM8h5xnbA",true],["b_PuUqCllPOLl",true]] 10c:[["b_c2lP8bj8GC0",true],["b_wHgdLbM2Xpd",true],["b_UyJM8h5xnbA",true],["b_PuUqCllPOLl",true]] 10d:[] 10e:T409,The user has shared a screenshot showing browser console output from the debug logging I added. The console shows: ``` [v0] Subscription data: subscription: null [[Prototype]]: Object ``` This means the subscription is coming back as `null` from the Stripe API call. So the issue is that `syncSubscriptionFromStripe` is not finding the subscription for the user's email. Looking back at the code I wrote, the function is trying to: 1. Find the customer by email 2. Get subscriptions for that customer 3. Find the most recent active subscription Since it's returning `null`, either: - The customer lookup is failing - The subscriptions list is empty for that customer - There's no active subscription But I know from the Stripe queries I ran earlier that there ARE active subscriptions for donald.robertson@modulo-studio.com. The issue must be in how the function is querying Stripe. Let me look at the syncSubscriptionFromStripe function more carefully and add more granular debug logging to see exactly where it's failing.10f:T741d7,[V0_FILE]sql:file="scripts/001-create-tables.sql" isMerged="true" -- Create brands table CREATE TABLE IF NOT EXISTS brands ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, description TEXT NOT NULL, target_audience TEXT NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create brand_kits table CREATE TABLE IF NOT EXISTS brand_kits ( id SERIAL PRIMARY KEY, brand_id INTEGER NOT NULL REFERENCES brands(id) ON DELETE CASCADE, colors JSONB NOT NULL, typography JSONB NOT NULL, voice_tone JSONB NOT NULL, visual_direction JSONB NOT NULL, created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP ); -- Create indexes for better query performance CREATE INDEX IF NOT EXISTS idx_brand_kits_brand_id ON brand_kits(brand_id); CREATE INDEX IF NOT EXISTS idx_brands_created_at ON brands(created_at DESC); [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@neondatabase/serverless": "1.0.2", "ai": "5.0.98", "@react-pdf/renderer": "4.3.1", "@ai-sdk/groq": "2.0.31", "crypto": "1.0.1", "jspdf": "3.0.4", "@supabase/ssr": "0.8.0", "server-only": "0.0.1", "stripe": "20.0.0", "@stripe/react-stripe-js": "5.4.1", "@stripe/stripe-js": "8.5.3" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="app/api/brands/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { sql } from "@/lib/db" import { BrandInputSchema } from "@/lib/types" // import { createServerClient } from "@/lib/supabase/server" export async function POST(request: NextRequest) { try { // const supabase = await createServerClient() // const { // data: { user }, // } = await supabase.auth.getUser() const body = await request.json() const validatedData = BrandInputSchema.parse(body) const result = await sql` INSERT INTO brands (name, description, target_audience) VALUES ( ${validatedData.name}, ${validatedData.description}, ${validatedData.targetAudience} ) RETURNING id, name, description, target_audience, created_at, updated_at ` const brand = result[0] return NextResponse.json({ brand }, { status: 201 }) } catch (error) { if (error instanceof Error) { return NextResponse.json({ error: error.message }, { status: 400 }) } return NextResponse.json({ error: "An unexpected error occurred" }, { status: 500 }) } } export async function GET() { try { // const supabase = await createServerClient() // const { // data: { user }, // } = await supabase.auth.getUser() const brands = await sql` SELECT id, name, description, target_audience, created_at, updated_at FROM brands ORDER BY created_at DESC LIMIT 100 ` return NextResponse.json({ brands }) } catch (error) { return NextResponse.json({ error: "Failed to fetch brands" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/brands/[id]/kits/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { sql } from "@/lib/db" export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const brandId = Number.parseInt(id) if (isNaN(brandId)) { return NextResponse.json({ error: "Invalid brand ID" }, { status: 400 }) } const kits = await sql` SELECT id, brand_id, colors, typography, voice_tone, visual_direction, created_at, updated_at FROM brand_kits WHERE brand_id = ${brandId} ORDER BY created_at DESC ` return NextResponse.json({ kits }) } catch (error) { return NextResponse.json({ error: "Failed to fetch brand kits" }, { status: 500 }) } } [V0_FILE]typescript:file="components/brand-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Spinner } from "@/components/ui/spinner" import type { BrandInput } from "@/lib/types" interface BrandFormProps { onSuccess: (brandId: number) => void } export function BrandForm({ onSuccess }: BrandFormProps) { const [formData, setFormData] = useState({ name: "", description: "", targetAudience: "", }) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) setError(null) try { // Create brand const brandResponse = await fetch("/api/brands", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (!brandResponse.ok) { const errorData = await brandResponse.json() throw new Error(errorData.error || "Failed to create brand") } const { brand } = await brandResponse.json() // Generate brand kit const kitResponse = await fetch(`/api/brands/${brand.id}/generate-kit`, { method: "POST", }) if (!kitResponse.ok) { const errorData = await kitResponse.json() throw new Error(errorData.error || "Failed to generate brand kit") } onSuccess(brand.id) } catch (err) { setError(err instanceof Error ? err.message : "An error occurred") } finally { setIsLoading(false) } } return ( Create Your Cannabis Brand Tell us about your brand and we'll generate a comprehensive brand kit

Brand Name setFormData({ ...formData, name: e.target.value })} placeholder="Enter your brand name" required disabled={isLoading} />

Brand Description

setFormData({ ...formData, description: e.target.value })}
              placeholder="Describe what makes your brand unique, your mission, and core values"
              rows={4}
              required
              disabled={isLoading}
              minLength={10}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="targetAudience">Target Audience</Label>
            <Textarea
              id="targetAudience"
              value={formData.targetAudience}
              onChange={(e) => setFormData({ ...formData, targetAudience: e.target.value })}
              placeholder="Describe your ideal customers: demographics, preferences, lifestyle"
              rows={4}
              required
              disabled={isLoading}
              minLength={10}
            />
          </div>

{error && (
            <div className="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
              {error}
            </div>
          )}

<Button type="submit" disabled={isLoading} className="w-full">
            {isLoading ? (
              <>
                <Spinner className="mr-2 h-4 w-4" />
                Generating Brand Kit...
              </>
            ) : (
              "Generate Brand Kit"
            )}
          </Button>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/brand-kit-display.tsx" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"
import { CheckIcon, XIcon } from "lucide-react"
import type { BrandKit } from "@/lib/types"

interface BrandKitDisplayProps {
  brandId: number
  onCreateAnother: () => void
}

export function BrandKitDisplay({ brandId, onCreateAnother }: BrandKitDisplayProps) {
  const [brandKit, setBrandKit] = useState<BrandKit | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchBrandKit = async () => {
      try {
        const response = await fetch(`/api/brands/${brandId}/kits`)

if (!response.ok) {
          throw new Error("Failed to fetch brand kit")
        }

const { kits } = await response.json()

if (kits.length > 0) {
          setBrandKit({
            colors: kits[0].colors,
            typography: kits[0].typography,
            voiceTone: kits[0].voice_tone,
            visualDirection: kits[0].visual_direction,
          })
        } else {
          throw new Error("No brand kit found")
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "An error occurred")
      } finally {
        setIsLoading(false)
      }
    }

fetchBrandKit()
  }, [brandId])

if (isLoading) {
    return (
      <Card className="w-full max-w-5xl">
        <CardContent className="flex items-center justify-center py-16">
          <Spinner className="h-8 w-8" />
          <span className="ml-3 text-lg">Loading your brand kit...</span>
        </CardContent>
      </Card>
    )
  }

if (error || !brandKit) {
    return (
      <Card className="w-full max-w-5xl">
        <CardContent className="py-16 text-center">
          <p className="text-destructive mb-4">{error || "Brand kit not found"}</p>
          <Button onClick={onCreateAnother}>Create New Brand</Button>
        </CardContent>
      </Card>
    )
  }

return (
    <div className="w-full max-w-5xl space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="text-3xl font-bold">Your Brand Kit</h2>
        <Button onClick={onCreateAnother} variant="outline">
          Create Another Brand
        </Button>
      </div>

{/* Colors Section */}
      <Card>
        <CardHeader>
          <CardTitle>Color Palette</CardTitle>
          <CardDescription>Your brand's color system</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {brandKit.colors.map((color, index) => (
              <div key={index} className="space-y-3">
                <div className="h-24 w-full rounded-lg border shadow-sm" style={{ backgroundColor: color.hex }} />
                <div>
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="font-semibold">{color.name}</h4>
                    <code className="text-sm text-muted-foreground">{color.hex}</code>
                  </div>
                  <p className="text-sm text-muted-foreground">{color.usage}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Typography Section */}
      <Card>
        <CardHeader>
          <CardTitle>Typography</CardTitle>
          <CardDescription>Font selections and pairing guidance</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label>Heading Font</Label>
              <div className="rounded-lg border bg-muted/50 p-4">
                <p className="text-2xl font-bold">{brandKit.typography.headingFont}</p>
              </div>
            </div>
            <div className="space-y-2">
              <Label>Body Font</Label>
              <div className="rounded-lg border bg-muted/50 p-4">
                <p className="text-lg">{brandKit.typography.bodyFont}</p>
              </div>
            </div>
          </div>
          <div className="space-y-2">
            <Label>Font Pairing Rationale</Label>
            <p className="text-sm text-muted-foreground leading-relaxed">{brandKit.typography.fontPairing}</p>
          </div>
        </CardContent>
      </Card>

{/* Voice & Tone Section */}
      <Card>
        <CardHeader>
          <CardTitle>Voice & Tone</CardTitle>
          <CardDescription>How your brand communicates</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label>Personality Traits</Label>
            <div className="flex flex-wrap gap-2">
              {brandKit.voiceTone.personality.map((trait, index) => (
                <Badge key={index} variant="secondary">
                  {trait}
                </Badge>
              ))}
            </div>
          </div>

<div className="space-y-2">
            <Label>Messaging Strategy</Label>
            <p className="text-sm text-muted-foreground leading-relaxed">{brandKit.voiceTone.messaging}</p>
          </div>

<div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-3">
              <Label className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-600" />
                Do's
              </Label>
              <ul className="space-y-2">
                {brandKit.voiceTone.dosDonts.dos.map((item, index) => (
                  <li key={index} className="text-sm flex items-start gap-2">
                    <CheckIcon className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
                    <span className="text-muted-foreground">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="space-y-3">
              <Label className="flex items-center gap-2">
                <XIcon className="h-4 w-4 text-red-600" />
                Don'ts
              </Label>
              <ul className="space-y-2">
                {brandKit.voiceTone.dosDonts.donts.map((item, index) => (
                  <li key={index} className="text-sm flex items-start gap-2">
                    <XIcon className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
                    <span className="text-muted-foreground">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Visual Direction Section */}
      <Card>
        <CardHeader>
          <CardTitle>Visual Direction</CardTitle>
          <CardDescription>Design style and aesthetic guidance</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Style</Label>
            <p className="text-sm text-muted-foreground leading-relaxed">{brandKit.visualDirection.style}</p>
          </div>

<div className="space-y-2">
            <Label>Imagery Approach</Label>
            <p className="text-sm text-muted-foreground leading-relaxed">{brandKit.visualDirection.imagery}</p>
          </div>

<div className="space-y-2">
            <Label>Design Elements</Label>
            <div className="flex flex-wrap gap-2">
              {brandKit.visualDirection.designElements.map((element, index) => (
                <Badge key={index} variant="outline">
                  {element}
                </Badge>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

@custom-variant dark (&:is(.dark *));

/* Updated color scheme with green primary for cannabis branding */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.55 0.15 145);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0.18 145);
  --primary-foreground: oklch(0.145 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }

/* Added smooth scrolling and improved focus states for accessibility */
  html {
    scroll-behavior: smooth;
  }

/* Improve focus visibility for keyboard navigation */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
  }

/* Smooth transitions for interactive elements */
  a,
  button {
    @apply transition-colors duration-200;
  }

/* Added safe-area support for iOS notched devices */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }

.pt-safe {
    padding-top: env(safe-area-inset-top);
  }

.px-safe {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Added custom utility classes for polish */
@layer utilities {
  /* Smooth fade-in animation for content */
  .fade-in {
    animation: fadeIn 0.3s ease-in;
  }

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* Loading shimmer effect for skeletons */
  .shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

@keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
}
[V0_FILE]typescript:file="lib/wizard-types.ts" isMerged="true"
// lib/wizard-types.ts
export type PersonalitySliders = {
  playful: number // 1-5
  loud: number // 1-5
  street: number // 1-5
  earthy: number // 1-5
}

export type WizardFormValues = {
  brandName: string
  tagline?: string
  segment: string
  targetAudience: string[] // multi-select chips
  personality: PersonalitySliders
  visualStyle: string // "Luxury Minimal", etc.
  productFocus: string[] // ["Flower","Pre-rolls"]
  packagingPreference: string // "Premium", etc.
  geoContext?: string
  outputs: string[] // ["colors","typography","logo",...]
}
[V0_FILE]typescript:file="lib/wizard-api.ts" isMerged="true"
// lib/wizard-api.ts
"use client"

import type { WizardFormValues } from "./wizard-types"

export type GenerateBrandKitResult = { ok: true; kitId: string } | { ok: false; error: string; details?: unknown }

export async function generateBrandKit(values: WizardFormValues): Promise<GenerateBrandKitResult> {
  try {
    const res = await fetch("/api/generate-kit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(values),
    })

if (!res.ok) {
      let errorMessage = `Request failed with status ${res.status}`
      let details: unknown

try {
        const data = await res.json()
        if (data?.error) errorMessage = data.error
        if (data?.details) details = data.details
      } catch {
        // ignore JSON parse errors
      }

return { ok: false, error: errorMessage, details }
    }

const data = (await res.json()) as { kitId?: string }

if (!data.kitId) {
      return {
        ok: false,
        error: "No kitId returned from server",
      }
    }

return { ok: true, kitId: data.kitId }
  } catch (err: any) {
    console.error("generateBrandKit error:", err)
    return {
      ok: false,
      error: err?.message ?? "Unexpected error",
    }
  }
}
[V0_FILE]typescript:file="lib/use-generate-brand-kit.ts" isMerged="true"
// lib/use-generate-brand-kit.ts
"use client"

import { useState } from "react"
import type { WizardFormValues } from "./wizard-types"
import { generateBrandKit } from "./wizard-api"

export function useGenerateBrandKit() {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

async function submit(values: WizardFormValues) {
    setIsSubmitting(true)
    setError(null)

const result = await generateBrandKit(values)

setIsSubmitting(false)

if (!result.ok) {
      setError(result.error)
    }

return result
  }

return {
    submit,
    isSubmitting,
    error,
    setError,
  }
}
[V0_FILE]typescript:file="app/kit/demo/page.tsx" isMerged="true"
import { PromptToolbar } from "@/components/brand-kit/prompt-toolbar"

// Minimal sample kit shaped like the DB kit object
const sampleKit = {
  snapshot: {
    one_liner: "Luxury nightlife-ready cannabis brand for after-hours minds.",
    brand_story:
      "Blue Diamonds is a connoisseur-grade flower line designed for the after-hours crowd. No cartoon nugs or loud clichés—just clean, confident packaging and product that hits as elegantly as it looks.",
    positioning:
      "Premium adult-use cannabis for professionals and creatives who want a refined, nightlife-friendly experience without stereotypical weed branding.",
  },
  colors: [
    { name: "Midnight Resin", hex: "#020617", usage: "Background" },
    { name: "Glass Ash", hex: "#1E293B", usage: "Primary" },
    { name: "Highlight Ember", hex: "#F97316", usage: "Accent" },
    { name: "Accent Mint", hex: "#22C55E", usage: "Accent" },
  ],
  typography: {
    headline_style: "Modern serif with sharp details (e.g. Playfair Display, Canela-style).",
    body_style: "Clean grotesque (e.g. Inter, SF Pro, or similar).",
    usage_notes:
      "Use the serif sparingly for H1/H2 and key callouts. Keep body copy in the grotesque for menus, jars, and web for readability.",
  },
  logo_directions: {
    summary:
      "Monogram-driven logo mixing a subtle diamond motif with a clean wordmark. No obvious leaf; focus on light refractions and sharp geometry.",
    motifs: ["diamond facets", "subtle crown silhouette", "light beams"],
    treatment_notes:
      "Aim for a flat embossed feel that works on matte jars and mylar bags. Avoid gradients in the mark; use color shifts in the packaging instead.",
    ai_prompt:
      'Minimalist cannabis brand logo for "Blue Diamonds", luxury adult-use flower line for professionals, monogram BD integrated with a subtle diamond facet motif, no cliché leaf, midnight blue and soft platinum, flat embossed style, ultra-clean vector, centered composition, high-end packaging aesthetics.',
  },
  packaging_concepts: {
    flower: {
      description:
        "Matte deep navy jars with low-key metallic labels. Thin platinum keyline around the label, diamond facet pattern as a faint UV gloss overlay.",
      finishes: "Matte jar, soft-touch label, spot UV on facets, subtle foil on logo.",
      ai_prompt:
        'High-end cannabis flower jar for "Blue Diamonds", matte midnight blue glass, platinum label with subtle diamond facet pattern in spot UV, flat embossed monogram logo, studio lighting, on a dark reflective surface.',
    },
    pre_rolls: {
      description:
        "Slim pre-roll tin or carton with vertical layout. Bold wordmark on spine so it reads on shelf. Interior pattern inspired by diamond refractions.",
      finishes: "Soft-touch carton or brushed metal tin, inside pattern print, foil accent on logo.",
      ai_prompt:
        'Luxury cannabis pre-roll pack for "Blue Diamonds", slim vertical carton, midnight blue with platinum accents, minimal monogram logo, subtle interior diamond-refraction pattern, photographed on a bar-top environment.',
    },
  },
  copy_voice: {
    voice_description:
      "Confident, composed, nightlife-aware. Never corny, never cheesy. Speaks like a friend who knows the scene, not like a bro-y mascot.",
    taglines: ["For after-hours minds.", "Stay sharp. Stay smooth.", "Nightlife-grade flower for grown folks."],
    about_paragraph:
      "Blue Diamonds is built for the ones who keep thinking after the lights go low. We source and refine our flower with the same care you put into your night—quietly premium, always intentional, never loud just to be seen. No cartoon nugs, no gimmicks—just clean design and cannabis that looks as good as it feels.",
    strain_description_template:
      "[STRAIN NAME] is a [INDICA/SATIVA/HYBRID] profile that leans [EFFECT VIBE — e.g. creative, social, wind-down]. Expect [AROMA NOTES] on the nose and [FLAVOR NOTES] on the exhale, with an onset that feels [ONSET FEELING] and settles into [BODY/HEAD FEELING]. Best paired with [SCENE — e.g. rooftop nights, studio sessions, low-lit living rooms].",
  },
  prompts: {
    logo_prompt:
      'Minimalist cannabis brand logo for "Blue Diamonds", luxury adult-use flower line for professionals, monogram BD integrated with a subtle diamond facet motif, no cliché leaf, midnight blue and soft platinum, flat embossed style, ultra-clean vector, centered composition, high-end packaging aesthetics.',
    packaging_prompts: {
      flower:
        'High-end cannabis flower jar for "Blue Diamonds", matte midnight blue glass, platinum label with subtle diamond facet pattern in spot UV, flat embossed monogram logo, studio lighting, on a dark reflective surface.',
      pre_rolls:
        'Luxury cannabis pre-roll pack for "Blue Diamonds", slim vertical carton, midnight blue with platinum accents, minimal monogram logo, subtle interior diamond-refraction pattern, photographed on a bar-top environment.',
    },
  },
}

export default function DemoKitPage() {
  const { snapshot, colors, typography, logo_directions, packaging_concepts, copy_voice, prompts } = sampleKit

const createdDate = new Date().toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "2-digit",
  })

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-6xl px-4 py-10">
        {/* Header */}
        <header className="mb-8 flex flex-col gap-3 border-b border-slate-800 pb-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight">Example Cannabis Brand Kit</h1>
            <p className="mt-1 text-sm text-slate-300">
              This is a demo kit for "Blue Diamonds" so you can see what Cannabrand Studio generates before creating
              your own.
            </p>
          </div>
          <div className="text-right text-xs text-slate-400">
            <div className="font-medium text-slate-200">
              Demo Kit: <span className="font-mono text-[11px] text-slate-300">/kit/demo</span>
            </div>
            <div className="mt-1">Generated example · {createdDate}</div>
          </div>
        </header>

{/* Prompt toolbar (no JSON export for demo) */}
        <div className="mb-6">
          <PromptToolbar
            logoPrompt={prompts.logo_prompt}
            packagingPrompts={prompts.packaging_prompts}
            taglines={copy_voice.taglines}
            aboutParagraph={copy_voice.about_paragraph}
            strainTemplate={copy_voice.strain_description_template}
          />
        </div>

{/* Main content */}
        <main className="space-y-8">
          {/* Brand Snapshot */}
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 shadow-lg shadow-black/40">
            <h2 className="text-lg font-semibold text-slate-50">Brand Snapshot</h2>
            <div className="mt-3 grid gap-6 md:grid-cols-2">
              <div>
                <div className="text-xs font-medium uppercase tracking-wide text-slate-400">One-liner</div>
                <p className="mt-1 text-sm text-slate-100">{snapshot.one_liner}</p>

<div className="mt-4 text-xs font-medium uppercase tracking-wide text-slate-400">Brand Story</div>
                <p className="mt-1 whitespace-pre-line text-sm text-slate-100">{snapshot.brand_story}</p>
              </div>

<div>
                <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Positioning</div>
                <p className="mt-1 text-sm text-slate-100">{snapshot.positioning}</p>

<div className="mt-4 rounded-xl border border-emerald-500/40 bg-emerald-500/5 px-4 py-3 text-xs text-emerald-100">
                  <p className="font-semibold text-emerald-200">How to use this:</p>
                  <p className="mt-1 text-[11px] text-emerald-200/90">
                    This snapshot becomes your "About" section on your website, your intro paragraph on pitch decks, and
                    the foundation for sales one-sheets.
                  </p>
                </div>
              </div>
            </div>
          </section>

{/* Colors & Typography */}
          <section className="grid gap-6 md:grid-cols-3">
            {/* Colors */}
            <div className="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-5">
              <h2 className="text-lg font-semibold text-slate-50">Color System</h2>
              <p className="mt-1 text-xs text-slate-400">
                Use these colors consistently across packaging, website, and marketing. Keep primary/background stable;
                use accents sparingly.
              </p>

<div className="mt-4 grid gap-3 md:grid-cols-3">
                {colors.map((color) => {
                  const hex = color.hex.startsWith("#") ? color.hex : `#${color.hex}`
                  return (
                    <div
                      key={`${color.name}-${hex}`}
                      className="overflow-hidden rounded-xl border border-slate-800 bg-slate-950/80"
                    >
                      <div className="h-16 w-full border-b border-slate-900" style={{ backgroundColor: hex }} />
                      <div className="p-3 text-xs">
                        <div className="font-medium text-slate-50">{color.name}</div>
                        <div className="mt-1 font-mono text-[11px] text-slate-300">{hex}</div>
                        <div className="mt-1 text-[11px] text-slate-400">
                          Usage: <span className="text-slate-200">{color.usage}</span>
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>

{/* Typography */}
            <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5">
              <h2 className="text-lg font-semibold text-slate-50">Typography</h2>
              <p className="mt-1 text-xs text-slate-400">
                Use this as a guide for font pairing. Choose close matches on Google Fonts or Adobe Fonts.
              </p>

<div className="mt-4 space-y-4 text-xs">
                <div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Heading Style</div>
                  <p className="mt-1 text-sm text-slate-100">{typography.headline_style}</p>
                </div>

<div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Body Style</div>
                  <p className="mt-1 text-sm text-slate-100">{typography.body_style}</p>
                </div>

<div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Usage Notes</div>
                  <p className="mt-1 text-[11px] text-slate-300 whitespace-pre-line">{typography.usage_notes}</p>
                </div>
              </div>
            </div>
          </section>

{/* Logo Directions */}
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5">
            <h2 className="text-lg font-semibold text-slate-50">Logo Directions & Motifs</h2>
            <p className="mt-1 text-xs text-slate-400">
              Use this as a brief for designers or as a prompt guide for Midjourney, DALL·E, or your AI tool of choice.
            </p>

<div className="mt-4 grid gap-6 md:grid-cols-2">
              <div className="space-y-4 text-xs">
                <div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Summary</div>
                  <p className="mt-1 text-sm text-slate-100">{logo_directions.summary}</p>
                </div>

<div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Motifs & Symbols</div>
                  <p className="mt-1 text-[11px] text-slate-300">{logo_directions.motifs.join(", ")}</p>
                </div>

<div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Treatment Notes</div>
                  <p className="mt-1 text-[11px] text-slate-300 whitespace-pre-line">
                    {logo_directions.treatment_notes}
                  </p>
                </div>
              </div>

<div className="text-xs">
                <div className="text-[11px] uppercase tracking-wide text-emerald-300">Logo AI Prompt</div>
                <div className="mt-2 rounded-xl border border-emerald-500/40 bg-slate-950/80 p-3 font-mono text-[11px] leading-relaxed text-emerald-100">
                  {logo_directions.ai_prompt}
                </div>
                <p className="mt-2 text-[11px] text-slate-400">
                  Paste this into your AI image generator. Adjust seed / style strength if your tool supports it.
                </p>
              </div>
            </div>
          </section>

{/* Packaging Concepts */}
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5">
            <h2 className="text-lg font-semibold text-slate-50">Packaging Concepts & Prompts</h2>
            <p className="mt-1 text-xs text-slate-400">
              Each block can become its own packaging line direction (e.g. flower jars, pre-roll packs, vapes).
            </p>

<div className="mt-4 grid gap-4 md:grid-cols-2">
              {Object.entries(packaging_concepts).map(([key, concept]) => (
                <div
                  key={key}
                  className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-950/80 p-3 text-xs"
                >
                  <div className="flex items-center justify-between">
                    <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-200">
                      {prettyKey(key)}
                    </span>
                    <span className="rounded-full border border-slate-700 px-2 py-0.5 text-[10px] text-slate-300">
                      Concept
                    </span>
                  </div>

<div>
                    <div className="text-[11px] uppercase tracking-wide text-slate-500">Description</div>
                    <p className="mt-1 text-[11px] text-slate-200">{concept.description}</p>
                  </div>

<div>
                    <div className="text-[11px] uppercase tracking-wide text-slate-500">Finishes & Materials</div>
                    <p className="mt-1 text-[11px] text-slate-300">{concept.finishes}</p>
                  </div>

<div>
                    <div className="text-[11px] uppercase tracking-wide text-emerald-300">Packaging AI Prompt</div>
                    <div className="mt-1 rounded-lg border border-emerald-500/40 bg-slate-950/80 p-2 font-mono text-[11px] leading-relaxed text-emerald-100">
                      {concept.ai_prompt}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>

{/* Voice, Taglines, About */}
          <section className="grid gap-6 md:grid-cols-3">
            {/* Voice */}
            <div className="md:col-span-1 rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
              <h2 className="text-lg font-semibold text-slate-50">Voice & Tone</h2>
              <p className="mt-1 text-[11px] text-slate-400">
                This is how the brand should sound in copy, captions, and conversations.
              </p>

<p className="mt-3 text-sm text-slate-100">{copy_voice.voice_description}</p>
            </div>

{/* Taglines & About */}
            <div className="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">Tagline Options</div>
                  <ul className="mt-2 space-y-1">
                    {copy_voice.taglines.map((line: string) => (
                      <li
                        key={line}
                        className="rounded border border-slate-800 bg-slate-950/80 px-3 py-1.5 text-[11px] text-slate-100"
                      >
                        "{line}"
                      </li>
                    ))}
                  </ul>
                </div>

<div>
                  <div className="text-[11px] uppercase tracking-wide text-slate-500">About Paragraph</div>
                  <p className="mt-2 text-[11px] text-slate-200 whitespace-pre-line">{copy_voice.about_paragraph}</p>
                </div>
              </div>

<div className="mt-4">
                <div className="text-[11px] uppercase tracking-wide text-slate-500">Strain Description Template</div>
                <div className="mt-2 rounded-lg border border-slate-800 bg-slate-950/80 p-3 text-[11px] text-slate-200 whitespace-pre-line">
                  {copy_voice.strain_description_template}
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  )
}

function prettyKey(key: string): string {
  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
}
[V0_FILE]sql:file="scripts/002-add-moodboard-column.sql" isMerged="true"
-- Add moodboard column to brand_kits table
alter table brand_kits
  add column if not exists moodboard jsonb;
[V0_FILE]typescript:file="components/brand-kit/moodboard-section.tsx" isMerged="true"
"use client"

import { useState } from "react"

type MoodboardItem = {
  title: string
  description: string
  tags: string[]
  ai_prompt: string
}

type MoodboardSectionProps = {
  kitId: string
  initialMoodboard?: MoodboardItem[]
}

export function MoodboardSection({ kitId, initialMoodboard }: MoodboardSectionProps) {
  const [items, setItems] = useState<MoodboardItem[]>(initialMoodboard || [])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

async function handleGenerate() {
    try {
      setLoading(true)
      setError(null)

const res = await fetch(`/api/kit/${kitId}/moodboard`, {
        method: "POST",
      })

if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || "Failed to generate moodboard")
      }

const data = (await res.json()) as { moodboard?: MoodboardItem[] }

if (!data.moodboard) {
        throw new Error("No moodboard returned")
      }

setItems(data.moodboard)
    } catch (err: any) {
      console.error(err)
      setError(err?.message ?? "Something went wrong.")
    } finally {
      setLoading(false)
    }
  }

function handleCopyPrompt(prompt: string) {
    if (!prompt.trim()) return
    navigator.clipboard.writeText(prompt).catch((err) => console.error("Copy failed:", err))
  }

return (
    <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <div>
          <h2 className="text-lg font-semibold text-slate-50">Moodboard Prompts</h2>
          <p className="text-[11px] text-slate-400">
            A set of AI-ready prompts and descriptions to guide your visual direction. Paste into Midjourney, Dzine, or
            your preferred tool.
          </p>
        </div>
        <div className="ml-auto flex items-center gap-2">
          <button
            type="button"
            onClick={handleGenerate}
            disabled={loading}
            className="rounded-lg bg-emerald-500 px-3 py-1 text-[11px] font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400 disabled:opacity-60"
          >
            {loading ? "Generating…" : items.length ? "Regenerate" : "Generate"}
          </button>
        </div>
      </div>

{error && (
        <div className="mb-3 rounded border border-red-500/60 bg-red-950/60 px-3 py-2 text-[11px] text-red-200">
          {error}
        </div>
      )}

{items.length === 0 ? (
        <p className="text-[11px] text-slate-400">
          No moodboard yet. Click <span className="text-emerald-300">Generate</span> to create one.
        </p>
      ) : (
        <div className="grid gap-3 md:grid-cols-2">
          {items.map((item, idx) => (
            <div
              key={`${item.title}-${idx}`}
              className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-950/80 p-3"
            >
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-[11px] font-semibold text-slate-100">{item.title}</div>
                  <div className="mt-0.5 text-[10px] text-slate-400">{item.tags?.join(" • ")}</div>
                </div>
                <button
                  type="button"
                  onClick={() => handleCopyPrompt(item.ai_prompt)}
                  className="rounded border border-slate-700 bg-slate-950/70 px-2 py-0.5 text-[10px] text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
                >
                  Copy prompt
                </button>
              </div>
              <p className="text-[11px] text-slate-200">{item.description}</p>
              <div className="mt-1 rounded border border-slate-800 bg-slate-950/80 p-2 font-mono text-[10px] leading-relaxed text-emerald-100">
                {item.ai_prompt}
              </div>
            </div>
          ))}
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/brand-kit/prompt-toolbar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Copy, CheckCircle2, FileJson, FileText } from "lucide-react"

type PromptToolbarProps = {
  kitId?: string
  logoPrompt?: string
  packagingPrompts?: Record<string, string>
  taglines?: string[]
  aboutParagraph?: string
  strainTemplate?: string
  pdfEnabled?: boolean
}

export function PromptToolbar({
  kitId,
  logoPrompt,
  packagingPrompts,
  taglines,
  aboutParagraph,
  strainTemplate,
  pdfEnabled = true,
}: PromptToolbarProps) {
  const [copied, setCopied] = useState(false)

const handleCopyAll = async () => {
    const parts: string[] = []

if (logoPrompt) {
      parts.push("=== Logo Prompt ===", logoPrompt.trim(), "")
    }

if (packagingPrompts && Object.keys(packagingPrompts).length) {
      parts.push("=== Packaging Prompts ===")
      for (const [key, value] of Object.entries(packagingPrompts)) {
        parts.push(`• ${prettifyKey(key)}:`, value.trim(), "")
      }
    }

if (taglines && taglines.length) {
      parts.push("=== Taglines ===")
      for (const line of taglines) {
        parts.push(`- "${line}"`)
      }
      parts.push("")
    }

if (aboutParagraph) {
      parts.push("=== About Paragraph ===", aboutParagraph.trim(), "")
    }

if (strainTemplate) {
      parts.push("=== Strain Description Template ===", strainTemplate.trim(), "")
    }

const text = parts.join("\n")
    if (!text.trim().length) return

try {
      await navigator.clipboard.writeText(text)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy prompts:", err)
    }
  }

return (
    <div className="flex flex-wrap items-center gap-3 rounded-xl border border-slate-800 bg-slate-900/70 px-4 py-3 text-xs shadow-sm">
      <div className="flex flex-col">
        <span className="text-[11px] font-semibold uppercase tracking-wide text-emerald-300">Prompt toolbox</span>
        <span className="text-[11px] text-slate-400">
          Copy everything you need for Midjourney, Dzine, and your copy tools.
        </span>
      </div>

<div className="ml-auto flex flex-wrap items-center gap-2">
        {kitId && (
          <>
            {pdfEnabled && (
              <a
                href={`/api/kit/${kitId}/pdf`}
                className="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1.5 text-[11px] font-medium text-slate-200 transition-colors hover:border-emerald-400 hover:text-emerald-200"
              >
                <FileText className="h-3.5 w-3.5" />
                Download PDF
              </a>
            )}
            <a
              href={`/api/kit/${kitId}/export`}
              className="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1.5 text-[11px] font-medium text-slate-200 transition-colors hover:border-emerald-400 hover:text-emerald-200"
            >
              <FileJson className="h-3.5 w-3.5" />
              Download JSON
            </a>
          </>
        )}

<button
          type="button"
          onClick={handleCopyAll}
          disabled={copied}
          className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-500 px-3 py-1.5 text-[11px] font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 transition-all hover:bg-emerald-400 hover:shadow-emerald-500/60 disabled:opacity-75"
        >
          {copied ? (
            <>
              <CheckCircle2 className="h-3.5 w-3.5" />
              Copied!
            </>
          ) : (
            <>
              <Copy className="h-3.5 w-3.5" />
              Copy all prompts
            </>
          )}
        </button>
      </div>
    </div>
  )
}

function prettifyKey(key: string): string {
  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
}
[V0_FILE]sql:file="scripts/003-add-missing-columns.sql" isMerged="true"
-- Add missing columns to brand_kits table to match the original spec
ALTER TABLE brand_kits
ADD COLUMN IF NOT EXISTS snapshot jsonb,
ADD COLUMN IF NOT EXISTS logo_directions jsonb,
ADD COLUMN IF NOT EXISTS packaging_concepts jsonb,
ADD COLUMN IF NOT EXISTS copy_voice jsonb,
ADD COLUMN IF NOT EXISTS prompts jsonb;

-- Update existing rows to have empty objects for new columns if they're null
UPDATE brand_kits
SET 
  snapshot = COALESCE(snapshot, '{"one_liner": "", "brand_story": "", "positioning": ""}'::jsonb),
  logo_directions = COALESCE(logo_directions, '{}'::jsonb),
  packaging_concepts = COALESCE(packaging_concepts, '{}'::jsonb),
  copy_voice = COALESCE(copy_voice, '{}'::jsonb),
  prompts = COALESCE(prompts, '{}'::jsonb)
WHERE snapshot IS NULL 
   OR logo_directions IS NULL 
   OR packaging_concepts IS NULL 
   OR copy_voice IS NULL 
   OR prompts IS NULL;
[V0_FILE]typescript:file="app/api/test-ai/route.ts" isEdit="true" isMerged="true"
import { generateText } from "ai"
import { createGroq } from "@ai-sdk/groq"

export const maxDuration = 30

export async function GET() {
  try {
    console.log("[v0] Testing Groq AI connection with direct provider...")

const groq = createGroq({
      apiKey: process.env.GROQ_API_KEY,
    })

const { text } = await generateText({
      model: groq("llama-3.3-70b-versatile"),
      prompt: "Say hello and confirm you are working correctly.",
    })

console.log("[v0] Groq AI SUCCESS:", text)

return Response.json({ success: true, text, provider: "Groq Direct" })
  } catch (error) {
    console.error("[v0] Groq AI FAILED:", error)
    return Response.json(
      {
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
        stack: error instanceof Error ? error.stack : undefined,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/generate-kit/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateObject } from "ai"
import { createGroq } from "@ai-sdk/groq"
import { sql } from "@/lib/db"
import { BrandKitSchema, WizardInputSchema } from "@/lib/types"
import { createServerClient } from "@/lib/supabase/server"
import { checkSubscriptionStatus, incrementUsage } from "@/lib/subscription-check"

export const maxDuration = 60

export async function POST(request: NextRequest) {
  try {
    const subscriptionStatus = await checkSubscriptionStatus()

if (!subscriptionStatus.isAuthenticated) {
      return NextResponse.json({ error: "Authentication required" }, { status: 401 })
    }

if (!subscriptionStatus.canCreateKit) {
      return NextResponse.json(
        {
          error: "Kit limit reached",
          usage: subscriptionStatus.usage.kitsThisMonth,
          limit: subscriptionStatus.limits.kitsPerMonth,
        },
        { status: 403 },
      )
    }

const supabase = await createServerClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

const body = await request.json()
    console.log("[v0] Received wizard data:", JSON.stringify(body, null, 2))

const validationResult = WizardInputSchema.safeParse(body)

if (!validationResult.success) {
      console.log("[v0] Validation failed:", validationResult.error.format())
      return NextResponse.json(
        {
          error: "Validation failed",
          details: validationResult.error.format(),
        },
        { status: 400 },
      )
    }

const wizardData = validationResult.data
    console.log("[v0] Validated wizard data successfully")

const brandResult = await sql`
      INSERT INTO brands (name, description, target_audience)
      VALUES (
        ${wizardData.brandName},
        ${`${wizardData.tagline || ""} | Segment: ${wizardData.segment} | Visual Style: ${wizardData.visualStyle} | Products: ${wizardData.productFocus.join(", ")} | Packaging: ${wizardData.packagingPreference}${wizardData.geoContext ? ` | Geo: ${wizardData.geoContext}` : ""}`},
        ${wizardData.targetAudience.join(", ")}
      )
      RETURNING id
    `

const brandId = brandResult[0].id
    console.log("[v0] Created brand with ID:", brandId)

const personalityDescription = Object.entries(wizardData.personality)
      .map(([trait, level]) => `${trait}: ${level}/5`)
      .join(", ")

const promptText = `You are a professional cannabis brand designer and strategist. Generate a COMPLETE brand kit for this cannabis brand:

Brand Name: ${wizardData.brandName}
${wizardData.tagline ? `Tagline: ${wizardData.tagline}` : ""}
Segment: ${wizardData.segment}
Target Audience: ${wizardData.targetAudience.join(", ")}

Brand Personality (1-5 scale): ${personalityDescription}

Visual Style: ${wizardData.visualStyle}
Product Focus: ${wizardData.productFocus.join(", ")}
Packaging Preference: ${wizardData.packagingPreference}
${wizardData.geoContext ? `Geographic Context: ${wizardData.geoContext}` : ""}

Generate a complete brand kit with all required fields.`

console.log("[v0] Calling AI with prompt length:", promptText.length)

const groq = createGroq({
      apiKey: process.env.GROQ_API_KEY,
    })

const { object: brandKit } = await generateObject({
      model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
      schema: BrandKitSchema,
      messages: [
        {
          role: "user",
          content: promptText,
        },
      ],
    })

console.log("[v0] AI generation successful")

const kitResult = await sql`
      INSERT INTO brand_kits (
        brand_id, 
        user_email,
        snapshot,
        colors, 
        typography, 
        voice_tone, 
        visual_direction,
        logo_directions,
        packaging_concepts,
        copy_voice,
        prompts
      )
      VALUES (
        ${brandId},
        ${user?.email},
        ${JSON.stringify(brandKit.snapshot)},
        ${JSON.stringify(brandKit.colors)},
        ${JSON.stringify(brandKit.typography)},
        ${JSON.stringify(brandKit.voiceTone)},
        ${JSON.stringify(brandKit.visualDirection)},
        ${JSON.stringify(brandKit.logo_directions)},
        ${JSON.stringify(brandKit.packaging_concepts)},
        ${JSON.stringify(brandKit.copy_voice)},
        ${JSON.stringify(brandKit.prompts)}
      )
      RETURNING id
    `

const kitId = kitResult[0].id
    console.log("[v0] Saved brand kit with ID:", kitId)

if (user?.email) {
      await incrementUsage(user.email, "kit")
    }

return NextResponse.json({ kitId: String(kitId) }, { status: 201 })
  } catch (error) {
    console.error("[v0] Error generating brand kit:", error)
    if (error instanceof Error) {
      console.error("[v0] Error message:", error.message)
      console.error("[v0] Error stack:", error.stack)
      return NextResponse.json({ error: error.message }, { status: 500 })
    }
    return NextResponse.json({ error: "Failed to generate brand kit" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/moodboard/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandAndKitByKitId, updateBrandKitMoodboard } from "@/lib/db"
import { generateMoodboardForKit } from "@/lib/ai"

type Params = {
  params: Promise<{
    id: string
  }>
}

export async function POST(_req: NextRequest, { params }: Params) {
  try {
    const { id } = await params
    const record = await getBrandAndKitByKitId(id)

if (!record) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

const snapshot = typeof record.snapshot === "string" ? JSON.parse(record.snapshot) : record.snapshot

const brand = {
      brand_name: record.brand_name,
      segment: snapshot?.segment || "Unknown",
      visual_style: snapshot?.visualStyle || "Modern",
      target_audience: snapshot?.targetAudience || [],
      product_focus: snapshot?.productFocus || [],
      packaging_preference: snapshot?.packagingPreference || "Standard",
    }

const kit = {
      colors: record.colors,
      logo_directions: record.logo_directions,
    }

const regen = await generateMoodboardForKit(brand, kit)

await updateBrandKitMoodboard(id, regen.moodboard)

return NextResponse.json({ moodboard: regen.moodboard }, { status: 200 })
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/moodboard:", error)
    return NextResponse.json({ error: "Internal server error", message: error?.message ?? "Unknown" }, { status: 500 })
  }
}

export const maxDuration = 60
[V0_FILE]typescript:file="app/api/name-lab/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateCannabisBrandNames } from "@/lib/ai"

export const maxDuration = 60

export async function POST(req: NextRequest) {
  try {
    const body = (await req.json()) as {
      seedIdea?: string
      segment?: string
      audience?: string
      style?: string
      wordsToAvoid?: string
    }

const result = await generateCannabisBrandNames(body)

return NextResponse.json(result, { status: 200 })
  } catch (error: any) {
    console.error("Error in /api/name-lab:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/images/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

type Params = {
  params: Promise<{
    id: string
  }>
}

export const maxDuration = 60

export async function POST(req: NextRequest, { params }: Params) {
  try {
    const { id } = await params
    const { prompt, n } = (await req.json()) as {
      prompt: string
      n?: number
    }

const trimmed = (prompt || "").trim()
    if (!trimmed) {
      return NextResponse.json({ error: "Prompt is required" }, { status: 400 })
    }

// NOTE: Image generation requires OpenAI or similar provider
    // Since we're using Groq which doesn't support image generation,
    // we return a helpful message instead
    return NextResponse.json(
      {
        error: "Image generation not available",
        message:
          "Image generation requires OpenAI's DALL-E or similar. The prompt is available in the kit for use with Midjourney, DALL-E, or other AI image tools.",
        prompt: trimmed,
      },
      { status: 501 },
    )
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/images:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="components/brand-kit/kit-image-lab.tsx" isMerged="true"
"use client"

import { useState } from "react"

type KitImageLabProps = {
  kitId: string
  logoPrompt?: string
  packagingPrompts?: Record<string, string>
}

export function KitImageLab({ kitId, logoPrompt, packagingPrompts }: KitImageLabProps) {
  const [mode, setMode] = useState<"logo" | "packaging" | "custom">("logo")
  const [selectedPackagingKey, setSelectedPackagingKey] = useState<string>("")
  const [customPrompt, setCustomPrompt] = useState("")
  const [extraStyle, setExtraStyle] = useState(
    "studio lighting, high-end cannabis packaging photography, no people under 21",
  )

const packagingKeys = packagingPrompts ? Object.keys(packagingPrompts) : []

function buildPrompt() {
    if (mode === "custom" && customPrompt.trim()) {
      return `${customPrompt.trim()}${extraStyle ? `, ${extraStyle}` : ""}`
    }

if (mode === "logo") {
      const base = logoPrompt?.trim()
      if (!base) return ""
      return `${base}${extraStyle ? `, ${extraStyle}` : ""}`
    }

if (mode === "packaging") {
      if (!selectedPackagingKey && packagingKeys.length) {
        const fallbackKey = packagingKeys[0]
        const base = packagingPrompts?.[fallbackKey]?.trim()
        if (!base) return ""
        return `${base}${extraStyle ? `, ${extraStyle}` : ""}`
      }

const base = selectedPackagingKey ? packagingPrompts?.[selectedPackagingKey]?.trim() : ""
      if (!base) return ""
      return `${base}${extraStyle ? `, ${extraStyle}` : ""}`
    }

return ""
  }

function handleCopyPrompt() {
    const prompt = buildPrompt()
    if (!prompt.trim()) return
    navigator.clipboard.writeText(prompt).catch((err) => console.error("Copy failed:", err))
  }

return (
    <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
      <div className="mb-3 flex flex-wrap items-center gap-3">
        <div>
          <h2 className="text-lg font-semibold text-slate-50">Image Prompt Builder</h2>
          <p className="text-[11px] text-slate-400">
            Build customized image prompts from your existing logo and packaging prompts. Copy and paste into
            Midjourney, DALL-E, or your preferred AI image tool.
          </p>
        </div>
        <div className="ml-auto flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={handleCopyPrompt}
            className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 text-[11px] font-medium text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
          >
            Copy current prompt
          </button>
        </div>
      </div>

<div className="mb-3 grid gap-3 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
        <div className="space-y-2">
          <div className="flex flex-wrap gap-2 text-[11px]">
            <ModePill label="Logo" active={mode === "logo"} onClick={() => setMode("logo")} disabled={!logoPrompt} />
            <ModePill
              label="Packaging"
              active={mode === "packaging"}
              onClick={() => setMode("packaging")}
              disabled={!packagingKeys.length}
            />
            <ModePill label="Custom" active={mode === "custom"} onClick={() => setMode("custom")} />
          </div>

{mode === "packaging" && packagingKeys.length > 0 && (
            <div className="flex flex-wrap gap-2 text-[11px]">
              {packagingKeys.map((key) => (
                <button
                  key={key}
                  type="button"
                  onClick={() => setSelectedPackagingKey(key)}
                  className={`rounded-full border px-2 py-0.5 ${
                    selectedPackagingKey === key
                      ? "border-emerald-400 bg-emerald-500/10 text-emerald-200"
                      : "border-slate-700 bg-slate-950/80 text-slate-300 hover:border-emerald-400 hover:text-emerald-200"
                  }`}
                >
                  {prettyKey(key)}
                </button>
              ))}
            </div>
          )}

{mode === "custom" && (
            <textarea
              className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
              rows={3}
              placeholder="Describe the logo or packaging concept you want to see…"
              value={customPrompt}
              onChange={(e) => setCustomPrompt(e.target.value)}
            />
          )}

<div className="mt-2">
            <div className="mb-1 text-[10px] uppercase tracking-wide text-slate-500">
              Extra style / environment (appended)
            </div>
            <input
              className="w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
              value={extraStyle}
              onChange={(e) => setExtraStyle(e.target.value)}
            />
          </div>
        </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/80 p-3 text-[11px] text-slate-300">
          <div className="text-[10px] uppercase tracking-wide text-slate-500">Current prompt</div>
          <div className="mt-1 max-h-40 overflow-auto rounded border border-slate-800 bg-slate-950/90 p-2 font-mono text-[10px] leading-relaxed text-emerald-100">
            {buildPrompt() || "No prompt yet. Select a mode or enter custom text."}
          </div>
        </div>
      </div>
    </section>
  )
}

function ModePill({
  label,
  active,
  onClick,
  disabled,
}: {
  label: string
  active: boolean
  onClick: () => void
  disabled?: boolean
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={`rounded-full border px-3 py-0.5 ${
        active
          ? "border-emerald-400 bg-emerald-500/10 text-emerald-200"
          : "border-slate-700 bg-slate-950/80 text-slate-300 hover:border-emerald-400 hover:text-emerald-200 disabled:opacity-40"
      }`}
    >
      {label}
    </button>
  )
}

function prettyKey(key: string): string {
  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
}
[V0_FILE]typescript:file="app/name-lab/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"

type NameIdea = {
  name: string
  rationale: string
  domain_idea: string
}

export default function NameLabPage() {
  const [seedIdea, setSeedIdea] = useState("")
  const [segment, setSegment] = useState("Flower / THC")
  const [audience, setAudience] = useState("Nightlife professionals")
  const [style, setStyle] = useState("Luxury minimal")
  const [wordsToAvoid, setWordsToAvoid] = useState("kiddie, cartoon, kush, chronic")
  const [loading, setLoading] = useState(false)
  const [names, setNames] = useState<NameIdea[]>([])
  const [error, setError] = useState<string | null>(null)

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    try {
      setLoading(true)
      setError(null)
      setNames([])

const res = await fetch("/api/name-lab", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          seedIdea,
          segment,
          audience,
          style,
          wordsToAvoid,
        }),
      })

if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || "Failed to generate names")
      }

const data = (await res.json()) as { names?: NameIdea[] }
      setNames(data.names || [])
    } catch (err: any) {
      console.error(err)
      setError(err?.message ?? "Something went wrong.")
    } finally {
      setLoading(false)
    }
  }

function handleCopyName(idea: NameIdea) {
    const text = `${idea.name}\n\nWhy it works:\n${idea.rationale}\n\nDomain idea: ${idea.domain_idea}`
    navigator.clipboard.writeText(text).catch((err) => console.error("Copy failed:", err))
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-5xl px-4 py-10">
        <header className="mb-8 flex flex-col gap-3 border-b border-slate-800 pb-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">Name Lab</h1>
            <p className="mt-1 text-sm text-slate-300">
              Generate cannabis-ready brand names with rationale and domain ideas.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-xs">
            <Link
              href="/"
              className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1.5 text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
            >
              ← Back to Cannabrand Studio
            </Link>
            <Link
              href="/wizard"
              className="rounded-lg bg-emerald-500 px-3 py-1.5 font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
            >
              Turn name into brand kit
            </Link>
          </div>
        </header>

<main className="grid gap-6 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
            <h2 className="text-sm font-semibold text-slate-50">Inputs</h2>
            <p className="mt-1 text-[11px] text-slate-400">
              You can be casual here — just enough context for the AI to aim the names in the right direction.
            </p>

<form className="mt-4 space-y-3" onSubmit={handleSubmit}>
              <div>
                <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                  Seed idea / notes
                </label>
                <textarea
                  className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                  rows={3}
                  placeholder='e.g. "elevated nightlife flower brand, dark glass jars, diamond motif"'
                  value={seedIdea}
                  onChange={(e) => setSeedIdea(e.target.value)}
                />
              </div>

<div className="grid gap-3 md:grid-cols-2">
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Segment
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={segment}
                    onChange={(e) => setSegment(e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Audience
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={audience}
                    onChange={(e) => setAudience(e.target.value)}
                  />
                </div>
              </div>

<div className="grid gap-3 md:grid-cols-2">
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Style
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={style}
                    onChange={(e) => setStyle(e.target.value)}
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Words / vibes to avoid
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={wordsToAvoid}
                    onChange={(e) => setWordsToAvoid(e.target.value)}
                  />
                </div>
              </div>

{error && (
                <div className="rounded border border-red-500/60 bg-red-950/60 px-3 py-2 text-[11px] text-red-200">
                  {error}
                </div>
              )}

<button
                type="submit"
                disabled={loading}
                className="mt-2 inline-flex items-center rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400 disabled:opacity-60"
              >
                {loading ? "Generating…" : "Generate names"}
              </button>
            </form>
          </section>

<section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
            <h2 className="text-sm font-semibold text-slate-50">Name ideas</h2>
            <p className="mt-1 text-[11px] text-slate-400">
              Click "Generate names" to see options. You can copy any idea out to use in your kit wizard, decks, or
              domain searches.
            </p>

{names.length === 0 ? (
              <p className="mt-4 text-[11px] text-slate-500">
                No names yet. Start by entering a bit of context on the left.
              </p>
            ) : (
              <div className="mt-4 space-y-3">
                {names.map((idea) => (
                  <div key={idea.name} className="rounded-xl border border-slate-800 bg-slate-950/80 p-3">
                    <div className="mb-1 flex items-center justify-between">
                      <div>
                        <div className="text-sm font-semibold text-slate-50">{idea.name}</div>
                        <div className="text-[10px] text-slate-400">Suggested domain: {idea.domain_idea}</div>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleCopyName(idea)}
                        className="rounded border border-slate-700 bg-slate-950/70 px-2 py-0.5 text-[10px] text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
                      >
                        Copy
                      </button>
                    </div>
                    <p className="text-[11px] text-slate-200">{idea.rationale}</p>
                  </div>
                ))}
              </div>
            )}
          </section>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/kit/[id]/duplicate/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { duplicateBrandKit, getBrandAndKitByKitId } from "@/lib/db"

type Params = {
  params: {
    id: string
  }
}

export async function POST(_req: NextRequest, { params }: Params) {
  try {
    // Optional sanity check to make sure kit exists
    const existing = await getBrandAndKitByKitId(params.id)
    if (!existing) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

const newId = await duplicateBrandKit(params.id)

if (!newId) {
      return NextResponse.json({ error: "Unable to duplicate kit" }, { status: 500 })
    }

return NextResponse.json(
      {
        id: newId,
        message: "Brand kit duplicated successfully",
      },
      { status: 200 },
    )
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/duplicate:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="components/brand-kit/regenerate-controls.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"

type RegenerateControlsProps = {
  kitId: string
}

export function RegenerateControls({ kitId }: RegenerateControlsProps) {
  const [busy, setBusy] = useState<null | "colors" | "packaging" | "copy" | "duplicate">(null)
  const [message, setMessage] = useState<string | null>(null)

async function handleRegen(type: "colors" | "packaging" | "copy") {
    try {
      setBusy(type)
      setMessage(null)

const res = await fetch(`/api/kit/${kitId}/regenerate/${type}`, {
        method: "POST",
      })

if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || `Failed to regenerate ${type}`)
      }

// Soft reload the page to show new data
      if (typeof window !== "undefined") {
        window.location.reload()
      }
    } catch (err: any) {
      console.error(err)
      setMessage(err?.message ?? "Something went wrong.")
    } finally {
      setBusy(null)
    }
  }

async function handleDuplicate() {
    try {
      setBusy("duplicate")
      setMessage(null)

const res = await fetch(`/api/kit/${kitId}/duplicate`, {
        method: "POST",
      })

if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || "Failed to duplicate kit")
      }

const data = await res.json()
      const newId = data.id as string | undefined

if (!newId) {
        throw new Error("No new kit id returned")
      }

if (typeof window !== "undefined") {
        window.location.href = `/kit/${newId}`
      }
    } catch (err: any) {
      console.error(err)
      setMessage(err?.message ?? "Something went wrong.")
    } finally {
      setBusy(null)
    }
  }

return (
    <div className="flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900/70 p-3 text-[11px]">
      <div className="flex items-center justify-between">
        <span className="font-semibold text-slate-200">Regenerate sections</span>
        {busy && <span className="text-[10px] text-emerald-300">Regenerating {busy}…</span>}
      </div>

<p className="text-[11px] text-slate-400">
        Tweak parts of this kit without starting over. Each action calls the AI with your existing brand context.
      </p>

<div className="mt-1 flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => handleRegen("colors")}
          disabled={!!busy}
          className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 font-medium text-slate-200 hover:border-emerald-400 hover:text-emerald-200 disabled:opacity-50"
        >
          Regenerate colors
        </button>
        <button
          type="button"
          onClick={() => handleRegen("packaging")}
          disabled={!!busy}
          className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 font-medium text-slate-200 hover:border-emerald-400 hover:text-emerald-200 disabled:opacity-50"
        >
          Regenerate packaging
        </button>
        <button
          type="button"
          onClick={() => handleRegen("copy")}
          disabled={!!busy}
          className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 font-medium text-slate-200 hover:border-emerald-400 hover:text-emerald-200 disabled:opacity-50"
        >
          Regenerate copy & taglines
        </button>

<button
          type="button"
          onClick={handleDuplicate}
          disabled={!!busy}
          className="rounded-lg border border-emerald-500/70 bg-emerald-500/10 px-3 py-1 font-medium text-emerald-200 hover:bg-emerald-500/20 disabled:opacity-50"
        >
          Duplicate as new version
        </button>
      </div>

{message && (
        <div className="mt-1 rounded border border-red-500/60 bg-red-950/60 px-2 py-1 text-[10px] text-red-200">
          {message}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/strain-lab/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateStrainNames } from "@/lib/ai"

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { brandName, segment, audience, vibe, count } = body

if (!segment || !audience || !vibe) {
      return NextResponse.json({ error: "Missing required fields: segment, audience, vibe" }, { status: 400 })
    }

const validCount = Math.min(Math.max(count || 8, 3), 20)

const result = await generateStrainNames({
      brandName: brandName || undefined,
      segment,
      audience,
      vibe,
      count: validCount,
    })

return NextResponse.json(result)
  } catch (error: any) {
    console.error("[v0] Error in strain-lab API:", error)
    return NextResponse.json({ error: error.message || "Failed to generate strain names" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/strain-lab/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { ErrorMessage } from "@/components/ui/error-message"
import { Loader2, Copy, CheckCircle2 } from "lucide-react"

type StrainIdea = {
  name: string
  type: string
  rationale: string
  notes: string
}

export default function StrainLabPage() {
  const [brandName, setBrandName] = useState("")
  const [segment, setSegment] = useState("Flower")
  const [audience, setAudience] = useState("Nightlife professionals")
  const [vibe, setVibe] = useState("Luxury minimal, after-hours, no clichés")
  const [count, setCount] = useState(8)
  const [loading, setLoading] = useState(false)
  const [ideas, setIdeas] = useState<StrainIdea[]>([])
  const [error, setError] = useState<string | null>(null)
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)

function handleStartBrand(strainName: string) {
    // Navigate to wizard with strain name as query parameter
    const params = new URLSearchParams({ name: strainName })
    window.location.href = `/wizard?${params.toString()}`
  }

async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    try {
      setLoading(true)
      setError(null)
      setIdeas([])

const res = await fetch("/api/strain-lab", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          brandName,
          segment,
          audience,
          vibe,
          count,
        }),
      })

if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || "Failed to generate names")
      }

const data = (await res.json()) as { names?: StrainIdea[] }
      setIdeas(data.names || [])
    } catch (err: any) {
      console.error(err)
      setError(err?.message ?? "Something went wrong.")
    } finally {
      setLoading(false)
    }
  }

function handleCopy(idea: StrainIdea, idx: number) {
    const text = `${idea.name} (${idea.type})\n\nWhy it works:\n${idea.rationale}\n\nNotes: ${idea.notes}`
    navigator.clipboard
      .writeText(text)
      .then(() => {
        setCopiedIndex(idx)
        setTimeout(() => setCopiedIndex(null), 2000)
      })
      .catch((err) => console.error("Copy failed:", err))
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-5xl px-4 py-10">
        <header className="mb-8 flex flex-col gap-3 border-b border-slate-800 pb-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <div className="text-[11px] uppercase tracking-wide text-emerald-300">Cannabrand Studio</div>
            <h1 className="text-2xl font-semibold tracking-tight">Strain & Product Name Lab</h1>
            <p className="mt-1 text-sm text-slate-300">
              Generate legal, on-brand strain or SKU names tuned to your brand's vibe and audience.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-xs">
            <Link
              href="/studio"
              className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1.5 text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
            >
              ← Studio
            </Link>
            <Link
              href="/wizard"
              className="rounded-lg bg-emerald-500 px-3 py-1.5 font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
            >
              Turn into brand kit
            </Link>
          </div>
        </header>

<main className="grid gap-6 md:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
          {/* Form */}
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
            <h2 className="text-sm font-semibold text-slate-50">Inputs</h2>
            <p className="mt-1 text-[11px] text-slate-400">
              This is for naming individual products or strains — not the parent brand. You can reuse the same settings
              across multiple brands.
            </p>

<form className="mt-4 space-y-3" onSubmit={handleSubmit}>
              <div>
                <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                  Brand name (optional)
                </label>
                <input
                  className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                  value={brandName}
                  onChange={(e) => setBrandName(e.target.value)}
                  placeholder="e.g. Blue Diamonds"
                />
              </div>

<div className="grid gap-3 md:grid-cols-2">
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Segment / product type
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={segment}
                    onChange={(e) => setSegment(e.target.value)}
                    placeholder="Flower, vapes, pre-rolls, edibles, CBD topicals…"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Audience
                  </label>
                  <input
                    className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={audience}
                    onChange={(e) => setAudience(e.target.value)}
                  />
                </div>
              </div>

<div>
                <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                  Vibe / naming direction
                </label>
                <textarea
                  className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                  rows={3}
                  value={vibe}
                  onChange={(e) => setVibe(e.target.value)}
                  placeholder="e.g. After-hours, nightlife, subtle cosmic references, no cheesy puns."
                />
              </div>

<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
                <div>
                  <label className="block text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                    Number of ideas
                  </label>
                  <input
                    type="number"
                    min={3}
                    max={20}
                    className="mt-1 w-24 rounded-lg border border-slate-800 bg-slate-950/80 px-2 py-1 text-[11px] text-slate-100 outline-none focus:border-emerald-400"
                    value={count}
                    onChange={(e) => setCount(Number.parseInt(e.target.value || "0", 10))}
                  />
                </div>
              </div>

{error && <ErrorMessage message={error} onRetry={() => setError(null)} />}

<button
                type="submit"
                disabled={loading}
                className="mt-2 inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {loading ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Generating…
                  </>
                ) : (
                  "Generate names"
                )}
              </button>
            </form>
          </section>

{/* Results */}
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-5 text-xs">
            <h2 className="text-sm font-semibold text-slate-50">Name ideas</h2>
            <p className="mt-1 text-[11px] text-slate-400">
              Copy any idea and plug it into your packaging, menus, or Cannabrand wizard.
            </p>

{loading ? (
              <div className="mt-4 flex items-center justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin text-emerald-400" />
                <span className="ml-2 text-sm text-slate-400">Generating names...</span>
              </div>
            ) : ideas.length === 0 ? (
              <p className="mt-4 text-[11px] text-slate-500">
                No ideas yet. Give the model some context on the left and hit Generate.
              </p>
            ) : (
              <div className="mt-4 space-y-3">
                {ideas.map((idea, idx) => (
                  <div key={`${idea.name}-${idx}`} className="rounded-xl border border-slate-800 bg-slate-950/80 p-3">
                    <div className="mb-1 flex items-center justify-between">
                      <div>
                        <div className="text-sm font-semibold text-slate-50">{idea.name}</div>
                        <div className="text-[10px] text-slate-400">Type: {idea.type}</div>
                      </div>
                      <div className="flex items-center gap-1">
                        <button
                          type="button"
                          onClick={() => handleStartBrand(idea.name)}
                          className="flex items-center gap-1 rounded border border-emerald-600 bg-emerald-600/20 px-2 py-0.5 text-[10px] text-emerald-200 hover:bg-emerald-600/30 transition-colors"
                        >
                          Start Brand →
                        </button>
                        <button
                          type="button"
                          onClick={() => handleCopy(idea, idx)}
                          className="flex items-center gap-1 rounded border border-slate-700 bg-slate-950/70 px-2 py-0.5 text-[10px] text-slate-200 hover:border-emerald-400 hover:text-emerald-200 transition-colors"
                        >
                          {copiedIndex === idx ? (
                            <>
                              <CheckCircle2 className="h-3 w-3" />
                              Copied!
                            </>
                          ) : (
                            <>
                              <Copy className="h-3 w-3" />
                              Copy
                            </>
                          )}
                        </button>
                      </div>
                    </div>
                    <p className="text-[11px] text-slate-200">{idea.rationale}</p>
                    {idea.notes && <p className="mt-1 text-[10px] text-slate-400">Notes: {idea.notes}</p>}
                  </div>
                ))}
              </div>
            )}
          </section>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/kit/[id]/delete/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { deleteBrandKit } from "@/lib/db"

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { id } = params

console.log("[v0] DELETE request for kit ID:", id)

if (!id || id === "demo") {
      console.log("[v0] Invalid kit ID:", id)
      return NextResponse.json({ error: "Invalid kit ID" }, { status: 400 })
    }

await deleteBrandKit(id)

console.log("[v0] Successfully deleted kit:", id)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("[v0] Error deleting brand kit:", error)
    return NextResponse.json({ error: "Failed to delete brand kit" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/002-add-public-sharing.sql" isMerged="true"
-- Add public sharing columns to brand_kits table
ALTER TABLE brand_kits
  ADD COLUMN IF NOT EXISTS public_slug TEXT,
  ADD COLUMN IF NOT EXISTS is_public BOOLEAN DEFAULT FALSE;

-- Create index for faster public slug lookups
CREATE INDEX IF NOT EXISTS idx_brand_kits_public_slug
  ON brand_kits(public_slug);
[V0_FILE]typescript:file="app/api/kit/[id]/share/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { randomUUID } from "crypto"
import { getBrandKitById, setBrandKitPublic, clearBrandKitPublic } from "@/lib/db"

export const runtime = "nodejs"
export const dynamic = "force-dynamic"

type Params = {
  params: {
    id: string
  }
}

function generateSlug() {
  return randomUUID().replace(/-/g, "").slice(0, 10)
}

export async function POST(req: NextRequest, { params }: Params) {
  try {
    const kit = await getBrandKitById(params.id)

if (!kit) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

let slug = kit.public_slug
    if (!slug) {
      slug = generateSlug()
      await setBrandKitPublic(kit.id, slug)
    }

return NextResponse.json(
      {
        id: kit.id,
        public_slug: slug,
        is_public: true,
      },
      { status: 200 },
    )
  } catch (error: any) {
    console.error("[v0] Error in /api/kit/[id]/share POST:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown",
      },
      { status: 500 },
    )
  }
}

export async function DELETE(_req: NextRequest, { params }: Params) {
  try {
    const kit = await getBrandKitById(params.id)

if (!kit) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

await clearBrandKitPublic(kit.id)

return NextResponse.json(
      {
        id: kit.id,
        public_slug: null,
        is_public: false,
      },
      { status: 200 },
    )
  } catch (error: any) {
    console.error("[v0] Error in /api/kit/[id]/share DELETE:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/preview/[slug]/page.tsx" isMerged="true"
import { notFound } from "next/navigation"
import { getBrandKitByPublicSlug } from "@/lib/db"

export const dynamic = "force-dynamic"

export default async function PreviewPage({
  params,
}: {
  params: { slug: string }
}) {
  const record = await getBrandKitByPublicSlug(params.slug)

if (!record) {
    return notFound()
  }

const {
    id,
    snapshot,
    colors,
    typography,
    logo_directions,
    packaging_concepts,
    copy_voice,
    moodboard,
    created_at,
    brand_name,
    segment,
  } = record as any

const primaryHex = (Array.isArray(colors) && colors[0]?.hex) || "#22c55e"
  const accentForCss = `${primaryHex}33`

const createdDate = created_at
    ? new Date(created_at).toLocaleString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
      })
    : undefined

return (
    <div
      className="min-h-screen bg-slate-950 text-slate-50"
      style={{
        backgroundImage: `radial-gradient(circle at top, ${accentForCss} 0%, transparent 55%), radial-gradient(circle at bottom, #020617 0%, #020617 55%)`,
      }}
    >
      <div className="mx-auto max-w-5xl px-4 py-8">
        <header className="mb-6 border-b border-slate-800 pb-4">
          <div className="mb-1 text-[11px] uppercase tracking-wide text-emerald-300">
            Cannabrand Studio • Read-only preview
          </div>
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <h1 className="text-2xl font-semibold tracking-tight text-slate-100">
                {brand_name ?? "Cannabis Brand Kit"}
              </h1>
              <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-slate-400">
                {segment && <span>{segment}</span>}
                {createdDate && (
                  <>
                    <span>•</span>
                    <span>Generated {createdDate}</span>
                  </>
                )}
              </div>
            </div>
            <div className="flex flex-col items-end gap-2 text-[11px]">
              <a
                href={`/api/kit/${id}/pdf`}
                className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 font-medium text-slate-200 transition-colors hover:border-emerald-400 hover:text-emerald-200"
              >
                Download PDF
              </a>
              <a
                href={`/api/kit/${id}/export`}
                className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1 font-medium text-slate-200 transition-colors hover:border-emerald-400 hover:text-emerald-200"
              >
                Download JSON
              </a>
            </div>
          </div>
        </header>

<main className="space-y-6 text-xs">
          {/* Brand Snapshot */}
          {snapshot && (
            <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Brand Snapshot</h2>
              <div className="mt-3 space-y-4">
                {snapshot.one_liner && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">One-liner</div>
                    <p className="mt-1 text-[11px] leading-relaxed text-slate-200">{snapshot.one_liner}</p>
                  </div>
                )}
                {snapshot.brand_story && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Brand Story</div>
                    <p className="mt-1 whitespace-pre-wrap text-[11px] leading-relaxed text-slate-200">
                      {snapshot.brand_story}
                    </p>
                  </div>
                )}
                {snapshot.positioning && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Positioning</div>
                    <p className="mt-1 text-[11px] leading-relaxed text-slate-200">{snapshot.positioning}</p>
                  </div>
                )}
              </div>
            </section>
          )}

{/* Colors & Typography */}
          <section className="grid gap-4 md:grid-cols-2">
            {/* Colors */}
            <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Color System</h2>
              <div className="mt-3 space-y-2">
                {Array.isArray(colors) && colors.length > 0 ? (
                  colors.map((c: any, idx: number) => (
                    <div key={`${c.name}-${idx}`} className="flex items-center gap-3">
                      <div
                        className="h-10 w-10 rounded-lg border border-slate-700 shadow-sm"
                        style={{ backgroundColor: c.hex }}
                      />
                      <div className="text-[11px]">
                        <div className="font-semibold text-slate-100">{c.name || "Color"}</div>
                        <div className="text-[10px] text-slate-400">
                          {c.hex}
                          {c.usage && ` • ${c.usage}`}
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <p className="text-[11px] text-slate-400">No colors defined.</p>
                )}
              </div>
            </div>

{/* Typography */}
            <div className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Typography</h2>
              <div className="mt-3 space-y-3 text-[11px]">
                {typography?.headline_style && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      Heading Style
                    </div>
                    <p className="mt-1 text-slate-200">{typography.headline_style}</p>
                  </div>
                )}
                {typography?.body_style && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Body Style</div>
                    <p className="mt-1 text-slate-200">{typography.body_style}</p>
                  </div>
                )}
                {typography?.usage_notes && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Usage Notes</div>
                    <p className="mt-1 text-slate-200">{typography.usage_notes}</p>
                  </div>
                )}
              </div>
            </div>
          </section>

{/* Logo Directions */}
          {logo_directions && (
            <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Logo Directions & Motifs</h2>
              <div className="mt-3 space-y-3 text-[11px]">
                {logo_directions.summary && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Summary</div>
                    <p className="mt-1 leading-relaxed text-slate-200">{logo_directions.summary}</p>
                  </div>
                )}
                {logo_directions.motifs && Array.isArray(logo_directions.motifs) && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      Motifs & Symbols
                    </div>
                    <p className="mt-1 text-slate-200">{logo_directions.motifs.join(", ")}</p>
                  </div>
                )}
                {logo_directions.treatment_notes && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      Treatment Notes
                    </div>
                    <p className="mt-1 leading-relaxed text-slate-200">{logo_directions.treatment_notes}</p>
                  </div>
                )}
              </div>
            </section>
          )}

{/* Packaging Concepts */}
          {packaging_concepts && typeof packaging_concepts === "object" && (
            <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Packaging Concepts</h2>
              <div className="mt-3 space-y-4">
                {Object.entries(packaging_concepts).map(([key, concept]: [string, any]) => (
                  <div key={key} className="text-[11px]">
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      {key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
                    </div>
                    <p className="mt-1 leading-relaxed text-slate-200">{concept?.description || "—"}</p>
                    {concept?.finishes && (
                      <p className="mt-1 text-[10px] text-slate-400">Finishes: {concept.finishes}</p>
                    )}
                  </div>
                ))}
              </div>
            </section>
          )}

{/* Voice & Copy */}
          {copy_voice && (
            <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Voice & Copy</h2>
              <div className="mt-3 space-y-3 text-[11px]">
                {copy_voice.voice_description && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      Voice Description
                    </div>
                    <p className="mt-1 leading-relaxed text-slate-200">{copy_voice.voice_description}</p>
                  </div>
                )}
                {copy_voice.taglines && Array.isArray(copy_voice.taglines) && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">Taglines</div>
                    <div className="mt-2 flex flex-wrap gap-2">
                      {copy_voice.taglines.map((t: string, idx: number) => (
                        <span
                          key={idx}
                          className="rounded-full border border-slate-700 bg-slate-950/50 px-3 py-1 text-[10px] text-slate-100"
                        >
                          "{t}"
                        </span>
                      ))}
                    </div>
                  </div>
                )}
                {copy_voice.about_paragraph && (
                  <div>
                    <div className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
                      About Paragraph
                    </div>
                    <p className="mt-1 whitespace-pre-wrap leading-relaxed text-slate-200">
                      {copy_voice.about_paragraph}
                    </p>
                  </div>
                )}
              </div>
            </section>
          )}

{/* Moodboard */}
          {moodboard && Array.isArray(moodboard) && moodboard.length > 0 && (
            <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-6">
              <h2 className="text-sm font-semibold text-slate-100">Moodboard</h2>
              <div className="mt-3 grid gap-3 md:grid-cols-2">
                {moodboard.map((item: any, idx: number) => (
                  <div key={`${item.title}-${idx}`} className="rounded-xl border border-slate-800 bg-slate-950/80 p-4">
                    <div className="text-[11px] font-semibold text-slate-100">{item.title}</div>
                    <div className="mt-1 text-[11px] leading-relaxed text-slate-200">{item.description}</div>
                    {item.tags && Array.isArray(item.tags) && (
                      <div className="mt-2 text-[10px] text-slate-400">{item.tags.join(" • ")}</div>
                    )}
                  </div>
                ))}
              </div>
            </section>
          )}
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/kit/[id]/pdf/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { jsPDF } from "jspdf"
import { getBrandKitById, trackKitDownload } from "@/lib/db"

export const runtime = "nodejs"
export const dynamic = "force-dynamic"

type Params = {
  params: Promise<{
    id: string
  }>
}

export async function GET(request: NextRequest, context: Params) {
  try {
    console.log("[v0] PDF generation starting")
    const { id } = await context.params
    console.log("[v0] Kit ID:", id)

let kit: any
    let brand: any
    let createdAt: string

if (id === "demo") {
      kit = {
        id: "demo",
        brand_id: "demo",
        colors: [
          { name: "Midnight Blue", hex: "#1e3a5f", usage: "primary", description: "Deep, sophisticated primary color" },
          { name: "Diamond White", hex: "#f8f9fa", usage: "secondary", description: "Clean, premium secondary" },
          { name: "Silver", hex: "#cbd5e1", usage: "accent", description: "Refined accent color" },
        ],
        typography: [
          { role: "Heading", font: "Playfair Display", weight: "700", description: "Elegant serif for headings" },
          { role: "Body", font: "Inter", weight: "400", description: "Modern sans-serif for body text" },
        ],
        logo_directions: [
          {
            concept: "Geometric Diamond",
            description: "A minimalist diamond icon representing quality and clarity",
            motifs: ["diamond", "luxury", "geometry"],
            prompt: "Create a minimalist diamond icon with clean geometric lines...",
          },
        ],
        packaging_concepts: [
          {
            concept: "Premium Glass Jar",
            description: "Elegant glass packaging with metallic accents",
            prompt: "Design elegant glass packaging with silver metallic cap...",
          },
        ],
        copy_voice: {
          tone: ["sophisticated", "premium", "refined"],
          voice_description: "Refined and elegant communication style",
          taglines: ["Crafted for Connoisseurs", "Premium Quality", "Diamond Standard"],
        },
        snapshot: {
          oneLiner: "Premium craft cannabis for the modern connoisseur",
          brandStory: "Blue Diamonds was born from a passion for quality and craftsmanship.",
        },
        moodboard: null,
        created_at: new Date().toISOString(),
      }
      brand = { name: "Blue Diamonds", description: "Premium craft cannabis brand" }
      createdAt = "Demo Kit"
    } else {
      const numericId = Number.parseInt(id, 10)
      if (isNaN(numericId)) {
        return NextResponse.json({ error: "Invalid kit ID" }, { status: 400 })
      }

const result = await getBrandKitById(numericId)
      if (!result) {
        return NextResponse.json({ error: "Kit not found" }, { status: 404 })
      }

kit = result
      brand = { name: kit.brand_name || "Brand", description: "" }
      createdAt = kit.created_at ? new Date(kit.created_at).toLocaleDateString() : ""

try {
        await trackKitDownload(numericId, "pdf")
      } catch (trackError) {
        console.warn("[v0] Failed to track PDF download:", trackError)
      }
    }

const brandName = String(brand?.name || "Cannabis Brand")
    const brandDesc = String(brand?.description || "")
    const timestamp = String(createdAt || "")

const colorsList = Array.isArray(kit.colors) ? kit.colors : []
    const fontsList = Array.isArray(kit.typography) ? kit.typography : []
    const logoList = Array.isArray(kit.logo_directions) ? kit.logo_directions : []
    const packagingList = Array.isArray(kit.packaging_concepts) ? kit.packaging_concepts : []

const copyVoice = kit.copy_voice || {}
    const voiceList = Array.isArray(copyVoice.tone) ? copyVoice.tone : []
    const taglinesArray = Array.isArray(copyVoice.taglines) ? copyVoice.taglines : []
    const voiceDesc = String(copyVoice.voice_description || "")

const snapshot = kit.snapshot || {}
    const oneLiner = String(snapshot.oneLiner || "")
    const brandStory = String(snapshot.brandStory || "")

const doc = new jsPDF({
      orientation: "portrait",
      unit: "mm",
      format: "a4",
    })

// Define colors and styling constants
    const darkBg = "#050816"
    const textColor = "#E5E7EB"
    const accentColor = "#A7F3D0"
    const mutedColor = "#9CA3AF"
    const labelColor = "#6B7280"

let yPos = 20
    const margin = 20
    const lineHeight = 7
    const maxWidth = 170

// Helper function to add text with word wrap
    const addText = (text: string, fontSize: number, color: string, isBold = false) => {
      doc.setFontSize(fontSize)
      doc.setTextColor(color)
      doc.setFont("helvetica", isBold ? "bold" : "normal")

const lines = doc.splitTextToSize(text, maxWidth)
      lines.forEach((line: string) => {
        if (yPos > 280) {
          doc.addPage()
          yPos = 20
        }
        doc.text(line, margin, yPos)
        yPos += lineHeight
      })
    }

const addSmallLabel = (label: string) => {
      doc.setFontSize(8)
      doc.setTextColor(labelColor)
      doc.setFont("helvetica", "bold")
      doc.text(label.toUpperCase(), margin, yPos)
      yPos += 5
    }

const addSection = (title: string) => {
      yPos += 5
      doc.setFontSize(12)
      doc.setTextColor(accentColor)
      doc.setFont("helvetica", "bold")
      doc.text(title, margin, yPos)
      yPos += 8
    }

// Header
    doc.setFontSize(18)
    doc.setTextColor(accentColor)
    doc.setFont("helvetica", "bold")
    doc.text(brandName, margin, yPos)
    yPos += 10

if (brandDesc) {
      addText(brandDesc, 10, mutedColor)
      yPos += 3
    }

if (timestamp) {
      doc.setFontSize(9)
      doc.setTextColor(mutedColor)
      doc.text(`Generated: ${timestamp}`, margin, yPos)
      yPos += 10
    }

// Brand Snapshot
    if (oneLiner || brandStory) {
      addSection("Brand Snapshot")

if (oneLiner) {
        addSmallLabel("ONE-LINER")
        addText(oneLiner, 10, textColor)
        yPos += 3
      }

if (brandStory) {
        addSmallLabel("BRAND STORY")
        addText(brandStory, 10, textColor)
        yPos += 3
      }
    }

// Color System
    if (colorsList.length > 0) {
      addSection("Color System")

colorsList.forEach((c: any) => {
        const colorName = String(c.name || "Color")
        const colorHex = String(c.hex || "#000000")
        const colorDesc = String(c.description || "")

// Draw color box
        doc.setFillColor(colorHex)
        doc.rect(margin, yPos - 3, 10, 5, "F")

// Color name and hex
        doc.setFontSize(10)
        doc.setTextColor(textColor)
        doc.text(`${colorName} — ${colorHex}`, margin + 12, yPos)
        yPos += 5

if (colorDesc) {
          doc.setFontSize(9)
          doc.setTextColor(mutedColor)
          const descLines = doc.splitTextToSize(colorDesc, maxWidth - 12)
          descLines.forEach((line: string) => {
            doc.text(line, margin + 12, yPos)
            yPos += 5
          })
        }
        yPos += 2
      })
    }

// Typography
    if (fontsList.length > 0) {
      addSection("Typography")

fontsList.forEach((f: any) => {
        const fontName = String(f.font || "")
        const fontRole = String(f.role || "")
        const fontDesc = String(f.description || "")

addText(`${fontRole}: ${fontName}`, 10, textColor, true)
        if (fontDesc) {
          addText(fontDesc, 9, mutedColor)
        }
        yPos += 2
      })
    }

// Logo Directions
    if (logoList.length > 0) {
      addSection("Logo Directions & Motifs")

logoList.forEach((logo: any) => {
        const logoDesc = String(logo.description || logo.concept || "")
        const logoPrompt = String(logo.prompt || "")

addText(logoDesc, 10, textColor, true)
        if (logoPrompt) {
          addSmallLabel("AI PROMPT")
          addText(logoPrompt, 9, mutedColor)
        }
        yPos += 3
      })
    }

// Packaging Concepts
    if (packagingList.length > 0) {
      addSection("Packaging Concepts & Prompts")

packagingList.forEach((pkg: any) => {
        const pkgDesc = String(pkg.description || pkg.concept || "")
        const pkgPrompt = String(pkg.prompt || "")

addText(pkgDesc, 10, textColor, true)
        if (pkgPrompt) {
          addSmallLabel("AI PROMPT")
          addText(pkgPrompt, 9, mutedColor)
        }
        yPos += 3
      })
    }

// Voice & Tone
    if (voiceList.length > 0 || voiceDesc) {
      addSection("Voice & Tone")

if (voiceDesc) {
        addText(voiceDesc, 10, textColor)
        yPos += 3
      }

if (voiceList.length > 0) {
        addSmallLabel("TONE KEYWORDS")
        const toneText = voiceList.map((v: any) => String(v)).join(", ")
        addText(toneText, 9, mutedColor)
        yPos += 3
      }
    }

// Taglines
    if (taglinesArray.length > 0) {
      addSection("Brand Taglines")

taglinesArray.forEach((t: any) => {
        const tagline = String(t || "")
        if (tagline) {
          doc.setFontSize(10)
          doc.setTextColor(accentColor)
          doc.text(`• ${tagline}`, margin, yPos)
          yPos += 6
        }
      })
    }

console.log("[v0] Generating PDF with jsPDF")
    const pdfBuffer = doc.output("arraybuffer")
    console.log("[v0] PDF buffer size:", pdfBuffer.byteLength)

return new Response(pdfBuffer, {
      status: 200,
      headers: {
        "Content-Type": "application/pdf",
        "Content-Disposition": `attachment; filename="${brandName.replace(/[^a-z0-9]/gi, "_")}_brand_kit.pdf"`,
        "Cache-Control": "no-cache",
        "Content-Length": String(pdfBuffer.byteLength),
      },
    })
  } catch (error) {
    console.error("[v0] PDF generation error:", error)
    return NextResponse.json(
      {
        error: "Failed to generate PDF",
        message: error instanceof Error ? error.message : String(error),
        stack: error instanceof Error ? error.stack : undefined,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/studio/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { DeleteKitButton } from "@/components/brand-kit/delete-kit-button"
import { StudioSkeleton } from "@/components/loading-skeleton"
import { EmptyState } from "@/components/ui/empty-state"
import { ErrorMessage } from "@/components/ui/error-message"
import { Sparkles, TestTube, Eye } from "lucide-react"

interface BrandKit {
  id: number
  brand_name: string
  segment: string | null
  created_at: string
}

export default function StudioPage() {
  const [kits, setKits] = useState<BrandKit[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const fetchKits = async () => {
    try {
      setLoading(true)
      setError(null)
      const response = await fetch("/api/kits?limit=12")
      if (!response.ok) throw new Error("Failed to load kits")
      const data = await response.json()
      setKits(data.kits || [])
    } catch (error) {
      console.error("[v0] Error fetching kits:", error)
      setError(error instanceof Error ? error.message : "Failed to load brand kits")
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchKits()
  }, [])

const handleKitDeleted = (kitId: string) => {
    setKits((prevKits) => prevKits.filter((kit) => kit.id.toString() !== kitId))
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 py-8 sm:py-10">
        {/* Header */}
        <header className="mb-6 sm:mb-8 flex flex-col gap-3 border-b border-slate-800 pb-4 sm:pb-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <div className="text-[11px] uppercase tracking-wide text-emerald-300">Cannabrand Studio</div>
            <h1 className="text-xl sm:text-2xl font-semibold tracking-tight">Studio Dashboard</h1>
            <p className="mt-1 text-xs sm:text-sm text-slate-300">
              Jump into new brand kits, explore names, or revisit what you've already generated.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-xs">
            <Link
              href="/"
              className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2 text-slate-200 hover:border-emerald-400 hover:text-emerald-200 active:scale-95"
            >
              ← Back to landing
            </Link>
            <Link
              href="/wizard"
              data-tour="create-kit"
              className="rounded-lg bg-emerald-500 px-3 py-2 font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400 active:scale-95"
            >
              New brand kit
            </Link>
          </div>
        </header>

<section className="mb-6 sm:mb-8 grid gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Link
            href="/wizard"
            className="group flex flex-col justify-between rounded-2xl border border-emerald-500/40 bg-emerald-500/10 p-4 text-xs shadow-sm shadow-emerald-500/30 transition hover:bg-emerald-500/15 hover:shadow-emerald-500/40"
          >
            <div>
              <div className="flex items-center gap-2">
                <Sparkles className="h-4 w-4 text-emerald-400" />
                <div className="text-[11px] font-semibold uppercase tracking-wide text-emerald-200">Start</div>
              </div>
              <div className="mt-1 text-sm font-semibold text-slate-50">Create a new cannabis brand kit</div>
              <p className="mt-1 text-[11px] text-emerald-100">
                Run through the wizard to generate a full brand system: snapshot, colors, typography, logo directions,
                packaging, and copy.
              </p>
            </div>
            <div className="mt-3 text-[11px] text-emerald-200/80 transition group-hover:translate-x-1">
              → Opens the CannaBrand wizard.
            </div>
          </Link>

<Link
            href="/name-lab"
            className="group flex flex-col justify-between rounded-2xl border border-slate-800 bg-slate-900/70 p-4 text-xs transition hover:border-emerald-400/60"
          >
            <div>
              <div className="flex items-center gap-2">
                <TestTube className="h-4 w-4 text-slate-400" />
                <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Explore</div>
              </div>
              <div className="mt-1 text-sm font-semibold text-slate-50">Name Labs</div>
              <p className="mt-1 text-[11px] text-slate-300">
                Generate brand names or strain/product names with AI-powered suggestions and rationale.
              </p>
            </div>
            <div className="mt-3 text-[11px] text-slate-400 transition group-hover:translate-x-1">
              → Brand names or strain/SKU naming.
            </div>
          </Link>

<Link
            href="/kit/demo"
            className="group flex flex-col justify-between rounded-2xl border border-slate-800 bg-slate-900/70 p-4 text-xs transition hover:border-emerald-400/60"
          >
            <div>
              <div className="flex items-center gap-2">
                <Eye className="h-4 w-4 text-slate-400" />
                <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Preview</div>
              </div>
              <div className="mt-1 text-sm font-semibold text-slate-50">View example kit</div>
              <p className="mt-1 text-[11px] text-slate-300">
                See a finished demo kit so you can show people what Cannabrand Studio produces without generating
                anything.
              </p>
            </div>
            <div className="mt-3 text-[11px] text-slate-400 transition group-hover:translate-x-1">
              → Safe link to send to collaborators.
            </div>
          </Link>
        </section>

{/* Quick actions */}
        {/* More Tools */}
        <section className="mb-8">
          <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-400 mb-3">More Tools</div>
          <div className="flex flex-wrap gap-2">
            <Link
              href="/strain-lab"
              className="rounded-lg border border-slate-800 bg-slate-900/70 px-3 py-2 text-xs text-slate-200 hover:border-emerald-400 hover:text-emerald-200"
            >
              Strain & Product Name Lab
            </Link>
          </div>
        </section>

<section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-4 text-xs">
          <div className="mb-3 flex items-center justify-between">
            <div>
              <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Recent brand kits</div>
              <p className="mt-1 text-[11px] text-slate-400">
                Your latest generated kits. Use these as starting points, create new versions, or export decks.
              </p>
            </div>
            <Link href="/kits" className="text-[11px] font-medium text-slate-300 hover:text-emerald-300">
              View all →
            </Link>
          </div>

{loading ? (
            <StudioSkeleton />
          ) : error ? (
            <ErrorMessage message={error} onRetry={fetchKits} />
          ) : kits.length === 0 ? (
            <EmptyState
              icon={Sparkles}
              title="No brand kits yet"
              description="Start with the wizard to generate your first cannabis brand kit with colors, typography, and more."
              action={{ label: "Create First Brand Kit", href: "/wizard" }}
            />
          ) : (
            <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
              {kits.map((kit) => {
                const createdDate = new Date(kit.created_at).toLocaleString("en-US", {
                  month: "short",
                  day: "numeric",
                  year: "numeric",
                })

return (
                  <div
                    key={kit.id}
                    className="flex flex-col justify-between rounded-xl border border-slate-800 bg-slate-950/80 transition-colors hover:border-emerald-400/60"
                  >
                    <Link href={`/kit/${kit.id}`} className="flex flex-col justify-between p-3">
                      <div>
                        <div className="text-sm font-semibold text-slate-50">{kit.brand_name}</div>
                        <div className="mt-0.5 text-[11px] text-slate-400">Cannabis brand kit</div>
                      </div>
                      <div className="mt-3 flex items-center justify-between text-[10px] text-slate-500">
                        <span>{createdDate}</span>
                        <span className="font-mono text-[10px]">ID: {kit.id}</span>
                      </div>
                    </Link>
                    <div className="flex justify-end border-t border-slate-800 px-3 py-2">
                      <DeleteKitButton
                        kitId={kit.id.toString()}
                        brandName={kit.brand_name}
                        onDelete={() => handleKitDeleted(kit.id.toString())}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </section>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/kits/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { listBrandKits } from "@/lib/db"
import { createServerClient } from "@/lib/supabase/server"

export async function GET(request: NextRequest) {
  try {
    const supabase = await createServerClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

const searchParams = request.nextUrl.searchParams
    const limit = Number.parseInt(searchParams.get("limit") || "40", 10)

const kits = await listBrandKits(user?.id, limit)

return NextResponse.json({ kits })
  } catch (error) {
    console.error("[v0] Error fetching kits:", error)
    return NextResponse.json({ error: "Failed to fetch kits" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/brand-kit/delete-kit-button.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Trash2 } from "lucide-react"
import { showToast } from "@/components/ui/toast"

interface DeleteKitButtonProps {
  kitId: string
  brandName: string
  variant?: "icon" | "button"
  onDelete?: () => void
}

export function DeleteKitButton({ kitId, brandName, variant = "icon", onDelete }: DeleteKitButtonProps) {
  const router = useRouter()
  const [isDeleting, setIsDeleting] = useState(false)
  const [showConfirm, setShowConfirm] = useState(false)

const handleDelete = async () => {
    if (!showConfirm) {
      setShowConfirm(true)
      setTimeout(() => setShowConfirm(false), 3000)
      return
    }

setIsDeleting(true)

try {
      const response = await fetch(`/api/kit/${kitId}/delete`, {
        method: "DELETE",
      })

if (!response.ok) {
        const errorData = await response.json()
        console.error("[v0] Delete failed:", errorData)
        throw new Error("Failed to delete kit")
      }

showToast("success", `"${brandName}" has been deleted successfully`)

if (onDelete) {
        onDelete()
      }

router.refresh()

if (window.location.pathname.includes(`/kit/${kitId}`)) {
        router.push("/studio")
      }

setIsDeleting(false)
      setShowConfirm(false)
    } catch (error) {
      console.error("[v0] Error deleting kit:", error)
      showToast("error", "Failed to delete brand kit. Please try again.")
      setIsDeleting(false)
      setShowConfirm(false)
    }
  }

if (variant === "icon") {
    return (
      <button
        onClick={(e) => {
          e.preventDefault()
          e.stopPropagation()
          handleDelete()
        }}
        disabled={isDeleting}
        className={`rounded p-1.5 transition-all disabled:opacity-50 ${
          showConfirm
            ? "bg-red-500 text-white shadow-lg shadow-red-500/50 scale-110"
            : "text-slate-400 hover:bg-red-500/10 hover:text-red-400"
        }`}
        title={showConfirm ? "⚠️ CLICK AGAIN TO CONFIRM DELETION" : "Delete this kit"}
      >
        <Trash2 className="h-3.5 w-3.5" />
      </button>
    )
  }

return (
    <button
      onClick={handleDelete}
      disabled={isDeleting}
      className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all disabled:opacity-50 ${
        showConfirm
          ? "bg-red-500 text-white shadow-lg shadow-red-500/30 hover:bg-red-600"
          : "border border-slate-700 bg-slate-900 text-slate-300 hover:border-red-400 hover:text-red-400"
      }`}
    >
      {isDeleting ? "Deleting..." : showConfirm ? "⚠️ Click Again to Confirm" : "Delete Kit"}
    </button>
  )
}
[V0_FILE]typescript:file="app/api/kit/[id]/pdf-test/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandKitById } from "@/lib/db"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    console.log("[v0] PDF Test - Kit ID:", id)

const kit = await getBrandKitById(Number.parseInt(id))

if (!kit) {
      return NextResponse.json({ error: "Kit not found" }, { status: 404 })
    }

// Return kit data as JSON to verify it's accessible
    return NextResponse.json({
      success: true,
      message: "PDF data is accessible",
      kitId: kit.id,
      brandName: kit.brand_name,
      dataSize: JSON.stringify(kit).length,
      sections: {
        hasSnapshot: !!kit.snapshot,
        hasColors: !!kit.colors,
        hasTypography: !!kit.typography,
        hasLogoDirections: !!kit.logo_directions,
        hasPackaging: !!kit.packaging_concepts,
        hasCopy: !!kit.copy_voice,
        hasPrompts: !!kit.prompts,
        hasMoodboard: !!kit.moodboard,
      },
    })
  } catch (error) {
    console.error("[v0] PDF Test Error:", error)
    return NextResponse.json(
      {
        error: "Failed to fetch kit data",
        details: error instanceof Error ? error.message : String(error),
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/brand-kit/ShareLinkButton.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { showToast } from "@/components/ui/toast"
import { Share2, Copy, Check } from "lucide-react"

type ShareLinkButtonProps = {
  kitId: string
  initialSlug?: string | null
}

export function ShareLinkButton({ kitId, initialSlug }: ShareLinkButtonProps) {
  const [slug, setSlug] = useState<string | null>(initialSlug ?? null)
  const [isPublic, setIsPublic] = useState<boolean>(!!initialSlug)
  const [loading, setLoading] = useState(false)
  const [copied, setCopied] = useState(false)

function currentUrl() {
    if (!slug) return ""
    if (typeof window === "undefined") return ""
    return `${window.location.origin}/preview/${slug}`
  }

async function handleToggle() {
    try {
      setLoading(true)
      setCopied(false)

if (!isPublic) {
        const res = await fetch(`/api/kit/${kitId}/share`, {
          method: "POST",
        })

if (!res.ok) {
          const data = await res.json().catch(() => ({}))
          throw new Error(data.error || "Failed to enable sharing")
        }

const data = await res.json()
        setSlug(data.public_slug ?? null)
        setIsPublic(true)
        showToast("success", "Public sharing enabled! Your brand kit is now viewable by anyone with the link.")
      } else {
        const res = await fetch(`/api/kit/${kitId}/share`, {
          method: "DELETE",
        })

if (!res.ok) {
          const data = await res.json().catch(() => ({}))
          throw new Error(data.error || "Failed to disable sharing")
        }

setIsPublic(false)
        setSlug(null)
        showToast("info", "Public sharing disabled. Your brand kit is now private.")
      }
    } catch (err: any) {
      console.error(err)
      showToast("error", err?.message ?? "Something went wrong with sharing.")
    } finally {
      setLoading(false)
    }
  }

async function handleCopy() {
    const url = currentUrl()
    if (!url) return
    try {
      await navigator.clipboard.writeText(url)
      setCopied(true)
      showToast("success", "Share link copied to clipboard!")
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Copy failed:", err)
      showToast("error", "Failed to copy link. Please copy it manually.")
    }
  }

return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          onClick={handleToggle}
          disabled={loading}
          className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
            isPublic
              ? "border-red-500/70 bg-red-500/10 text-red-200 hover:bg-red-500/20"
              : "border-emerald-500/70 bg-emerald-500/10 text-emerald-200 hover:bg-emerald-500/20"
          } disabled:opacity-60`}
        >
          <Share2 className="h-3.5 w-3.5" />
          {loading ? (isPublic ? "Disabling…" : "Enabling…") : isPublic ? "Stop sharing" : "Share read-only link"}
        </button>

{isPublic && slug && (
          <button
            type="button"
            onClick={handleCopy}
            className="inline-flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:border-emerald-400 hover:text-emerald-200"
          >
            {copied ? (
              <>
                <Check className="h-3.5 w-3.5" />
                Copied!
              </>
            ) : (
              <>
                <Copy className="h-3.5 w-3.5" />
                Copy link
              </>
            )}
          </button>
        )}
      </div>

{isPublic && slug && (
        <div className="rounded-lg border border-slate-800 bg-slate-950/50 px-2 py-1">
          <div className="truncate text-[10px] font-mono text-slate-400">{currentUrl()}</div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/empty-state.tsx" isMerged="true"
import type { LucideIcon } from "lucide-react"

interface EmptyStateProps {
  icon: LucideIcon
  title: string
  description: string
  action?: {
    label: string
    href: string
  }
}

export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center rounded-xl border border-slate-800/50 bg-slate-950/50 py-12">
      <div className="rounded-full border border-emerald-500/30 bg-emerald-500/10 p-4">
        <Icon className="h-8 w-8 text-emerald-400" />
      </div>
      <div className="mt-4 text-sm font-medium text-slate-300">{title}</div>
      <p className="mt-1 max-w-xs text-center text-[11px] text-slate-400">{description}</p>
      {action && (
        <a
          href={action.href}
          className="mt-4 inline-flex items-center gap-2 rounded-lg bg-emerald-500 px-4 py-2 text-xs font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
        >
          {action.label}
        </a>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/loading-skeleton.tsx" isEdit="true" isMerged="true"
import { cn } from "@/lib/utils"

interface LoadingSkeletonProps {
  className?: string
  count?: number
}

export function LoadingSkeleton({ className, count = 1 }: LoadingSkeletonProps) {
  return (
    <>
      {[...Array(count)].map((_, i) => (
        <div
          key={i}
          className={cn("animate-pulse rounded-xl border border-slate-800 bg-slate-950/80 p-3 shimmer", className)}
        >
          <div className="h-4 w-3/4 rounded bg-slate-800"></div>
          <div className="mt-2 h-3 w-1/2 rounded bg-slate-800"></div>
          <div className="mt-3 flex justify-between">
            <div className="h-2 w-16 rounded bg-slate-800"></div>
            <div className="h-2 w-12 rounded bg-slate-800"></div>
          </div>
        </div>
      ))}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/error-message.tsx" isMerged="true"
"use client"

import { AlertCircle } from "lucide-react"

interface ErrorMessageProps {
  title?: string
  message: string
  onRetry?: () => void
}

export function ErrorMessage({ title = "Error", message, onRetry }: ErrorMessageProps) {
  return (
    <div className="rounded-xl border border-red-500/40 bg-red-950/20 p-4">
      <div className="flex items-start gap-3">
        <div className="rounded-full bg-red-500/10 p-2">
          <AlertCircle className="h-4 w-4 text-red-400" />
        </div>
        <div className="flex-1">
          <div className="text-sm font-semibold text-red-200">{title}</div>
          <p className="mt-1 text-xs text-red-300">{message}</p>
          {onRetry && (
            <button
              onClick={onRetry}
              className="mt-3 rounded-lg border border-red-500/40 bg-red-500/10 px-3 py-1.5 text-xs font-medium text-red-200 hover:bg-red-500/20"
            >
              Try Again
            </button>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/success-message.tsx" isMerged="true"
import { CheckCircle2 } from "lucide-react"

interface SuccessMessageProps {
  title?: string
  message: string
}

export function SuccessMessage({ title = "Success", message }: SuccessMessageProps) {
  return (
    <div className="fade-in rounded-xl border border-emerald-500/40 bg-emerald-950/20 p-4">
      <div className="flex items-start gap-3">
        <div className="rounded-full bg-emerald-500/10 p-2">
          <CheckCircle2 className="h-4 w-4 text-emerald-400" />
        </div>
        <div className="flex-1">
          <div className="text-sm font-semibold text-emerald-200">{title}</div>
          <p className="mt-1 text-xs text-emerald-300">{message}</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tooltip-simple.tsx" isMerged="true"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface TooltipProps {
  children: React.ReactNode
  content: string
  side?: "top" | "bottom" | "left" | "right"
}

export function TooltipSimple({ children, content, side = "top" }: TooltipProps) {
  const [isVisible, setIsVisible] = React.useState(false)

return (
    <div className="relative inline-block">
      <div
        onMouseEnter={() => setIsVisible(true)}
        onMouseLeave={() => setIsVisible(false)}
        onFocus={() => setIsVisible(true)}
        onBlur={() => setIsVisible(false)}
      >
        {children}
      </div>
      {isVisible && (
        <div
          className={cn(
            "absolute z-50 rounded-lg bg-slate-900 px-2 py-1 text-xs text-slate-100 shadow-lg border border-slate-700 whitespace-nowrap fade-in",
            side === "top" && "bottom-full left-1/2 -translate-x-1/2 mb-2",
            side === "bottom" && "top-full left-1/2 -translate-x-1/2 mt-2",
            side === "left" && "right-full top-1/2 -translate-y-1/2 mr-2",
            side === "right" && "left-full top-1/2 -translate-y-1/2 ml-2",
          )}
        >
          {content}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className,
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className,
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className,
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export function ToastContainer() {
  const [toasts, setToasts] = React.useState<
    Array<{
      id: string
      title?: string
      description?: string
      variant?: "default" | "destructive"
    }>
  >([])

React.useEffect(() => {
    // Listen for custom toast events
    const handleToast = (event: CustomEvent) => {
      const { title, description, variant } = event.detail
      const id = Math.random().toString(36).substring(7)

setToasts((prev) => [...prev, { id, title, description, variant }])

// Auto-remove after 3 seconds
      setTimeout(() => {
        setToasts((prev) => prev.filter((t) => t.id !== id))
      }, 3000)
    }

window.addEventListener("show-toast" as any, handleToast as any)
    return () => window.removeEventListener("show-toast" as any, handleToast as any)
  }, [])

return (
    <ToastProvider>
      {toasts.map((toast) => (
        <Toast key={toast.id} variant={toast.variant}>
          {toast.title && <ToastTitle>{toast.title}</ToastTitle>}
          {toast.description && <ToastDescription>{toast.description}</ToastDescription>}
          <ToastClose />
        </Toast>
      ))}
      <ToastViewport />
    </ToastProvider>
  )
}

export function showToast({
  title,
  description,
  variant = "default",
}: {
  title?: string
  description?: string
  variant?: "default" | "destructive"
}) {
  const event = new CustomEvent("show-toast", {
    detail: { title, description, variant },
  })
  window.dispatchEvent(event)
}

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ToastContainer } from "@/components/ui/toast"
import { Navigation } from "@/components/ui/navigation"
import { OnboardingTour } from "@/components/onboarding-tour"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "CannaBrand Studio - AI-Powered Cannabis Branding & Brand Kit Generator",
  description:
    "Generate professional cannabis brand kits in minutes with AI. Get colors, typography, logo directions, packaging concepts, and copy for your dispensary or product line.",
  keywords: [
    "cannabis branding",
    "cannabis brand kit",
    "cannabis logo generator",
    "cannabis packaging design",
    "AI brand generator",
    "dispensary branding",
    "cannabis marketing",
    "strain branding",
  ],
  authors: [{ name: "CannaBrand Studio" }],
  creator: "CannaBrand Studio",
  publisher: "CannaBrand Studio",
  generator: "v0.app",
  applicationName: "CannaBrand Studio",
  metadataBase: new URL("https://cannabrand.studio"),
  openGraph: {
    title: "CannaBrand Studio - AI-Powered Cannabis Branding",
    description:
      "Generate professional cannabis brand kits with AI: colors, typography, logo directions, packaging, and copy.",
    url: "https://cannabrand.studio",
    siteName: "CannaBrand Studio",
    locale: "en_US",
    type: "website",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "CannaBrand Studio - Cannabis Brand Kit Generator",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "CannaBrand Studio - AI-Powered Cannabis Branding",
    description: "Generate professional cannabis brand kits in minutes with AI.",
    images: ["/og-image.png"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export const viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
  userScalable: true,
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#10b981" },
    { media: "(prefers-color-scheme: dark)", color: "#059669" },
  ],
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebApplication",
              name: "CannaBrand Studio",
              applicationCategory: "DesignApplication",
              description:
                "AI-powered cannabis branding tool for generating professional brand kits including colors, typography, logo directions, and packaging concepts.",
              offers: {
                "@type": "Offer",
                price: "0",
                priceCurrency: "USD",
              },
              operatingSystem: "Web",
            }),
          }}
        />
      </head>
      <body className={`font-sans antialiased`}>
        <Navigation />
        <div className="pt-14 sm:pt-16 pb-safe">{children}</div>
        <ToastContainer />
        <OnboardingTour />
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]sql:file="scripts/003-add-photography-direction.sql" isMerged="true"
-- Add photography_direction column to brand_kits table
ALTER TABLE brand_kits
ADD COLUMN IF NOT EXISTS photography_direction JSONB;

-- Update existing rows to have empty array if null
UPDATE brand_kits
SET photography_direction = '[]'::jsonb
WHERE photography_direction IS NULL;
[V0_FILE]typescript:file="app/api/brands/[id]/generate-photography/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { neon } from "@neondatabase/serverless"
import { generatePhotographyDirectionForKit } from "@/lib/ai"

const sql = neon(process.env.DATABASE_URL!)

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const brandId = Number.parseInt(params.id)

// Get brand and kit data
    const brands = await sql`
      SELECT * FROM brands WHERE id = ${brandId}
    `
    const kits = await sql`
      SELECT * FROM brand_kits WHERE brand_id = ${brandId} ORDER BY created_at DESC LIMIT 1
    `

if (brands.length === 0 || kits.length === 0) {
      return NextResponse.json({ error: "Brand or kit not found" }, { status: 404 })
    }

const brand = brands[0]
    const kit = kits[0]

// Generate photography direction
    const photoData = await generatePhotographyDirectionForKit(brand, kit)

// Update the kit with photography direction
    await sql`
      UPDATE brand_kits
      SET photography_direction = ${JSON.stringify(photoData.photography_direction)}
      WHERE id = ${kit.id}
    `

return NextResponse.json({
      success: true,
      photography_direction: photoData.photography_direction,
    })
  } catch (error) {
    console.error("Error generating photography direction:", error)
    return NextResponse.json({ error: "Failed to generate photography direction" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandKitById, trackKitView } from "@/lib/db"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    console.log("[v0] Fetching kit with ID:", id)

const kit = await getBrandKitById(Number.parseInt(id))

if (!kit) {
      return NextResponse.json({ error: "Kit not found" }, { status: 404 })
    }

try {
      await trackKitView(Number.parseInt(id))
    } catch (trackError) {
      console.warn("[v0] Failed to track kit view:", trackError)
    }

console.log("[v0] Kit fetched successfully:", kit.brand_name)
    return NextResponse.json(kit)
  } catch (error) {
    console.error("[v0] Error fetching kit:", error)
    return NextResponse.json({ error: "Failed to fetch kit" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/brand-kit/editable-brand-name.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Pencil, Check, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

type EditableBrandNameProps = {
  kitId: string
  brandName: string
  onUpdate?: (newName: string) => void
}

export function EditableBrandName({ kitId, brandName, onUpdate }: EditableBrandNameProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [value, setValue] = useState(brandName)
  const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    if (value === brandName || !value.trim()) {
      setIsEditing(false)
      setValue(brandName)
      return
    }

setIsSaving(true)
    try {
      const res = await fetch(`/api/kit/${kitId}/update-name`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: value }),
      })

if (!res.ok) {
        throw new Error("Failed to update name")
      }

onUpdate?.(value)
      setIsEditing(false)
    } catch (error) {
      console.error("Error updating name:", error)
      setValue(brandName)
    } finally {
      setIsSaving(false)
    }
  }

const handleCancel = () => {
    setValue(brandName)
    setIsEditing(false)
  }

if (isEditing) {
    return (
      <div className="flex items-center gap-2">
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          className="text-3xl font-semibold"
          disabled={isSaving}
          onKeyDown={(e) => {
            if (e.key === "Enter") handleSave()
            if (e.key === "Escape") handleCancel()
          }}
          autoFocus
        />
        <Button size="sm" onClick={handleSave} disabled={isSaving}>
          <Check className="h-4 w-4" />
        </Button>
        <Button size="sm" variant="outline" onClick={handleCancel} disabled={isSaving}>
          <X className="h-4 w-4" />
        </Button>
      </div>
    )
  }

return (
    <div className="group flex items-center gap-2">
      <h1 className="text-3xl font-semibold tracking-tight text-slate-100">{brandName}</h1>
      <Button
        size="sm"
        variant="ghost"
        className="opacity-0 transition-opacity group-hover:opacity-100"
        onClick={() => setIsEditing(true)}
      >
        <Pencil className="h-4 w-4" />
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/brand-kit/editable-colors.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Pencil, Check, X, Plus, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

type EditableColorsProps = {
  kitId: string
  colors: Array<{ name: string; hex: string; usage: string }>
  onUpdate?: (newColors: Array<{ name: string; hex: string; usage: string }>) => void
}

export function EditableColors({ kitId, colors, onUpdate }: EditableColorsProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [value, setValue] = useState(colors)
  const [isSaving, setIsSaving] = useState(false)

const handleSave = async () => {
    setIsSaving(true)
    try {
      const res = await fetch(`/api/kit/${kitId}/update-colors`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ colors: value }),
      })

if (!res.ok) {
        throw new Error("Failed to update colors")
      }

onUpdate?.(value)
      setIsEditing(false)
    } catch (error) {
      console.error("Error updating colors:", error)
      setValue(colors)
    } finally {
      setIsSaving(false)
    }
  }

const handleCancel = () => {
    setValue(colors)
    setIsEditing(false)
  }

const addColor = () => {
    setValue([...value, { name: "New Color", hex: "#000000", usage: "Usage description" }])
  }

const removeColor = (index: number) => {
    setValue(value.filter((_, i) => i !== index))
  }

const updateColor = (index: number, field: keyof (typeof colors)[0], val: string) => {
    const updated = [...value]
    updated[index] = { ...updated[index], [field]: val }
    setValue(updated)
  }

if (isEditing) {
    return (
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold text-slate-100">Edit Colors</h3>
          <div className="flex gap-2">
            <Button size="sm" onClick={handleSave} disabled={isSaving}>
              <Check className="mr-1 h-4 w-4" />
              Save
            </Button>
            <Button size="sm" variant="outline" onClick={handleCancel} disabled={isSaving}>
              <X className="mr-1 h-4 w-4" />
              Cancel
            </Button>
          </div>
        </div>

<div className="space-y-3">
          {value.map((color, index) => (
            <div key={index} className="flex items-start gap-2 rounded-lg bg-slate-800/50 p-3">
              <Input
                type="color"
                value={color.hex}
                onChange={(e) => updateColor(index, "hex", e.target.value)}
                className="h-12 w-16"
              />
              <div className="flex-1 space-y-2">
                <Input
                  value={color.name}
                  onChange={(e) => updateColor(index, "name", e.target.value)}
                  placeholder="Color name"
                  className="font-semibold"
                />
                <Input
                  value={color.usage}
                  onChange={(e) => updateColor(index, "usage", e.target.value)}
                  placeholder="Usage description"
                  className="text-sm"
                />
              </div>
              <Button size="sm" variant="ghost" onClick={() => removeColor(index)}>
                <Trash2 className="h-4 w-4 text-red-400" />
              </Button>
            </div>
          ))}
        </div>

<Button size="sm" variant="outline" onClick={addColor}>
          <Plus className="mr-1 h-4 w-4" />
          Add Color
        </Button>
      </div>
    )
  }

return (
    <div className="group relative">
      <Button
        size="sm"
        variant="ghost"
        className="absolute right-0 top-0 opacity-0 transition-opacity group-hover:opacity-100"
        onClick={() => setIsEditing(true)}
      >
        <Pencil className="mr-1 h-4 w-4" />
        Edit Colors
      </Button>
      {/* Original colors display */}
      <div className="grid gap-3 sm:grid-cols-2">
        {colors.map((color, index) => (
          <div key={index} className="flex items-start gap-3 rounded-lg bg-slate-800/30 p-3">
            <div
              className="h-12 w-12 flex-shrink-0 rounded-lg border-2 border-slate-700"
              style={{ backgroundColor: color.hex }}
            ></div>
            <div className="min-w-0 flex-1">
              <div className="font-semibold text-slate-100">{color.name}</div>
              <div className="font-mono text-xs text-slate-400">{color.hex.toUpperCase()}</div>
              <div className="mt-1 text-sm text-slate-300">{color.usage}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/wizard/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/ai.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { z } from "zod"
import { generateObject } from "ai"
import { createGroq } from "@ai-sdk/groq"

const regenColorsSchema = z.object({
  colors: z.array(
    z.object({
      name: z.string(),
      hex: z.string(),
      usage: z.enum(["Primary", "Accent", "Background", "Typography"]),
    }),
  ),
})

const regenPackagingSchema = z.object({
  packaging_concepts: z.record(
    z.object({
      description: z.string(),
      finishes: z.string(),
      ai_prompt: z.string(),
    }),
  ),
  packaging_prompts: z.record(z.string()).optional(),
})

const regenCopySchema = z.object({
  copy_voice: z.object({
    voice_description: z.string(),
    taglines: z.array(z.string()),
    about_paragraph: z.string(),
    strain_description_template: z.string(),
  }),
})

const moodboardSchema = z.object({
  moodboard: z.array(
    z.object({
      title: z.string(),
      description: z.string(),
      tags: z.array(z.string()),
      ai_prompt: z.string(),
    }),
  ),
})

const nameLabSchema = z.object({
  names: z.array(
    z.object({
      name: z.string(),
      rationale: z.string(),
      domain_idea: z.string(),
    }),
  ),
})

const strainLabSchema = z.object({
  names: z.array(
    z.object({
      name: z.string(),
      type: z.string(),
      rationale: z.string(),
      notes: z.string(),
    }),
  ),
})

const photographyDirectionSchema = z.object({
  photography_direction: z.array(
    z.object({
      category: z.string(),
      description: z.string(),
      shot_list: z.array(z.string()),
      lighting: z.string(),
      styling_notes: z.string(),
      ai_prompt: z.string(),
    }),
  ),
})

const groq = createGroq({
  apiKey: process.env.GROQ_API_KEY,
})

export async function regenerateColorsForKit(brand: any, kit: any) {
  const { object } = await generateObject({
    model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
    schema: regenColorsSchema,
    temperature: 0.8,
    prompt: buildRegenColorsPrompt(brand, kit),
  })

return object
}

export async function regeneratePackagingForKit(brand: any, kit: any) {
  const { object } = await generateObject({
    model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
    schema: regenPackagingSchema,
    temperature: 0.85,
    prompt: buildRegenPackagingPrompt(brand, kit),
  })

return object
}

export async function regenerateCopyForKit(brand: any, kit: any) {
  const { object } = await generateObject({
    model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
    schema: regenCopySchema,
    temperature: 0.85,
    prompt: buildRegenCopyPrompt(brand, kit),
  })

return object
}

export async function generateMoodboardForKit(brand: any, kit: any) {
  const { object } = await generateObject({
    model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
    schema: moodboardSchema,
    temperature: 0.9,
    prompt: buildMoodboardPrompt(brand, kit),
  })

return object
}

export async function generateCannabisBrandNames(input: {
  seedIdea?: string
  segment?: string
  audience?: string
  style?: string
  wordsToAvoid?: string
}) {
  const model = groq("meta-llama/llama-4-maverick-17b-128e-instruct")

const { object } = await generateObject({
    model,
    schema: nameLabSchema,
    temperature: 0.95,
    prompt: buildNameLabPrompt(input),
  })

return object
}

export async function generateStrainNames(input: {
  brandName?: string
  segment: string
  audience: string
  vibe: string
  count: number
}) {
  const model = groq("meta-llama/llama-4-maverick-17b-128e-instruct")

const { object } = await generateObject({
    model,
    schema: strainLabSchema,
    temperature: 0.95,
    prompt: buildStrainLabPrompt(input),
  })

return object
}

export async function generatePhotographyDirectionForKit(brand: any, kit: any) {
  const { object } = await generateObject({
    model: groq("meta-llama/llama-4-maverick-17b-128e-instruct"),
    schema: photographyDirectionSchema,
    temperature: 0.85,
    prompt: buildPhotographyDirectionPrompt(brand, kit),
  })

return object
}

function buildRegenColorsPrompt(brand: any, kit: any): string {
  return `
You are a senior cannabis branding strategist and color system designer.

Regenerate a refined, cohesive color palette for this brand. Keep the core vibe,
but offer a fresh palette that stays on-brand and production-ready.

Brand base:
- Name: ${brand.brand_name}
- Segment: ${brand.segment ?? "N/A"}
- Visual style: ${brand.visual_style ?? "N/A"}
- Target audience: ${(brand.target_audience || []).join(", ") || "N/A"}
- Personality sliders (1-5): ${JSON.stringify(brand.personality || {})}

Current palette:
${JSON.stringify(kit.colors || [], null, 2)}

Requirements:
- 4–6 colors
- Each with: name, hex (#RRGGBB), usage (Primary, Accent, Background, Typography)
- Keep accessibility in mind for web and print.

Return ONLY JSON with:
{
  "colors": [
    { "name": "...", "hex": "#...", "usage": "Primary|Accent|Background|Typography" }
  ]
}
`.trim()
}

function buildRegenPackagingPrompt(brand: any, kit: any): string {
  return `
You are a cannabis packaging designer.

Regenerate the packaging concepts for this brand. Keep the brand's story and
positioning, but explore a fresh set of packaging directions.

Brand base:
- Name: ${brand.brand_name}
- Segment: ${brand.segment ?? "N/A"}
- Visual style: ${brand.visual_style ?? "N/A"}
- Product focus: ${(brand.product_focus || []).join(", ") || "N/A"}
- Packaging preference: ${brand.packaging_preference ?? "N/A"}

Existing concepts (for reference):
${JSON.stringify(kit.packaging_concepts || {}, null, 2)}

Requirements:
- Keep keys aligned to product types (e.g. "flower", "pre_rolls") where possible.
- For each concept: description, finishes, ai_prompt.
- AI prompts should be high-quality, ready for Midjourney/DALL·E.

Return ONLY JSON with:
{
  "packaging_concepts": {
    "flower": { "description": "...", "finishes": "...", "ai_prompt": "..." },
    "pre_rolls": { ... }
  },
  "packaging_prompts": {
    "flower": "...",
    "pre_rolls": "..."
  }
}
`.trim()
}

function buildRegenCopyPrompt(brand: any, kit: any): string {
  return `
You are a cannabis brand copywriter.

Regenerate the brand copy voice block: voice description, taglines, about paragraph,
and the strain description template. Keep the brand's core idea, but produce a fresh
set of taglines and slightly elevated copy.

Brand base:
- Name: ${brand.brand_name}
- Tagline: ${brand.tagline ?? "N/A"}
- Segment: ${brand.segment ?? "N/A"}
- Visual style: ${brand.visual_style ?? "N/A"}
- Audience: ${(brand.target_audience || []).join(", ") || "N/A"}

Existing copy (for reference):
${JSON.stringify(kit.copy_voice || {}, null, 2)}

Requirements:
- Speak to a 21+ cannabis audience (no minors).
- Avoid cheesy or corny weed puns unless that's clearly the brand.
- 3–5 taglines max.
- The about paragraph should be 3–6 sentences.
- Strain template should be flexible and reusable.

Return ONLY JSON with:
{
  "copy_voice": {
    "voice_description": "...",
    "taglines": ["...", "..."],
    "about_paragraph": "...",
    "strain_description_template": "..."
  }
}
`.trim()
}

function buildMoodboardPrompt(brand: any, kit: any): string {
  return `
You are an art director building a moodboard for a cannabis brand.

Create a set of 6–10 moodboard tiles that visual designers can use as reference.
Each tile should have: a short title, a description of the visual, 3–7 tags, and
an AI image prompt.

Brand:
- Name: ${brand.brand_name}
- Segment: ${brand.segment ?? "N/A"}
- Visual style: ${brand.visual_style ?? "N/A"}
- Audience: ${(brand.target_audience || []).join(", ") || "N/A"}
- Product focus: ${(brand.product_focus || []).join(", ") || "N/A"}
- Packaging preference: ${brand.packaging_preference ?? "N/A"}

Color & logo summary:
- Colors: ${JSON.stringify(kit.colors || [], null, 2)}
- Logo summary: ${kit.logo_directions?.summary ?? "N/A"}

Requirements:
- Focus on photography + graphic treatments the brand could use.
- No people who look under 21. No obvious medical claims.
- Think in terms of lighting, surfaces, props, and composition.
- AI prompts should be ready to paste into Midjourney / DALL·E etc.

Return ONLY JSON like:
{
  "moodboard": [
    {
      "title": "...",
      "description": "...",
      "tags": ["..."],
      "ai_prompt": "..."
    }
  ]
}
`.trim()
}

function buildNameLabPrompt(input: {
  seedIdea?: string
  segment?: string
  audience?: string
  style?: string
  wordsToAvoid?: string
}): string {
  const { seedIdea, segment, audience, style, wordsToAvoid } = input

return `
You are naming a legal 21+ cannabis or CBD brand.

Generate 10 brand name options that:
- Are appropriate for a legal cannabis/cbd brand (no minors, no medical claims).
- Could work on packaging, domains, and social handles.
- Reflect the given inputs.

Inputs:
- Seed idea: ${seedIdea || "N/A"}
- Segment: ${segment || "N/A"} (e.g. flower, concentrates, pre-rolls, CBD topicals)
- Audience: ${audience || "N/A"} (e.g. nightlife professionals, medical, creative industry)
- Style: ${style || "N/A"} (e.g. luxury minimal, street, wellness, indie)
- Words/phrases to avoid: ${wordsToAvoid || "N/A"}

For each name:
- Avoid obvious clichés unless clearly called for.
- No references to being for kids, teens, or minors.
- No medical claims like "cure", "heal", "treat".

Return ONLY JSON:
{
  "names": [
    {
      "name": "Blue Diamonds",
      "rationale": "Why this name fits the inputs.",
      "domain_idea": "bluediamondscannabis.com (or similar idea)"
    }
  ]
}
`.trim()
}

function buildStrainLabPrompt(input: {
  brandName?: string
  segment: string
  audience: string
  vibe: string
  count: number
}): string {
  const { brandName, segment, audience, vibe, count } = input

return `
You are naming individual cannabis products, strains, or SKUs for a legal 21+ brand.

Generate ${count} product/strain name options that:
- Are appropriate for legal cannabis (no minors, no medical claims).
- Work on packaging, menus, and displays.
- Match the brand vibe and audience.
- Avoid obvious strain clichés unless explicitly requested.

Context:
- Brand name: ${brandName || "N/A"}
- Segment/product type: ${segment}
- Target audience: ${audience}
- Vibe/naming direction: ${vibe}

For each name provide:
- name: The product/strain name
- type: e.g. "Indica", "Sativa", "Hybrid", "CBD", "Vape", "Edible", etc.
- rationale: 1-2 sentences explaining why this name fits
- notes: Any additional context or variants

Requirements:
- No references to minors
- No medical claims ("cure", "heal", "treat")
- Names should be memorable and distinct

Return ONLY JSON:
{
  "names": [
    {
      "name": "Midnight Velvet",
      "type": "Indica",
      "rationale": "Evokes nightlife and luxury without clichés.",
      "notes": "Could work for flower or vape line."
    }
  ]
}
`.trim()
}

function buildPhotographyDirectionPrompt(brand: any, kit: any): string {
  const targetAudience = Array.isArray(brand.target_audience)
    ? brand.target_audience
    : typeof brand.target_audience === "string"
      ? [brand.target_audience]
      : []

const productFocus = Array.isArray(brand.product_focus)
    ? brand.product_focus
    : typeof brand.product_focus === "string"
      ? [brand.product_focus]
      : []

return `
You are a cannabis product photographer and creative director.

Create comprehensive photography direction for this brand covering different
product and lifestyle categories. Focus on creating a cohesive visual identity
through photography.

Brand:
- Name: ${brand.brand_name}
- Segment: ${brand.segment ?? "N/A"}
- Visual style: ${brand.visual_style ?? "N/A"}
- Audience: ${targetAudience.join(", ") || "N/A"}
- Product focus: ${productFocus.join(", ") || "N/A"}
- Packaging preference: ${brand.packaging_preference ?? "N/A"}

Color palette:
${JSON.stringify(kit.colors || [], null, 2)}

Requirements:
- Create 4-6 photography direction categories (e.g., "Product Hero Shots", "Lifestyle", "Detail Shots", "Brand Story")
- Each category should include:
  - category: Name of the photo category
  - description: What this category aims to capture (2-3 sentences)
  - shot_list: Array of 4-6 specific shot ideas
  - lighting: Lighting direction (e.g., "Natural window light with soft shadows")
  - styling_notes: Props, surfaces, styling guidance
  - ai_prompt: Ready-to-use AI image generation prompt

- Focus on 21+ audience (no minors visible)
- No medical claims or therapeutic messaging
- Consider how photos work across packaging, web, social media

Return ONLY JSON:
{
  "photography_direction": [
    {
      "category": "Product Hero Shots",
      "description": "Clean, elevated product photography...",
      "shot_list": ["Top-down flat lay...", "45-degree angle..."],
      "lighting": "Soft natural light with subtle shadows",
      "styling_notes": "Minimal props, marble or wood surfaces",
      "ai_prompt": "Professional product photography of cannabis..."
    }
  ]
}
`.trim()
}
[V0_FILE]typescriptreact:file="app/kits/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { DeleteKitButton } from "@/components/brand-kit/delete-kit-button"
import { EmptyState } from "@/components/ui/empty-state"
import { ErrorMessage } from "@/components/ui/error-message"
import { Sparkles, Search, Filter, Download, Trash2, CheckSquare, Square } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { showToast } from "@/components/ui/toast"

interface BrandKit {
  id: number
  brand_name: string
  segment: string | null
  created_at: string
}

export default function KitsIndexPage() {
  const [kits, setKits] = useState<BrandKit[]>([])
  const [filteredKits, setFilteredKits] = useState<BrandKit[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

const [searchQuery, setSearchQuery] = useState("")
  const [sortBy, setSortBy] = useState<"newest" | "oldest" | "name">("newest")
  const [selectedKits, setSelectedKits] = useState<Set<number>>(new Set())
  const [selectMode, setSelectMode] = useState(false)

const fetchKits = async () => {
    try {
      setLoading(true)
      setError(null)
      const response = await fetch("/api/kits?limit=100")
      if (!response.ok) throw new Error("Failed to load kits")
      const data = await response.json()
      setKits(data.kits || [])
      setFilteredKits(data.kits || [])
    } catch (error) {
      console.error("[v0] Error fetching kits:", error)
      setError(error instanceof Error ? error.message : "Failed to load brand kits")
    } finally {
      setLoading(false)
    }
  }

useEffect(() => {
    fetchKits()
  }, [])

useEffect(() => {
    let filtered = [...kits]

// Search filter
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase()
      filtered = filtered.filter(
        (kit) =>
          kit.brand_name.toLowerCase().includes(query) ||
          kit.segment?.toLowerCase().includes(query) ||
          kit.id.toString().includes(query),
      )
    }

// Sort
    filtered.sort((a, b) => {
      if (sortBy === "newest") {
        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
      } else if (sortBy === "oldest") {
        return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
      } else {
        return a.brand_name.localeCompare(b.brand_name)
      }
    })

setFilteredKits(filtered)
  }, [kits, searchQuery, sortBy])

const handleKitDeleted = (kitId: string) => {
    setKits((prevKits) => prevKits.filter((kit) => kit.id.toString() !== kitId))
    selectedKits.delete(Number.parseInt(kitId))
    setSelectedKits(new Set(selectedKits))
  }

const toggleKitSelection = (kitId: number) => {
    const newSelected = new Set(selectedKits)
    if (newSelected.has(kitId)) {
      newSelected.delete(kitId)
    } else {
      newSelected.add(kitId)
    }
    setSelectedKits(newSelected)
  }

const toggleSelectAll = () => {
    if (selectedKits.size === filteredKits.length) {
      setSelectedKits(new Set())
    } else {
      setSelectedKits(new Set(filteredKits.map((kit) => kit.id)))
    }
  }

const bulkDelete = async () => {
    if (selectedKits.size === 0) return

if (!confirm(`Delete ${selectedKits.size} selected kit(s)? This cannot be undone.`)) {
      return
    }

try {
      const deletePromises = Array.from(selectedKits).map((kitId) =>
        fetch(`/api/kit/${kitId}/delete`, { method: "DELETE" }),
      )

await Promise.all(deletePromises)

setKits((prevKits) => prevKits.filter((kit) => !selectedKits.has(kit.id)))
      setSelectedKits(new Set())
      setSelectMode(false)
      showToast(`Successfully deleted ${selectedKits.size} kit(s)`, "success")
    } catch (error) {
      console.error("[v0] Bulk delete error:", error)
      showToast("Failed to delete some kits", "error")
    }
  }

const bulkExport = async () => {
    if (selectedKits.size === 0) return

showToast(`Exporting ${selectedKits.size} kit(s) as JSON...`, "info")

try {
      const exportData = filteredKits
        .filter((kit) => selectedKits.has(kit.id))
        .map((kit) => ({
          id: kit.id,
          brand_name: kit.brand_name,
          segment: kit.segment,
          created_at: kit.created_at,
        }))

const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: "application/json" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `brand-kits-${new Date().toISOString().split("T")[0]}.json`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

showToast("Export successful!", "success")
    } catch (error) {
      console.error("[v0] Bulk export error:", error)
      showToast("Failed to export kits", "error")
    }
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 py-8 sm:py-10">
        <header className="mb-6 sm:mb-8 flex flex-col gap-3 border-b border-slate-800 pb-4 sm:pb-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-xl sm:text-2xl font-semibold tracking-tight">Brand Kits</h1>
            <p className="mt-1 text-xs sm:text-sm text-slate-300">
              Search, filter, and manage your cannabis brand kits.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2 text-xs">
            <Link
              href="/studio"
              className="rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2 text-slate-200 hover:border-emerald-400 hover:text-emerald-200 active:scale-95"
            >
              ← Studio
            </Link>
            <Link
              href="/wizard"
              className="rounded-lg bg-emerald-500 px-3 py-2 font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400 active:scale-95"
            >
              Start a new brand kit
            </Link>
          </div>
        </header>

{!loading && !error && kits.length > 0 && (
          <div className="mb-6 space-y-3">
            {/* Search and Sort */}
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <Input
                  type="text"
                  placeholder="Search by name, segment, or ID..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 bg-slate-900/70 border-slate-800 text-sm h-10"
                />
              </div>

<div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-slate-400 hidden sm:block" />
                <select
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value as any)}
                  className="flex-1 sm:flex-none rounded-lg border border-slate-800 bg-slate-900/70 px-3 py-2 text-sm text-slate-200 active:scale-95"
                >
                  <option value="newest">Newest First</option>
                  <option value="oldest">Oldest First</option>
                  <option value="name">Name (A-Z)</option>
                </select>

<Button
                  variant={selectMode ? "default" : "outline"}
                  size="sm"
                  onClick={() => {
                    setSelectMode(!selectMode)
                    if (selectMode) setSelectedKits(new Set())
                  }}
                  className="text-xs whitespace-nowrap active:scale-95"
                >
                  {selectMode ? "Cancel" : "Select"}
                </Button>
              </div>
            </div>

{/* Bulk Actions */}
            {selectMode && (
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 rounded-lg border border-emerald-500/40 bg-emerald-500/10 px-3 sm:px-4 py-2">
                <div className="flex items-center gap-3">
                  <button
                    onClick={toggleSelectAll}
                    className="flex items-center gap-2 text-sm text-slate-200 hover:text-emerald-300 active:scale-95"
                  >
                    {selectedKits.size === filteredKits.length ? (
                      <CheckSquare className="h-4 w-4" />
                    ) : (
                      <Square className="h-4 w-4" />
                    )}
                    <span className="text-xs sm:text-sm">
                      {selectedKits.size === filteredKits.length ? "Deselect All" : "Select All"}
                      {selectedKits.size > 0 && ` (${selectedKits.size})`}
                    </span>
                  </button>
                </div>

{selectedKits.size > 0 && (
                  <div className="flex items-center gap-2 w-full sm:w-auto">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={bulkExport}
                      className="flex-1 sm:flex-none items-center gap-1 text-xs bg-transparent active:scale-95"
                    >
                      <Download className="h-3 w-3" />
                      <span className="hidden sm:inline">Export JSON</span>
                      <span className="sm:hidden">Export</span>
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={bulkDelete}
                      className="flex-1 sm:flex-none items-center gap-1 text-xs active:scale-95"
                    >
                      <Trash2 className="h-3 w-3" />
                      Delete
                    </Button>
                  </div>
                )}
              </div>
            )}

{/* Results count */}
            <div className="text-xs text-slate-400">
              {filteredKits.length === kits.length ? (
                <>
                  Showing all {kits.length} kit{kits.length === 1 ? "" : "s"}
                </>
              ) : (
                <>
                  Showing {filteredKits.length} of {kits.length} kit{kits.length === 1 ? "" : "s"}
                </>
              )}
            </div>
          </div>
        )}

{loading ? (
          <div className="space-y-3">
            <div className="animate-pulse rounded-xl border border-slate-800 bg-slate-950/80 p-4">
              <div className="h-5 w-48 rounded bg-slate-800"></div>
              <div className="mt-2 h-4 w-32 rounded bg-slate-800"></div>
            </div>
            <div className="animate-pulse rounded-xl border border-slate-800 bg-slate-950/80 p-4">
              <div className="h-5 w-56 rounded bg-slate-800"></div>
              <div className="mt-2 h-4 w-40 rounded bg-slate-800"></div>
            </div>
            <div className="animate-pulse rounded-xl border border-slate-800 bg-slate-950/80 p-4">
              <div className="h-5 w-40 rounded bg-slate-800"></div>
              <div className="mt-2 h-4 w-36 rounded bg-slate-800"></div>
            </div>
          </div>
        ) : error ? (
          <ErrorMessage message={error} onRetry={fetchKits} />
        ) : kits.length === 0 ? (
          <EmptyState
            icon={Sparkles}
            title="No brand kits yet"
            description="Generate your first cannabis brand kit with the wizard. It only takes a few minutes to create a complete brand system."
            action={{ label: "Create Your First Kit", href: "/wizard" }}
          />
        ) : filteredKits.length === 0 ? (
          <EmptyState
            icon={Search}
            title="No kits found"
            description={`No kits match your search "${searchQuery}". Try a different search term.`}
          />
        ) : (
          <section className="rounded-2xl border border-slate-800 bg-slate-900/70 p-3 sm:p-4 text-xs">
            <div className="divide-y divide-slate-800">
              {filteredKits.map((kit) => {
                const createdDate = new Date(kit.created_at).toLocaleString("en-US", {
                  month: "short",
                  day: "numeric",
                  year: "numeric",
                  hour: "numeric",
                  minute: "2-digit",
                })
                const isSelected = selectedKits.has(kit.id)

return (
                  <div
                    key={kit.id}
                    className={`flex items-center justify-between gap-2 sm:gap-3 py-3 transition-colors ${
                      isSelected ? "bg-emerald-500/10" : "hover:bg-slate-900/60"
                    }`}
                  >
                    {selectMode && (
                      <button
                        onClick={() => toggleKitSelection(kit.id)}
                        className="flex items-center p-1 active:scale-95"
                      >
                        {isSelected ? (
                          <CheckSquare className="h-5 w-5 text-emerald-400" />
                        ) : (
                          <Square className="h-5 w-5 text-slate-600" />
                        )}
                      </button>
                    )}

<Link
                      href={`/kit/${kit.id}`}
                      className="flex flex-1 flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-0 min-w-0"
                    >
                      <div className="flex flex-col gap-0.5 min-w-0">
                        <span className="text-sm font-medium text-slate-50 hover:text-emerald-300 transition-colors truncate">
                          {kit.brand_name}
                        </span>
                        <span className="text-[11px] text-slate-400">{kit.segment || "Cannabis brand kit"}</span>
                      </div>
                      <div className="text-left sm:text-right text-[11px] text-slate-400">
                        <div>{createdDate}</div>
                        <div className="font-mono text-[10px] text-slate-500">ID: {kit.id.toString()}</div>
                      </div>
                    </Link>

{!selectMode && (
                      <div className="shrink-0">
                        <DeleteKitButton
                          kitId={kit.id.toString()}
                          brandName={kit.brand_name}
                          onDelete={() => handleKitDeleted(kit.id.toString())}
                        />
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          </section>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/kits/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true"
import { createBrowserClient } from "@supabase/ssr"

/**
 * Create a Supabase browser client for use in Client Components.
 */
export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
}
[V0_FILE]typescript:file="lib/supabase/middleware.ts" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { NextResponse, type NextRequest } from "next/server"

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
          supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options))
        },
      },
    },
  )

// IMPORTANT: Do not run code between createServerClient and supabase.auth.getUser()
  // If you remove getUser() and use server-side rendering, users may be randomly logged out
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (
    !user &&
    !request.nextUrl.pathname.startsWith("/auth") &&
    !request.nextUrl.pathname.startsWith("/preview/") &&
    request.nextUrl.pathname !== "/" &&
    request.nextUrl.pathname !== "/wizard" &&
    request.nextUrl.pathname !== "/kit/demo" &&
    request.nextUrl.pathname !== "/strain-lab"
  ) {
    const url = request.nextUrl.clone()
    url.pathname = "/auth/login"
    return NextResponse.redirect(url)
  }

return supabaseResponse
}
[V0_FILE]typescript:file="middleware.ts" isEdit="true" isMerged="true"
// Authentication will be optional until users are created

import type { NextRequest } from "next/server"
import { NextResponse } from "next/server"

export async function middleware(request: NextRequest) {
  // For now, let all requests through without authentication
  // We'll re-enable auth after confirming the app works
  return NextResponse.next()
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
}
[V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function SignUpSuccessPage() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 md:p-10 bg-gradient-to-br from-slate-950 via-emerald-950 to-slate-900">
      <div className="w-full max-w-sm">
        <Card className="border-slate-800 bg-slate-900/50 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-2xl text-slate-100">Check Your Email</CardTitle>
            <CardDescription className="text-slate-400">Confirm your account to get started</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <p className="text-sm text-slate-300">
              We've sent you a confirmation email. Please check your inbox and click the confirmation link to activate
              your account.
            </p>
            <Button asChild className="w-full bg-emerald-600 hover:bg-emerald-700">
              <Link href="/auth/login">Back to Login</Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/004-add-user-auth.sql" isMerged="true"
-- Add user_id column to brands table
ALTER TABLE brands ADD COLUMN IF NOT EXISTS user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE;

-- Add user_id column to brand_kits table  
ALTER TABLE brand_kits ADD COLUMN IF NOT EXISTS user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE;

-- Enable Row Level Security on brands table
ALTER TABLE brands ENABLE ROW LEVEL SECURITY;

-- Create RLS policies for brands table
CREATE POLICY "Users can view their own brands" ON brands
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can create their own brands" ON brands
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update their own brands" ON brands
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Users can delete their own brands" ON brands
  FOR DELETE USING (auth.uid() = user_id);

-- Enable Row Level Security on brand_kits table
ALTER TABLE brand_kits ENABLE ROW LEVEL SECURITY;

-- Create RLS policies for brand_kits table
CREATE POLICY "Users can view their own kits" ON brand_kits
  FOR SELECT USING (auth.uid() = user_id OR is_public = true);

CREATE POLICY "Users can create their own kits" ON brand_kits
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update their own kits" ON brand_kits
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Users can delete their own kits" ON brand_kits
  FOR DELETE USING (auth.uid() = user_id);
[V0_FILE]typescript:file="lib/supabase/server.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

/**
 * Create a Supabase server client for use in Server Components and Server Actions.
 * IMPORTANT: Don't put this client in a global variable. Always create a new client
 * within each function when using it.
 */
export async function createClient() {
  const cookieStore = await cookies()

return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // The "setAll" method was called from a Server Component.
          // This can be ignored if you have middleware refreshing
          // user sessions.
        }
      },
    },
  })
}

export { createClient as createServerClient }
[V0_FILE]typescript:file="app/api/brands/[id]/generate-kit/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generateObject } from "ai"
import { sql } from "@/lib/db"
import { BrandKitSchema } from "@/lib/types"
// import { createServerClient } from "@/lib/supabase/server"

export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    // const supabase = await createServerClient()
    // const {
    //   data: { user },
    // } = await supabase.auth.getUser()

const { id } = await params
    const brandId = Number.parseInt(id)

if (isNaN(brandId)) {
      return NextResponse.json({ error: "Invalid brand ID" }, { status: 400 })
    }

const brandResult = await sql`
      SELECT id, name, description, target_audience
      FROM brands
      WHERE id = ${brandId}
    `

if (brandResult.length === 0) {
      return NextResponse.json({ error: "Brand not found" }, { status: 404 })
    }

const brand = brandResult[0]

// if (user && brand.user_id && brand.user_id !== user.id) {
    //   return NextResponse.json({ error: "Forbidden - You don't own this brand" }, { status: 403 })
    // }

// Generate brand kit using AI
    const { object: brandKit } = await generateObject({
      model: "openai/gpt-4o",
      schema: BrandKitSchema,
      prompt: `You are a professional cannabis brand designer. Generate a comprehensive brand kit for the following cannabis brand:

Brand Name: ${brand.name}
Description: ${brand.description}
Target Audience: ${brand.target_audience}

Create a brand kit with:
1. Colors: 4-6 colors with names, hex codes, and usage descriptions (primary, secondary, accent, etc.)
2. Typography: Recommend heading and body fonts with pairing rationale
3. Voice & Tone: Define personality traits (3-5), messaging strategy, and dos/donts
4. Visual Direction: Describe the visual style, imagery approach, and key design elements

Make it professional, modern, and appropriate for the cannabis industry. Ensure colors are accessible and fonts are web-safe or commonly available.`,
    })

// Save brand kit to database
    await sql`
      INSERT INTO brand_kits (brand_id, colors, typography, voice_tone, visual_direction)
      VALUES (
        ${brandId},
        ${JSON.stringify(brandKit.colors)},
        ${JSON.stringify(brandKit.typography)},
        ${JSON.stringify(brandKit.voiceTone)},
        ${JSON.stringify(brandKit.visualDirection)}
      )
    `

return NextResponse.json({ brandKit }, { status: 201 })
  } catch (error) {
    console.error("[v0] Error generating brand kit:", error)
    if (error instanceof Error) {
      return NextResponse.json({ error: error.message }, { status: 500 })
    }
    return NextResponse.json({ error: "Failed to generate brand kit" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/005-add-kit-templates.sql" isMerged="true"
-- Add kit_templates table to save wizard configurations
CREATE TABLE IF NOT EXISTS kit_templates (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  config JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Add index for faster lookups
CREATE INDEX IF NOT EXISTS idx_kit_templates_created ON kit_templates(created_at DESC);
[V0_FILE]typescript:file="lib/types.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { z } from "zod"

// Zod schemas for validation
export const BrandInputSchema = z.object({
  name: z.string().min(1, "Brand name is required").max(255),
  description: z.string().min(10, "Description must be at least 10 characters"),
  targetAudience: z.string().min(10, "Target audience must be at least 10 characters"),
})

export const ColorSchema = z.object({
  name: z.string(),
  hex: z.string().regex(/^#[0-9A-F]{6}$/i, "Invalid hex color"),
  usage: z.string(),
})

export const TypographySchema = z.object({
  headingFont: z.string(),
  bodyFont: z.string(),
  fontPairing: z.string(),
})

export const VoiceToneSchema = z.object({
  personality: z.array(z.string()),
  messaging: z.string(),
  dosDonts: z.object({
    dos: z.array(z.string()),
    donts: z.array(z.string()),
  }),
})

export const VisualDirectionSchema = z.object({
  style: z.string(),
  imagery: z.string(),
  designElements: z.array(z.string()),
})

export const SnapshotSchema = z.object({
  one_liner: z.string(),
  brand_story: z.string(),
  positioning: z.string(),
})

export const LogoDirectionsSchema = z.object({
  summary: z.string(),
  motifs: z.array(z.string()),
  treatment_notes: z.string(),
  ai_prompt: z.string(),
})

export const PackagingConceptSchema = z.object({
  description: z.string(),
  finishes: z.string(),
  ai_prompt: z.string(),
})

export const PackagingConceptsSchema = z.record(PackagingConceptSchema)

export const CopyVoiceSchema = z.object({
  voice_description: z.string(),
  taglines: z.array(z.string()),
  about_paragraph: z.string(),
  strain_description_template: z.string(),
})

export const PromptsSchema = z.object({
  logo_prompt: z.string(),
  packaging_prompts: z.record(z.string()),
  copy_prompt: z.string().optional(),
})

export const BrandKitSchema = z.object({
  snapshot: SnapshotSchema,
  colors: z.array(ColorSchema),
  typography: TypographySchema,
  voiceTone: VoiceToneSchema,
  visualDirection: VisualDirectionSchema,
  logo_directions: LogoDirectionsSchema,
  packaging_concepts: PackagingConceptsSchema,
  copy_voice: CopyVoiceSchema,
  prompts: PromptsSchema,
})

export const WizardInputSchema = z.object({
  brandName: z.string().min(1, "Brand name is required").max(255),
  tagline: z.string().optional(),
  segment: z.string().min(1, "Segment is required"),
  targetAudience: z.array(z.string()).min(1, "At least one target audience is required"),
  personality: z.object({
    playful: z.number().min(1).max(5),
    loud: z.number().min(1).max(5),
    street: z.number().min(1).max(5),
    earthy: z.number().min(1).max(5),
  }),
  visualStyle: z.string().min(1, "Visual style is required"),
  productFocus: z.array(z.string()).min(1, "At least one product focus is required"),
  packagingPreference: z.string().min(1, "Packaging preference is required"),
  geoContext: z.string().optional(),
  outputs: z.array(z.string()).min(1, "At least one output is required"),
})

export const KitTemplateSchema = z.object({
  id: z.number(),
  name: z.string(),
  description: z.string().optional(),
  config: z.object({
    segment: z.string(),
    targetAudience: z.array(z.string()),
    visualStyle: z.string(),
    productFocus: z.array(z.string()),
    packagingPreference: z.string(),
  }),
  created_at: z.string(),
})

// TypeScript types
export type BrandInput = z.infer<typeof BrandInputSchema>
export type Color = z.infer<typeof ColorSchema>
export type Typography = z.infer<typeof TypographySchema>
export type VoiceTone = z.infer<typeof VoiceToneSchema>
export type VisualDirection = z.infer<typeof VisualDirectionSchema>
export type Snapshot = z.infer<typeof SnapshotSchema>
export type LogoDirections = z.infer<typeof LogoDirectionsSchema>
export type PackagingConcept = z.infer<typeof PackagingConceptSchema>
export type PackagingConcepts = z.infer<typeof PackagingConceptsSchema>
export type CopyVoice = z.infer<typeof CopyVoiceSchema>
export type Prompts = z.infer<typeof PromptsSchema>
export type BrandKit = z.infer<typeof BrandKitSchema>
export type WizardInput = z.infer<typeof WizardInputSchema>
export type KitTemplate = z.infer<typeof KitTemplateSchema>

export interface Brand {
  id: number
  name: string
  description: string
  target_audience: string
  created_at: string
  updated_at: string
}

export interface BrandKitRow {
  id: number
  brand_id: number
  snapshot: Snapshot
  colors: Color[]
  typography: Typography
  voice_tone: VoiceTone
  visual_direction: VisualDirection
  logo_directions: LogoDirections
  packaging_concepts: PackagingConcepts
  copy_voice: CopyVoice
  prompts: Prompts
  moodboard?: any
  created_at: string
  updated_at: string
}
[V0_FILE]typescript:file="app/api/templates/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { listKitTemplates, createKitTemplate } from "@/lib/db"

export async function GET() {
  try {
    const templates = await listKitTemplates()
    return NextResponse.json(templates)
  } catch (error) {
    console.error("Error fetching templates:", error)
    return NextResponse.json({ error: "Failed to fetch templates" }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const { name, description, config } = await request.json()

if (!name || !config) {
      return NextResponse.json({ error: "Name and config are required" }, { status: 400 })
    }

const id = await createKitTemplate(name, description || null, config)
    return NextResponse.json({ id, name, description, config })
  } catch (error) {
    console.error("Error creating template:", error)
    return NextResponse.json({ error: "Failed to create template" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/templates/[id]/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { deleteKitTemplate } from "@/lib/db"

export async function DELETE(request: Request, { params }: { params: { id: string } }) {
  try {
    await deleteKitTemplate(Number.parseInt(params.id))
    return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting template:", error)
    return NextResponse.json({ error: "Failed to delete template" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useEffect, useState } from "react"

export function ThemeToggle() {
  const [theme, setTheme] = useState<"light" | "dark">("dark")
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
    const stored = localStorage.getItem("theme") as "light" | "dark" | null
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    const initialTheme = stored || (prefersDark ? "dark" : "light")
    setTheme(initialTheme)
    document.documentElement.classList.toggle("dark", initialTheme === "dark")
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "dark" ? "light" : "dark"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
  }

if (!mounted) return null

return (
    <button
      onClick={toggleTheme}
      className="flex items-center justify-center rounded-lg p-2 text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
      aria-label="Toggle theme"
    >
      {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
    </button>
  )
}
[V0_FILE]typescript:file="app/wizard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { BookmarkPlus, BookOpen } from "lucide-react"
import type { KitTemplate } from "@/lib/types"
import { PaywallModal } from "@/components/paywall-modal"

import type React from "react"
import type { WizardFormValues } from "@/lib/wizard-types"
import { generateBrandKit } from "@/lib/wizard-api"
import { Loader2 } from "lucide-react"

const steps = ["Brand Basics", "Vibe & Style", "Products & Packaging", "Outputs & Review"]

const segments = ["Recreational / Adult-use", "Medical", "Wellness / CBD", "Luxury / Connoisseur", "Value / Budget"]

const audienceOptions = [
  "Heavy smokers",
  "Newcomers",
  "Wellness-focused",
  "Discreet consumers",
  "Tourists",
  "Medical patients",
  "Working professionals",
]

const visualStyles = [
  "Luxury Minimal",
  "Street / Hip-Hop",
  "Organic / Earthy",
  "Psychedelic / Retro",
  "Clinical / Medical",
]

const productOptions = [
  "Flower",
  "Pre-rolls",
  "Vape carts",
  "Concentrates",
  "Edibles",
  "Topicals",
  "Rolling papers / accessories",
]

const packagingPreferences = ["Cost-effective", "Premium / custom", "Eco-friendly", "Loud on the shelf"]

const outputOptions = [
  { key: "colors", label: "Color palette" },
  { key: "typography", label: "Typography suggestions" },
  { key: "logo", label: "Logo style directions + prompts" },
  { key: "packaging", label: "Packaging concepts + prompts" },
  { key: "story", label: "Brand story / About section" },
  { key: "taglines", label: "Tagline variations" },
]

export default function WizardPage() {
  const router = useRouter()

const [step, setStep] = useState(0)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [generationProgress, setGenerationProgress] = useState<string>("")

const [formValues, setFormValues] = useState<WizardFormValues>({
    brandName: "",
    tagline: "",
    segment: "",
    targetAudience: [],
    personality: {
      playful: 3,
      loud: 3,
      street: 3,
      earthy: 3,
    },
    visualStyle: "",
    productFocus: [],
    packagingPreference: "",
    geoContext: "",
    outputs: outputOptions.map((o) => o.key), // default: all selected
  })

const [templates, setTemplates] = useState<KitTemplate[]>([])
  const [showTemplates, setShowTemplates] = useState(false)
  const [saveTemplateMode, setSaveTemplateMode] = useState(false)
  const [templateName, setTemplateName] = useState("")

const [subscriptionStatus, setSubscriptionStatus] = useState<any>(null)
  const [showPaywall, setShowPaywall] = useState(false)

useEffect(() => {
    fetch("/api/templates")
      .then((res) => res.json())
      .then((data) => setTemplates(data))
      .catch((err) => console.error("Error loading templates:", err))
  }, [])

useEffect(() => {
    if (typeof window !== "undefined") {
      const urlParams = new URLSearchParams(window.location.search)
      const nameParam = urlParams.get("name")
      if (nameParam) {
        setFormValues((prev) => ({
          ...prev,
          brandName: decodeURIComponent(nameParam),
        }))
      }
    }
  }, [])

useEffect(() => {
    fetch("/api/subscription")
      .then((res) => res.json())
      .then((data) => setSubscriptionStatus(data))
  }, [])

// helpers
  const toggleArrayValue = (field: keyof WizardFormValues, value: string) => {
    setFormValues((prev) => {
      const current = (prev[field] as string[]) || []
      const exists = current.includes(value)
      return {
        ...prev,
        [field]: exists ? current.filter((v) => v !== value) : [...current, value],
      }
    })
  }

const updatePersonality = (key: "playful" | "loud" | "street" | "earthy", value: number) => {
    setFormValues((prev) => ({
      ...prev,
      personality: {
        ...prev.personality,
        [key]: value,
      },
    }))
  }

const canGoNext = () => {
    if (step === 0) {
      return formValues.brandName.trim().length > 0 && formValues.segment.trim().length > 0
    }
    if (step === 1) {
      return formValues.visualStyle.trim().length > 0
    }
    if (step === 2) {
      return formValues.productFocus.length > 0 && formValues.packagingPreference.trim().length > 0
    }
    // step 3: always can submit (validation will happen on backend too)
    return true
  }

const goNext = () => {
    if (step < steps.length - 1) setStep((s) => s + 1)
  }

const goBack = () => {
    if (step > 0) setStep((s) => s - 1)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)

if (subscriptionStatus && !subscriptionStatus.canCreateKit) {
      setShowPaywall(true)
      return
    }

setIsSubmitting(true)
    setGenerationProgress("Analyzing your brand inputs...")

setTimeout(() => setGenerationProgress("Generating color palette..."), 1000)
    setTimeout(() => setGenerationProgress("Creating typography system..."), 2000)
    setTimeout(() => setGenerationProgress("Crafting logo directions..."), 3000)
    setTimeout(() => setGenerationProgress("Building packaging concepts..."), 4000)
    setTimeout(() => setGenerationProgress("Writing brand voice & copy..."), 5000)

const result = await generateBrandKit(formValues)

setIsSubmitting(false)
    setGenerationProgress("")

if (!result.ok) {
      if (result.error === "Kit limit reached") {
        setShowPaywall(true)
        return
      }
      setError(result.error || "Something went wrong")
      return
    }

router.push(`/kit/${result.kitId}`)
  }

const handleLoadTemplate = (template: KitTemplate) => {
    setFormValues((prev) => ({
      ...prev,
      segment: template.config.segment,
      targetAudience: template.config.targetAudience,
      visualStyle: template.config.visualStyle,
      productFocus: template.config.productFocus,
      packagingPreference: template.config.packagingPreference,
    }))
    setShowTemplates(false)
  }

const handleSaveTemplate = async () => {
    if (!templateName.trim()) return

const config = {
      segment: formValues.segment,
      targetAudience: formValues.targetAudience,
      visualStyle: formValues.visualStyle,
      productFocus: formValues.productFocus,
      packagingPreference: formValues.packagingPreference,
    }

try {
      const res = await fetch("/api/templates", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: templateName,
          description: `Template for ${formValues.segment}`,
          config,
        }),
      })

if (res.ok) {
        const newTemplate = await res.json()
        setTemplates([...templates, newTemplate])
        setTemplateName("")
        setSaveTemplateMode(false)
      }
    } catch (error) {
      console.error("Error saving template:", error)
    }
  }

const handleDeleteTemplate = async (id: number) => {
    try {
      const res = await fetch(`/api/templates/${id}`, { method: "DELETE" })
      if (res.ok) {
        setTemplates(templates.filter((t) => t.id !== id))
      }
    } catch (error) {
      console.error("Error deleting template:", error)
    }
  }

return (
    <>
      <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
          {/* Header */}
          <header className="mb-6 sm:mb-8">
            <h1 className="text-2xl sm:text-3xl font-semibold tracking-tight">Cannabrand Studio</h1>
            <p className="mt-2 text-xs sm:text-sm text-slate-300">
              Answer a few questions and we'll generate a ready-to-use cannabis brand kit: colors, typography, logo
              directions, packaging prompts, and more.
            </p>
          </header>

{step === 0 && (
            <div className="mb-6 flex gap-2">
              <button
                onClick={() => setShowTemplates(!showTemplates)}
                className="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-900/50 px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
              >
                <BookOpen className="h-4 w-4" />
                Load Template
              </button>
              <button
                onClick={() => setSaveTemplateMode(!saveTemplateMode)}
                className="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-900/50 px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
              >
                <BookmarkPlus className="h-4 w-4" />
                Save as Template
              </button>
            </div>
          )}

{/* Stepper */}
          <WizardStepper currentStep={step} />

{/* Error banner */}
          {error && (
            <div className="mt-4 mb-4 rounded-lg border border-red-500 bg-red-950/40 px-3 sm:px-4 py-3 text-xs sm:text-sm text-red-200">
              {error}
            </div>
          )}

{/* Loading overlay with progress */}
          {isSubmitting && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 backdrop-blur-sm px-4">
              <div className="w-full max-w-sm rounded-2xl border border-emerald-500/40 bg-slate-900 p-6 sm:p-8 shadow-2xl shadow-emerald-500/20">
                <div className="flex flex-col items-center gap-4">
                  <Loader2 className="h-10 w-10 sm:h-12 sm:w-12 animate-spin text-emerald-400" />
                  <div className="text-center">
                    <div className="text-base sm:text-lg font-semibold text-slate-50">Generating Your Brand Kit</div>
                    <div className="mt-2 text-xs sm:text-sm text-emerald-300">{generationProgress}</div>
                    <div className="mt-3 text-xs text-slate-400">This usually takes 10-20 seconds...</div>
                  </div>
                </div>
              </div>
            </div>
          )}

{showTemplates && (
            <div className="mb-6 rounded-xl border border-slate-700 bg-slate-900/80 p-4">
              <h3 className="mb-3 text-sm font-semibold text-slate-50">Load Template</h3>
              {templates.length === 0 ? (
                <p className="text-xs text-slate-400">No templates saved yet.</p>
              ) : (
                <div className="space-y-2">
                  {templates.map((template) => (
                    <div
                      key={template.id}
                      className="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-900/50 p-3"
                    >
                      <div>
                        <div className="text-sm font-medium text-slate-50">{template.name}</div>
                        <div className="text-xs text-slate-400">{template.config.segment}</div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => handleLoadTemplate(template)}
                          className="rounded-lg bg-emerald-500 px-3 py-1.5 text-xs font-semibold text-slate-950 hover:bg-emerald-400 transition-colors"
                        >
                          Load
                        </button>
                        <button
                          onClick={() => handleDeleteTemplate(template.id)}
                          className="rounded-lg border border-slate-700 px-3 py-1.5 text-xs font-medium text-slate-300 hover:bg-slate-800 transition-colors"
                        >
                          Delete
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

{saveTemplateMode && (
            <div className="mb-6 rounded-xl border border-slate-700 bg-slate-900/80 p-4">
              <h3 className="mb-3 text-sm font-semibold text-slate-50">Save Template</h3>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={templateName}
                  onChange={(e) => setTemplateName(e.target.value)}
                  placeholder="Template name..."
                  className="flex-1 rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2 text-sm text-slate-50 outline-none focus:border-emerald-400"
                />
                <button
                  onClick={handleSaveTemplate}
                  disabled={!templateName.trim()}
                  className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-emerald-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  Save
                </button>
              </div>
            </div>
          )}

<form onSubmit={handleSubmit} className="mt-4 sm:mt-6">
            <div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-4 sm:p-6 shadow-lg shadow-black/40">
              {step === 0 && <StepBrandBasics formValues={formValues} setFormValues={setFormValues} />}
              {step === 1 && (
                <StepVibeStyle
                  formValues={formValues}
                  updatePersonality={updatePersonality}
                  setFormValues={setFormValues}
                />
              )}
              {step === 2 && (
                <StepProductsPackaging
                  formValues={formValues}
                  setFormValues={setFormValues}
                  toggleArrayValue={toggleArrayValue}
                />
              )}
              {step === 3 && <StepOutputsReview formValues={formValues} toggleArrayValue={toggleArrayValue} />}

{/* Footer buttons */}
              <div className="mt-6 sm:mt-8 flex items-center justify-between border-t border-slate-800 pt-4">
                <button
                  type="button"
                  onClick={goBack}
                  disabled={step === 0 || isSubmitting}
                  className="rounded-lg border border-slate-700 px-4 py-2 text-sm font-medium text-slate-200 disabled:opacity-50 active:scale-95"
                >
                  Back
                </button>

{step < steps.length - 1 ? (
                  <button
                    type="button"
                    onClick={goNext}
                    disabled={!canGoNext() || isSubmitting}
                    className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/40 disabled:opacity-50 active:scale-95"
                  >
                    Next
                  </button>
                ) : (
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="inline-flex items-center rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/40 disabled:opacity-50 active:scale-95"
                  >
                    {isSubmitting ? "Generating..." : "Generate Brand Kit"}
                  </button>
                )}
              </div>
            </div>
          </form>
        </div>
      </div>

{subscriptionStatus && (
        <PaywallModal
          isOpen={showPaywall}
          onClose={() => setShowPaywall(false)}
          reason="kit"
          currentUsage={subscriptionStatus.usage.kitsThisMonth}
          limit={subscriptionStatus.limits.kitsPerMonth}
        />
      )}
    </>
  )
}

/* -------------------- Stepper -------------------- */

function WizardStepper({ currentStep }: { currentStep: number }) {
  return (
    <ol className="flex flex-col gap-2 sm:gap-3 rounded-2xl border border-slate-800 bg-slate-900/60 p-3 sm:p-4 sm:flex-row sm:items-center sm:justify-between">
      {steps.map((label, index) => {
        const isActive = index === currentStep
        const isCompleted = index < currentStep
        return (
          <li key={label} className="flex flex-1 items-center gap-2 sm:gap-3 text-xs sm:text-sm">
            <div
              className={[
                "flex h-6 w-6 sm:h-7 sm:w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
                isActive
                  ? "border-emerald-400 bg-emerald-500 text-slate-950 shadow shadow-emerald-500/60"
                  : isCompleted
                    ? "border-emerald-500 bg-emerald-600 text-slate-950"
                    : "border-slate-600 bg-slate-900 text-slate-300",
              ].join(" ")}
            >
              {isCompleted ? "✓" : index + 1}
            </div>
            <span
              className={[
                "font-medium truncate",
                isActive ? "text-slate-50" : isCompleted ? "text-emerald-300" : "text-slate-400",
              ].join(" ")}
            >
              {label}
            </span>
          </li>
        )
      })}
    </ol>
  )
}

/* -------------------- Step 1: Brand Basics -------------------- */

type StepProps<T = WizardFormValues> = {
  formValues: T
  setFormValues: React.Dispatch<React.SetStateAction<WizardFormValues>>
}

function StepBrandBasics({ formValues, setFormValues }: StepProps) {
  return (
    <div className="space-y-5 sm:space-y-6">
      <div>
        <h2 className="text-lg sm:text-xl font-semibold text-slate-50">Brand Basics</h2>
        <p className="mt-1 text-xs text-slate-400">We'll start with the core identity of your cannabis brand.</p>
      </div>

<div className="grid gap-4 sm:gap-5 md:grid-cols-2">
        <div className="md:col-span-2">
          <label className="mb-1 block text-xs font-medium text-slate-200">
            Brand name <span className="text-emerald-400">*</span>
          </label>
          <input
            type="text"
            value={formValues.brandName}
            onChange={(e) =>
              setFormValues((prev) => ({
                ...prev,
                brandName: e.target.value,
              }))
            }
            className="w-full rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2.5 sm:py-2 text-sm text-slate-50 outline-none focus:border-emerald-400"
            placeholder="e.g. Blue Diamonds, Dust, High Q Strands..."
            required
          />
        </div>

<div>
          <label className="mb-1 block text-xs font-medium text-slate-200">
            Tagline <span className="text-slate-400">(optional)</span>
          </label>
          <input
            type="text"
            value={formValues.tagline}
            onChange={(e) =>
              setFormValues((prev) => ({
                ...prev,
                tagline: e.target.value,
              }))
            }
            className="w-full rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2.5 sm:py-2 text-sm text-slate-50 outline-none focus:border-emerald-400"
            placeholder="e.g. Refined flower for after-hours minds"
          />
        </div>

<div>
          <label className="mb-1 block text-xs font-medium text-slate-200">
            Market segment <span className="text-emerald-400">*</span>
          </label>
          <select
            value={formValues.segment}
            onChange={(e) =>
              setFormValues((prev) => ({
                ...prev,
                segment: e.target.value,
              }))
            }
            className="w-full rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2.5 sm:py-2 text-sm text-slate-50 outline-none focus:border-emerald-400"
            required
          >
            <option value="">Select segment...</option>
            {segments.map((seg) => (
              <option key={seg} value={seg}>
                {seg}
              </option>
            ))}
          </select>
        </div>
      </div>

{/* Audience chips */}
      <div>
        <label className="mb-2 block text-xs font-medium text-slate-200">
          Target audience <span className="text-slate-400">(choose one or more)</span>
        </label>
        <div className="flex flex-wrap gap-2">
          {audienceOptions.map((aud) => {
            const isActive = formValues.targetAudience.includes(aud)
            return (
              <button
                key={aud}
                type="button"
                onClick={() =>
                  setFormValues((prev) => {
                    const exists = prev.targetAudience.includes(aud)
                    return {
                      ...prev,
                      targetAudience: exists
                        ? prev.targetAudience.filter((a) => a !== aud)
                        : [...prev.targetAudience, aud],
                    }
                  })
                }
                className={[
                  "rounded-full border px-3 py-1.5 sm:py-1 text-xs active:scale-95",
                  isActive
                    ? "border-emerald-400 bg-emerald-500/20 text-emerald-200"
                    : "border-slate-700 bg-slate-950/70 text-slate-300 hover:border-slate-500",
                ].join(" ")}
              >
                {aud}
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}

/* -------------------- Step 2: Vibe & Style -------------------- */

type StepVibeProps = StepProps & {
  updatePersonality: (key: "playful" | "loud" | "street" | "earthy", value: number) => void
}

function StepVibeStyle({ formValues, setFormValues, updatePersonality }: StepVibeProps) {
  const { personality } = formValues

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-slate-50">Vibe & Style</h2>
        <p className="mt-1 text-xs text-slate-400">
          Set the personality and visuals. This guides colors, copy, and packaging.
        </p>
      </div>

{/* Sliders */}
      <div className="grid gap-5 md:grid-cols-2">
        <PersonalitySlider
          label="Playful ↔ Serious"
          value={personality.playful}
          onChange={(val) => updatePersonality("playful", val)}
        />
        <PersonalitySlider
          label="Quiet ↔ Loud"
          value={personality.loud}
          onChange={(val) => updatePersonality("loud", val)}
        />
        <PersonalitySlider
          label="Street ↔ Luxury"
          value={personality.street}
          onChange={(val) => updatePersonality("street", val)}
        />
        <PersonalitySlider
          label="Earthy ↔ Futuristic"
          value={personality.earthy}
          onChange={(val) => updatePersonality("earthy", val)}
        />
      </div>

{/* Visual style presets */}
      <div>
        <label className="mb-2 block text-xs font-medium text-slate-200">
          Visual style preset <span className="text-emerald-400">*</span>
        </label>
        <div className="grid gap-3 md:grid-cols-3">
          {visualStyles.map((style) => {
            const isActive = formValues.visualStyle === style
            return (
              <button
                key={style}
                type="button"
                onClick={() => setFormValues((prev) => ({ ...prev, visualStyle: style }))}
                className={[
                  "flex flex-col items-start rounded-xl border px-3 py-3 text-left text-xs transition",
                  isActive
                    ? "border-emerald-400 bg-emerald-500/10 text-emerald-100 shadow-sm shadow-emerald-500/40"
                    : "border-slate-700 bg-slate-950/70 text-slate-200 hover:border-slate-500",
                ].join(" ")}
              >
                <span className="font-medium">{style}</span>
                <span className="mt-1 text-[11px] text-slate-400">{styleDescription(style)}</span>
              </button>
            )
          })}
        </div>
      </div>
    </div>
  )
}

function PersonalitySlider({
  label,
  value,
  onChange,
}: {
  label: string
  value: number
  onChange: (value: number) => void
}) {
  return (
    <div>
      <div className="flex items-center justify-between text-xs">
        <span className="font-medium text-slate-200">{label}</span>
        <span className="text-[11px] text-slate-400">Intensity: {value}</span>
      </div>
      <input
        type="range"
        min={1}
        max={5}
        step={1}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="mt-2 w-full accent-emerald-500"
      />
    </div>
  )
}

function styleDescription(style: string): string {
  switch (style) {
    case "Luxury Minimal":
      return "Monochrome palettes, metallic accents, premium quiet confidence."
    case "Street / Hip-Hop":
      return "Bold color hits, energy, culture-first, loud and unapologetic."
    case "Organic / Earthy":
      return "Greens, browns, textures, botanical and grounded."
    case "Psychedelic / Retro":
      return "Neon gradients, trippy motifs, 70s/80s throwback energy."
    case "Clinical / Medical":
      return "Clean, calm, blue/white palettes with trust-forward design."
    default:
      return ""
  }
}

/* -------------------- Step 3: Products & Packaging -------------------- */

type StepProdProps = StepProps & {
  toggleArrayValue: (field: keyof WizardFormValues, value: string) => void
}

function StepProductsPackaging({ formValues, setFormValues, toggleArrayValue }: StepProdProps) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-slate-50">Products & Packaging</h2>
        <p className="mt-1 text-xs text-slate-400">
          Tell us what you're selling and how you want it to show up on the shelf.
        </p>
      </div>

{/* Product focus */}
      <div>
        <label className="mb-2 block text-xs font-medium text-slate-200">
          Primary product types <span className="text-emerald-400">*</span>
        </label>
        <div className="flex flex-wrap gap-2">
          {productOptions.map((prod) => {
            const isActive = formValues.productFocus.includes(prod)
            return (
              <button
                key={prod}
                type="button"
                onClick={() => toggleArrayValue("productFocus", prod)}
                className={[
                  "rounded-full border px-3 py-1 text-xs",
                  isActive
                    ? "border-emerald-400 bg-emerald-500/20 text-emerald-200"
                    : "border-slate-700 bg-slate-950/70 text-slate-300 hover:border-slate-500",
                ].join(" ")}
              >
                {prod}
              </button>
            )
          })}
        </div>
      </div>

{/* Packaging preference */}
      <div>
        <label className="mb-2 block text-xs font-medium text-slate-200">
          Packaging preference <span className="text-emerald-400">*</span>
        </label>
        <div className="grid gap-3 md:grid-cols-2">
          {packagingPreferences.map((pref) => {
            const isActive = formValues.packagingPreference === pref
            return (
              <button
                key={pref}
                type="button"
                onClick={() =>
                  setFormValues((prev) => ({
                    ...prev,
                    packagingPreference: pref,
                  }))
                }
                className={[
                  "flex flex-col items-start rounded-xl border px-3 py-3 text-left text-xs transition",
                  isActive
                    ? "border-emerald-400 bg-emerald-500/10 text-emerald-100 shadow-sm shadow-emerald-500/40"
                    : "border-slate-700 bg-slate-950/70 text-slate-200 hover:border-slate-500",
                ].join(" ")}
              >
                <span className="font-medium">{pref}</span>
                <span className="mt-1 text-[11px] text-slate-400">{packagingDescription(pref)}</span>
              </button>
            )
          })}
        </div>
      </div>

{/* Geo context */}
      <div>
        <label className="mb-1 block text-xs font-medium text-slate-200">
          Geographic context <span className="text-slate-400">(optional)</span>
        </label>
        <input
          type="text"
          value={formValues.geoContext}
          onChange={(e) => setFormValues((prev) => ({ ...prev, geoContext: e.target.value }))}
          className="w-full rounded-lg border border-slate-700 bg-slate-950/80 px-3 py-2 text-sm text-slate-50 outline-none focus:border-emerald-400"
          placeholder="e.g. California, Pacific Northwest, Miami..."
        />
        <p className="mt-1 text-[11px] text-slate-400">Optional: region, city, or vibe to inform local flavor</p>
      </div>
    </div>
  )
}

function packagingDescription(pref: string): string {
  switch (pref) {
    case "Cost-effective":
      return "Simple mylar bags, sticker labels, affordable at scale."
    case "Premium / custom":
      return "Custom glass jars, rigid boxes, embossing, foil accents."
    case "Eco-friendly":
      return "Recycled cardboard, minimal plastics, biodegradable materials."
    case "Loud on the shelf":
      return "Bold graphics, bright colors, immediate attention-grabbing."
    default:
      return ""
  }
}

/* -------------------- Step 4: Outputs & Review -------------------- */

type StepOutputsProps = {
  formValues: WizardFormValues
  toggleArrayValue: (field: keyof WizardFormValues, value: string) => void
}

function StepOutputsReview({ formValues, toggleArrayValue }: StepOutputsProps) {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-semibold text-slate-50">Outputs & Review</h2>
        <p className="mt-1 text-xs text-slate-400">Select which assets you want generated, and review your inputs.</p>
      </div>

{/* Output toggles */}
      <div>
        <label className="mb-2 block text-xs font-medium text-slate-200">Include in brand kit:</label>
        <div className="grid gap-2 md:grid-cols-2">
          {outputOptions.map((opt) => {
            const isActive = formValues.outputs.includes(opt.key)
            return (
              <label key={opt.key} className="flex items-center gap-2 text-sm cursor-pointer">
                <input
                  type="checkbox"
                  checked={isActive}
                  onChange={() => toggleArrayValue("outputs", opt.key)}
                  className="h-4 w-4 text-emerald-500 focus:ring-emerald-500 border-slate-700 rounded"
                />
                {opt.label}
              </label>
            )
          })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/006-add-analytics.sql" isMerged="true"
-- Add analytics tracking tables

create table if not exists kit_views (
  id serial primary key,
  kit_id integer not null references brand_kits(id) on delete cascade,
  viewed_at timestamp with time zone default now()
);

create table if not exists kit_downloads (
  id serial primary key,
  kit_id integer not null references brand_kits(id) on delete cascade,
  download_type varchar(20) not null check (download_type in ('pdf', 'json')),
  downloaded_at timestamp with time zone default now()
);

create table if not exists kit_regenerations (
  id serial primary key,
  kit_id integer not null references brand_kits(id) on delete cascade,
  section varchar(50) not null,
  regenerated_at timestamp with time zone default now()
);

-- Indexes for better query performance
create index if not exists idx_kit_views_kit_id on kit_views(kit_id);
create index if not exists idx_kit_views_viewed_at on kit_views(viewed_at);
create index if not exists idx_kit_downloads_kit_id on kit_downloads(kit_id);
create index if not exists idx_kit_downloads_downloaded_at on kit_downloads(downloaded_at);
create index if not exists idx_kit_regenerations_kit_id on kit_regenerations(kit_id);
create index if not exists idx_kit_regenerations_regenerated_at on kit_regenerations(regenerated_at);
[V0_FILE]typescript:file="app/api/analytics/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import {
  getAnalyticsOverview,
  getTopViewedKits,
  getActivityTimeline,
  getSegmentDistribution,
  getRegenerationStats,
} from "@/lib/db"

export const dynamic = "force-dynamic"

export async function GET() {
  try {
    const [overview, topKits, timeline, segments, regenerations] = await Promise.all([
      getAnalyticsOverview(),
      getTopViewedKits(10),
      getActivityTimeline(30),
      getSegmentDistribution(),
      getRegenerationStats(),
    ])

const tablesExist = !("tablesExist" in overview && overview.tablesExist === false)

return NextResponse.json({
      overview,
      topKits,
      timeline,
      segments,
      regenerations,
      tablesExist,
    })
  } catch (error) {
    console.error("Error fetching analytics:", error)
    return NextResponse.json(
      {
        error: "Failed to fetch analytics",
        tablesExist: false,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/export/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandKitById, trackKitDownload } from "@/lib/db"

type Params = {
  params: Promise<{
    id: string
  }>
}

const DEMO_KIT_DATA = {
  id: "demo",
  brandId: null,
  snapshot: {
    one_liner: "Premium craft cannabis for the modern connoisseur",
    brand_story:
      "Blue Diamonds was born from a passion for quality and craftsmanship. We believe cannabis should be experienced, not just consumed. Every strain is hand-selected, expertly cured, and packaged with care.",
    positioning: "High-end recreational brand for discerning consumers who value quality over quantity",
  },
  colors: [
    { name: "Deep Sapphire", hex: "#1E3A8A", usage: "Primary brand color, logo, headers" },
    { name: "Ice Blue", hex: "#DBEAFE", usage: "Backgrounds, subtle accents" },
    { name: "Platinum", hex: "#E5E7EB", usage: "Text, secondary elements" },
    { name: "Midnight", hex: "#0F172A", usage: "Text, dark mode backgrounds" },
  ],
  typography: {
    headline_style: "Bold, modern sans-serif with strong presence (like Montserrat Bold or Poppins SemiBold)",
    body_style: "Clean, readable sans-serif (like Inter or Open Sans)",
    usage_notes: "Use headline font for brand name and section titles. Body font for descriptions and product info.",
  },
  logo_directions: {
    summary: "Geometric diamond icon with cannabis leaf integration, sophisticated and premium feel",
    motifs: ["Diamond shapes", "Cannabis leaves", "Crystalline patterns"],
    treatment_notes: "Use clean lines, avoid overly complex details. Should work in single color",
    ai_prompt:
      "Luxury cannabis brand logo, geometric diamond icon with subtle cannabis leaf, deep sapphire blue and platinum color scheme, minimalist modern design, premium feel, vector style --ar 1:1",
  },
  packaging_concepts: {
    flower_jars: {
      description: "Glass jars with frosted finish and embossed diamond pattern",
      finishes: "Matte frost glass, metallic embossing, magnetic closure",
      ai_prompt:
        "Premium cannabis glass jar packaging, frosted glass with geometric diamond pattern, deep blue and silver accents, luxury feel, product photography style --ar 2:3",
    },
    pre_rolls: {
      description: "Sleek metal tubes with diamond etching and premium feel",
      finishes: "Brushed aluminum, laser etching, cushioned interior",
      ai_prompt:
        "Luxury pre-roll tube packaging, brushed metal with diamond etching, sapphire blue cap, minimalist premium design, product photography --ar 2:3",
    },
  },
  copy_voice: {
    voice_description:
      "Confident, refined, and knowledgeable. Speaks to cannabis appreciation without pretension. Balances sophistication with approachability.",
    taglines: [
      "Clarity. Purity. Excellence.",
      "Crafted for Connoisseurs",
      "Where Quality Meets Craft",
      "Elevate Your Experience",
    ],
    about_paragraph:
      "Blue Diamonds represents a commitment to excellence in every aspect of the cannabis experience. From cultivation to curation, we ensure that only the finest products bear our name. Our mission is simple: deliver unparalleled quality to those who know the difference.",
    strain_description_template:
      "[Strain Name] delivers [primary effects] with notes of [terpene profile]. Cultivated with precision and cured to perfection, this [indica/sativa/hybrid] offers [key characteristics]. Perfect for [use case]. THC: [%] | CBD: [%]",
  },
  prompts: {
    logo_prompt:
      "Luxury cannabis brand logo, geometric diamond icon with subtle cannabis leaf, deep sapphire blue and platinum color scheme, minimalist modern design, premium feel, vector style --ar 1:1",
    packaging_prompts: {
      flower_jars:
        "Premium cannabis glass jar packaging, frosted glass with geometric diamond pattern, deep blue and silver accents, luxury feel, product photography style --ar 2:3",
      pre_rolls:
        "Luxury pre-roll tube packaging, brushed metal with diamond etching, sapphire blue cap, minimalist premium design, product photography --ar 2:3",
    },
  },
  createdAt: "2024-01-15T10:30:00Z",
}

export async function GET(_req: NextRequest, { params }: Params) {
  try {
    const { id } = await params

if (id === "demo") {
      const fileName = "cannabrand-kit-demo.json"
      const res = NextResponse.json(DEMO_KIT_DATA, { status: 200 })
      res.headers.set("Content-Disposition", `attachment; filename="${fileName}"`)
      return res
    }

const kit = await getBrandKitById(id)

if (!kit) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

try {
      await trackKitDownload(Number.parseInt(id), "json")
    } catch (trackError) {
      console.warn("[v0] Failed to track JSON download:", trackError)
    }

// Shape a clean JSON payload
    const payload = {
      id: kit.id,
      brandId: kit.brand_id,
      snapshot: kit.snapshot,
      colors: kit.colors,
      typography: kit.typography,
      logo_directions: kit.logo_directions,
      packaging_concepts: kit.packaging_concepts,
      copy_voice: kit.copy_voice,
      prompts: kit.prompts,
      createdAt: kit.created_at,
    }

const fileName = `cannabrand-kit-${kit.id}.json`

const res = NextResponse.json(payload, { status: 200 })
    res.headers.set("Content-Disposition", `attachment; filename="${fileName}"`)
    return res
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/export:", error)
    return NextResponse.json(
      {
        error: "Internal server error",
        message: error?.message ?? "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/regenerate/colors/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandAndKitByKitId, updateBrandKitColors, trackKitRegeneration } from "@/lib/db"
import { regenerateColorsForKit } from "@/lib/ai"

export const maxDuration = 60

type Params = {
  params: Promise<{
    id: string
  }>
}

export async function POST(_req: NextRequest, props: Params) {
  const params = await props.params
  try {
    const record = await getBrandAndKitByKitId(params.id)

if (!record) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

const snapshot = record.snapshot || {}

const brand = {
      brand_name: record.brand_name,
      tagline: snapshot.tagline || "",
      segment: snapshot.segment || "",
      target_audience: Array.isArray(snapshot.target_audience)
        ? snapshot.target_audience
        : typeof snapshot.target_audience === "string"
          ? [snapshot.target_audience]
          : [],
      personality: snapshot.personality || {},
      visual_style: snapshot.visual_style || "",
      product_focus: Array.isArray(snapshot.product_focus)
        ? snapshot.product_focus
        : typeof snapshot.product_focus === "string"
          ? [snapshot.product_focus]
          : [],
      packaging_preference: snapshot.packaging_preference || "",
      geo_context: snapshot.geo_context || "",
    }

const kit = {
      colors: record.colors,
    }

const regen = await regenerateColorsForKit(brand, kit)

await updateBrandKitColors(params.id, regen.colors)

try {
      await trackKitRegeneration(Number.parseInt(params.id), "colors")
    } catch (trackError) {
      console.warn("[v0] Failed to track regeneration:", trackError)
    }

return NextResponse.json({ colors: regen.colors }, { status: 200 })
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/regenerate/colors:", error)
    return NextResponse.json({ error: "Internal server error", message: error?.message ?? "Unknown" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/regenerate/copy/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandAndKitByKitId, updateBrandKitCopyVoice, trackKitRegeneration } from "@/lib/db"
import { regenerateCopyForKit } from "@/lib/ai"

export const maxDuration = 60

type Params = {
  params: Promise<{
    id: string
  }>
}

export async function POST(_req: NextRequest, props: Params) {
  const params = await props.params
  try {
    const record = await getBrandAndKitByKitId(params.id)

if (!record) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

const brand = {
      brand_name: record.brand_name,
      tagline: record.tagline,
      segment: record.segment,
      visual_style: record.visual_style,
      target_audience: record.target_audience || [],
    }

const kit = {
      copy_voice: record.copy_voice,
    }

const regen = await regenerateCopyForKit(brand, kit)

await updateBrandKitCopyVoice(params.id, regen.copy_voice)

try {
      await trackKitRegeneration(Number.parseInt(params.id), "copy")
    } catch (trackError) {
      console.warn("[v0] Failed to track regeneration:", trackError)
    }

return NextResponse.json({ copy_voice: regen.copy_voice }, { status: 200 })
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/regenerate/copy:", error)
    return NextResponse.json({ error: "Internal server error", message: error?.message ?? "Unknown" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/regenerate/packaging/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBrandAndKitByKitId, updateBrandKitPackagingConcepts, trackKitRegeneration } from "@/lib/db"
import { regeneratePackagingForKit } from "@/lib/ai"

export const maxDuration = 60

type Params = {
  params: Promise<{
    id: string
  }>
}

export async function POST(_req: NextRequest, props: Params) {
  const params = await props.params
  try {
    const record = await getBrandAndKitByKitId(params.id)

if (!record) {
      return NextResponse.json({ error: "Brand kit not found" }, { status: 404 })
    }

const brand = {
      brand_name: record.brand_name,
      segment: record.segment,
      product_focus: record.product_focus || [],
      visual_style: record.visual_style,
      packaging_preference: record.packaging_preference,
    }

const kit = {
      packaging_concepts: record.packaging_concepts,
    }

const regen = await regeneratePackagingForKit(brand, kit)

await updateBrandKitPackagingConcepts(params.id, regen.packaging_concepts, regen.packaging_prompts)

try {
      await trackKitRegeneration(Number.parseInt(params.id), "packaging")
    } catch (trackError) {
      console.warn("[v0] Failed to track regeneration:", trackError)
    }

return NextResponse.json(
      {
        packaging_concepts: regen.packaging_concepts,
        packaging_prompts: regen.packaging_prompts ?? {},
      },
      { status: 200 },
    )
  } catch (error: any) {
    console.error("Error in /api/kit/[id]/regenerate/packaging:", error)
    return NextResponse.json({ error: "Internal server error", message: error?.message ?? "Unknown" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/onboarding-tour.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { X, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

interface TourStep {
  target: string
  title: string
  description: string
  placement: "top" | "bottom" | "left" | "right"
}

const tourSteps: TourStep[] = [
  {
    target: "[data-tour='studio']",
    title: "Studio Dashboard",
    description: "View all your generated brand kits and access quick tools from your main dashboard.",
    placement: "bottom",
  },
  {
    target: "[data-tour='create-kit']",
    title: "Create Your First Kit",
    description: "Click here to start the wizard and generate a complete cannabis brand kit in minutes.",
    placement: "bottom",
  },
  {
    target: "[data-tour='strain-lab']",
    title: "Strain Lab",
    description: "Generate creative strain names and product names with AI-powered suggestions.",
    placement: "bottom",
  },
  {
    target: "[data-tour='analytics']",
    title: "Analytics Dashboard",
    description: "Track kit views, downloads, and regenerations to understand usage patterns.",
    placement: "bottom",
  },
  {
    target: "[data-tour='theme-toggle']",
    title: "Dark Mode",
    description: "Toggle between light and dark themes to match your preference.",
    placement: "left",
  },
]

export function OnboardingTour() {
  const [isOpen, setIsOpen] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [position, setPosition] = useState({ top: 0, left: 0 })

useEffect(() => {
    const hasSeenTour = localStorage.getItem("cannabrand-tour-completed")
    if (!hasSeenTour) {
      setTimeout(() => setIsOpen(true), 1000)
    }
  }, [])

useEffect(() => {
    if (!isOpen) return

const updatePosition = () => {
      const target = document.querySelector(tourSteps[currentStep].target)
      if (target) {
        const rect = target.getBoundingClientRect()
        const placement = tourSteps[currentStep].placement

let top = 0
        let left = 0

switch (placement) {
          case "bottom":
            top = rect.bottom + 16
            left = rect.left + rect.width / 2
            break
          case "top":
            top = rect.top - 16
            left = rect.left + rect.width / 2
            break
          case "left":
            top = rect.top + rect.height / 2
            left = rect.left - 16
            break
          case "right":
            top = rect.top + rect.height / 2
            left = rect.right + 16
            break
        }

setPosition({ top, left })
      }
    }

updatePosition()
    window.addEventListener("resize", updatePosition)
    window.addEventListener("scroll", updatePosition)

return () => {
      window.removeEventListener("resize", updatePosition)
      window.removeEventListener("scroll", updatePosition)
    }
  }, [isOpen, currentStep])

const handleNext = () => {
    if (currentStep < tourSteps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      completeTour()
    }
  }

const completeTour = () => {
    localStorage.setItem("cannabrand-tour-completed", "true")
    setIsOpen(false)
  }

if (!isOpen) return null

const step = tourSteps[currentStep]

return (
    <>
      {/* Backdrop */}
      <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm" onClick={completeTour} />

{/* Spotlight on target element */}
      <div className="fixed inset-0 z-50 pointer-events-none">
        {document.querySelector(step.target) && (
          <div
            className="absolute ring-4 ring-emerald-400/80 rounded-lg transition-all duration-300"
            style={{
              top: document.querySelector(step.target)?.getBoundingClientRect().top,
              left: document.querySelector(step.target)?.getBoundingClientRect().left,
              width: document.querySelector(step.target)?.getBoundingClientRect().width,
              height: document.querySelector(step.target)?.getBoundingClientRect().height,
            }}
          />
        )}
      </div>

{/* Tour card */}
      <div
        className="fixed z-[60] w-80 max-w-[calc(100vw-2rem)] pointer-events-auto"
        style={{
          top: `${position.top}px`,
          left: `${position.left}px`,
          transform:
            step.placement === "bottom" || step.placement === "top"
              ? "translateX(-50%)"
              : step.placement === "left"
                ? "translateX(-100%) translateY(-50%)"
                : "translateY(-50%)",
        }}
      >
        <div className="rounded-xl border border-emerald-400/60 bg-slate-900 shadow-2xl shadow-emerald-500/20 p-4">
          <div className="flex items-start justify-between gap-2 mb-3">
            <div className="flex-1">
              <h3 className="font-semibold text-slate-50 text-sm">{step.title}</h3>
              <p className="text-xs text-slate-300 mt-1">{step.description}</p>
            </div>
            <button
              onClick={completeTour}
              className="text-slate-400 hover:text-slate-200 transition-colors"
              aria-label="Close tour"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

<div className="flex items-center justify-between">
            <div className="flex gap-1">
              {tourSteps.map((_, index) => (
                <div
                  key={index}
                  className={`h-1.5 w-1.5 rounded-full transition-colors ${
                    index === currentStep ? "bg-emerald-400" : "bg-slate-600"
                  }`}
                />
              ))}
            </div>

<div className="flex gap-2">
              <button
                onClick={completeTour}
                className="text-xs text-slate-400 hover:text-slate-200 px-2 py-1 rounded transition-colors"
              >
                Skip
              </button>
              <Button onClick={handleNext} size="sm" className="text-xs gap-1">
                {currentStep < tourSteps.length - 1 ? (
                  <>
                    Next <ArrowRight className="h-3 w-3" />
                  </>
                ) : (
                  "Got it!"
                )}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/loading-skeleton.tsx" isMerged="true"
export function KitCardSkeleton() {
  return (
    <div className="rounded-xl border border-slate-800 bg-slate-950/80 p-3 animate-pulse">
      <div className="h-4 w-3/4 bg-slate-800 rounded" />
      <div className="h-3 w-1/2 bg-slate-800 rounded mt-2" />
      <div className="flex items-center justify-between mt-4">
        <div className="h-2 w-20 bg-slate-800 rounded" />
        <div className="h-2 w-16 bg-slate-800 rounded" />
      </div>
    </div>
  )
}

export function StudioSkeleton() {
  return (
    <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: 6 }).map((_, i) => (
        <KitCardSkeleton key={i} />
      ))}
    </div>
  )
}

export function KitViewerSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      {/* Header skeleton */}
      <div className="border-b border-slate-800 pb-4">
        <div className="h-8 w-64 bg-slate-800 rounded mb-2" />
        <div className="h-4 w-96 bg-slate-800 rounded" />
      </div>

{/* Tabs skeleton */}
      <div className="flex gap-2 border-b border-slate-800 pb-2">
        {Array.from({ length: 5 }).map((_, i) => (
          <div key={i} className="h-9 w-24 bg-slate-800 rounded" />
        ))}
      </div>

{/* Content skeleton */}
      <div className="space-y-4">
        <div className="h-32 bg-slate-800 rounded-xl" />
        <div className="grid gap-4 md:grid-cols-2">
          <div className="h-48 bg-slate-800 rounded-xl" />
          <div className="h-48 bg-slate-800 rounded-xl" />
        </div>
        <div className="h-64 bg-slate-800 rounded-xl" />
      </div>
    </div>
  )
}

export function AnalyticsSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      {/* Stats cards */}
      <div className="grid gap-4 md:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="h-24 bg-slate-800 rounded-xl" />
        ))}
      </div>

{/* Charts */}
      <div className="grid gap-4 md:grid-cols-2">
        <div className="h-80 bg-slate-800 rounded-xl" />
        <div className="h-80 bg-slate-800 rounded-xl" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/analytics/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { Line, LineChart, Bar, BarChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Legend } from "recharts"
import { AnalyticsSkeleton } from "@/components/loading-skeleton"
import { ErrorMessage } from "@/components/ui/error-message"
import { Eye, Download, Package, Sparkles, Database } from "lucide-react"

interface AnalyticsData {
  overview: {
    totalKits: number
    totalViews: number
    totalDownloads: number
    recentKits: number
  }
  topKits: Array<{
    kit_id: number
    brand_name: string
    segment: string | null
    view_count: number
  }>
  timeline: Array<{
    date: string
    kits_created: number
    views: number
    downloads: number
  }>
  segments: Array<{
    segment: string
    count: number
  }>
  regenerations: Array<{
    section: string
    count: number
  }>
  tablesExist?: boolean
}

export default function AnalyticsPage() {
  const [data, setData] = useState<AnalyticsData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    async function fetchAnalytics() {
      try {
        const response = await fetch("/api/analytics")
        if (!response.ok) throw new Error("Failed to fetch analytics")
        const analyticsData = await response.json()
        setData(analyticsData)
      } catch (err) {
        setError(err instanceof Error ? err.message : "An error occurred")
      } finally {
        setLoading(false)
      }
    }

fetchAnalytics()
  }, [])

if (loading) {
    return (
      <div className="min-h-screen bg-background p-4 md:p-8">
        <div className="mx-auto max-w-7xl space-y-8">
          <div>
            <div className="h-10 w-64 bg-slate-800 rounded animate-pulse mb-2" />
            <div className="h-4 w-96 bg-slate-800 rounded animate-pulse" />
          </div>
          <AnalyticsSkeleton />
        </div>
      </div>
    )
  }

if (error || !data) {
    return (
      <div className="min-h-screen bg-background p-4 md:p-8">
        <div className="mx-auto max-w-7xl">
          <ErrorMessage message={error || "Failed to load analytics"} />
        </div>
      </div>
    )
  }

if (data.tablesExist === false) {
    return (
      <div className="min-h-screen bg-background p-4 md:p-8">
        <div className="mx-auto max-w-7xl space-y-8">
          <div>
            <h1 className="text-balance text-4xl font-bold tracking-tight">Analytics Dashboard</h1>
            <p className="mt-2 text-pretty text-muted-foreground">
              Track brand kit performance, usage trends, and engagement metrics
            </p>
          </div>

<Card className="border-dashed">
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                  <Database className="h-6 w-6 text-muted-foreground" />
                </div>
                <div>
                  <CardTitle>Analytics Setup Required</CardTitle>
                  <CardDescription>Run the analytics migration to enable tracking</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-muted-foreground">
                The analytics feature requires additional database tables. To enable analytics tracking, run the
                following migration script:
              </p>
              <div className="rounded-lg bg-muted p-4">
                <code className="text-sm font-mono">scripts/006-add-analytics.sql</code>
              </div>
              <p className="text-sm text-muted-foreground">
                Once the migration is complete, this dashboard will display:
              </p>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li className="flex items-center gap-2">
                  <Eye className="h-4 w-4" />
                  Kit view tracking and trends
                </li>
                <li className="flex items-center gap-2">
                  <Download className="h-4 w-4" />
                  PDF and JSON download metrics
                </li>
                <li className="flex items-center gap-2">
                  <Sparkles className="h-4 w-4" />
                  Section regeneration statistics
                </li>
                <li className="flex items-center gap-2">
                  <Package className="h-4 w-4" />
                  Segment distribution and top kits
                </li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background p-4 md:p-8">
      <div className="mx-auto max-w-7xl space-y-8">
        {/* Header */}
        <div>
          <h1 className="text-balance text-4xl font-bold tracking-tight">Analytics Dashboard</h1>
          <p className="mt-2 text-pretty text-muted-foreground">
            Track brand kit performance, usage trends, and engagement metrics
          </p>
        </div>

{/* Overview Cards */}
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Kits</CardTitle>
              <Package className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{data.overview.totalKits}</div>
              <p className="text-xs text-muted-foreground">{data.overview.recentKits} created this week</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Views</CardTitle>
              <Eye className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{data.overview.totalViews}</div>
              <p className="text-xs text-muted-foreground">
                {data.overview.totalKits > 0
                  ? `${(data.overview.totalViews / data.overview.totalKits).toFixed(1)} avg per kit`
                  : "No kits yet"}
              </p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Downloads</CardTitle>
              <Download className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{data.overview.totalDownloads}</div>
              <p className="text-xs text-muted-foreground">PDF and JSON exports</p>
            </CardContent>
          </Card>

<Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Regenerations</CardTitle>
              <Sparkles className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{data.regenerations.reduce((sum, r) => sum + r.count, 0)}</div>
              <p className="text-xs text-muted-foreground">AI section regenerations</p>
            </CardContent>
          </Card>
        </div>

{/* Activity Timeline */}
        <Card>
          <CardHeader>
            <CardTitle>Activity Timeline</CardTitle>
            <CardDescription>Kit creation, views, and downloads over the last 30 days</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer
              config={{
                kits_created: {
                  label: "Kits Created",
                  color: "hsl(var(--chart-1))",
                },
                views: {
                  label: "Views",
                  color: "hsl(var(--chart-2))",
                },
                downloads: {
                  label: "Downloads",
                  color: "hsl(var(--chart-3))",
                },
              }}
              className="h-[300px]"
            >
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={data.timeline} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis
                    dataKey="date"
                    tickFormatter={(date) =>
                      new Date(date).toLocaleDateString(undefined, { month: "short", day: "numeric" })
                    }
                  />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Legend />
                  <Line type="monotone" dataKey="kits_created" stroke="var(--color-kits_created)" name="Kits Created" />
                  <Line type="monotone" dataKey="views" stroke="var(--color-views)" name="Views" />
                  <Line type="monotone" dataKey="downloads" stroke="var(--color-downloads)" name="Downloads" />
                </LineChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>

<div className="grid gap-4 md:grid-cols-2">
          {/* Segment Distribution */}
          <Card>
            <CardHeader>
              <CardTitle>Brand Segments</CardTitle>
              <CardDescription>Distribution of kits by brand segment</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  count: {
                    label: "Kits",
                    color: "hsl(var(--chart-1))",
                  },
                }}
                className="h-[250px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={data.segments} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="segment" />
                    <YAxis />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Bar dataKey="count" fill="var(--color-count)" name="Kits" />
                  </BarChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>

{/* Top Viewed Kits */}
          <Card>
            <CardHeader>
              <CardTitle>Most Viewed Kits</CardTitle>
              <CardDescription>Kits with the highest view counts</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {data.topKits.slice(0, 5).map((kit) => (
                  <div key={kit.kit_id} className="flex items-center justify-between">
                    <div className="flex-1">
                      <p className="font-medium text-sm">{kit.brand_name}</p>
                      <p className="text-xs text-muted-foreground">{kit.segment || "General"}</p>
                    </div>
                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
                      <Eye className="h-4 w-4" />
                      {kit.view_count}
                    </div>
                  </div>
                ))}
                {data.topKits.length === 0 && (
                  <p className="text-center text-sm text-muted-foreground py-4">No views yet</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Regeneration Stats */}
        {data.regenerations.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Most Regenerated Sections</CardTitle>
              <CardDescription>Which sections users regenerate most often</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{
                  count: {
                    label: "Regenerations",
                    color: "hsl(var(--chart-2))",
                  },
                }}
                className="h-[200px]"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={data.regenerations}
                    layout="vertical"
                    margin={{ top: 5, right: 30, left: 100, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis type="number" />
                    <YAxis type="category" dataKey="section" />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Bar dataKey="count" fill="var(--color-count)" name="Regenerations" />
                  </BarChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

try {
      const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
      })
      if (error) throw error
      router.push("/studio")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 md:p-10 bg-gradient-to-br from-slate-950 via-emerald-950 to-slate-900">
      <div className="w-full max-w-sm">
        <Card className="border-slate-800 bg-slate-900/50 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-2xl text-slate-100">Login to Cannabrand Studio</CardTitle>
            <CardDescription className="text-slate-400">
              Enter your credentials to access your brand kits
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleLogin}>
              <div className="flex flex-col gap-6">
                <div className="grid gap-2">
                  <Label htmlFor="email" className="text-slate-200">
                    Email
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="m@example.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="bg-slate-800/50 border-slate-700 text-slate-100"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password" className="text-slate-200">
                    Password
                  </Label>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="bg-slate-800/50 border-slate-700 text-slate-100"
                  />
                </div>
                {error && <p className="text-sm text-red-400">{error}</p>}
                <Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700" disabled={isLoading}>
                  {isLoading ? "Logging in..." : "Login"}
                </Button>
              </div>
              <div className="mt-4 flex flex-col gap-2 text-center text-sm">
                <Link
                  href="/reset-password"
                  className="text-slate-400 hover:text-emerald-300 underline underline-offset-4"
                >
                  Forgot your password?
                </Link>
                <div className="text-slate-400">
                  Don't have an account?{" "}
                  <Link
                    href="/auth/sign-up"
                    className="text-emerald-400 hover:text-emerald-300 underline underline-offset-4"
                  >
                    Sign up
                  </Link>
                </div>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

export default function SignUpPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault()
    const supabase = createClient()
    setIsLoading(true)
    setError(null)

if (password !== confirmPassword) {
      setError("Passwords do not match")
      setIsLoading(false)
      return
    }

if (password.length < 6) {
      setError("Password must be at least 6 characters")
      setIsLoading(false)
      return
    }

try {
      const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/studio`,
        },
      })
      if (error) throw error
      router.push("/studio")
      router.refresh()
    } catch (error: unknown) {
      setError(error instanceof Error ? error.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen w-full items-center justify-center p-6 md:p-10 bg-gradient-to-br from-slate-950 via-emerald-950 to-slate-900">
      <div className="w-full max-w-sm">
        <Card className="border-slate-800 bg-slate-900/50 backdrop-blur">
          <CardHeader>
            <CardTitle className="text-2xl text-slate-100">Create Account</CardTitle>
            <CardDescription className="text-slate-400">
              Start creating professional cannabis brand kits
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSignUp}>
              <div className="flex flex-col gap-6">
                <div className="grid gap-2">
                  <Label htmlFor="email" className="text-slate-200">
                    Email
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="m@example.com"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="bg-slate-800/50 border-slate-700 text-slate-100"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="password" className="text-slate-200">
                    Password
                  </Label>
                  <Input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="bg-slate-800/50 border-slate-700 text-slate-100"
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="confirm-password" className="text-slate-200">
                    Confirm Password
                  </Label>
                  <Input
                    id="confirm-password"
                    type="password"
                    required
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    className="bg-slate-800/50 border-slate-700 text-slate-100"
                  />
                </div>
                {error && <p className="text-sm text-red-400">{error}</p>}
                <Button type="submit" className="w-full bg-emerald-600 hover:bg-emerald-700" disabled={isLoading}>
                  {isLoading ? "Creating account..." : "Sign up"}
                </Button>
              </div>
              <div className="mt-4 text-center text-sm text-slate-400">
                Already have an account?{" "}
                <Link
                  href="/auth/login"
                  className="text-emerald-400 hover:text-emerald-300 underline underline-offset-4"
                >
                  Login
                </Link>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]sql:file="scripts/007-add-version-history.sql" isMerged="true"
-- Add version history tracking
create table if not exists kit_versions (
  id serial primary key,
  kit_id integer not null references brand_kits(id) on delete cascade,
  version_number integer not null,
  snapshot jsonb not null,
  changed_by varchar(255),
  change_description text,
  created_at timestamp with time zone default now()
);

create index if not exists idx_kit_versions_kit_id on kit_versions(kit_id);
create index if not exists idx_kit_versions_created_at on kit_versions(created_at);

-- Add email notifications table
create table if not exists email_notifications (
  id serial primary key,
  user_email varchar(255) not null,
  notification_type varchar(50) not null,
  kit_id integer references brand_kits(id) on delete cascade,
  subject varchar(500) not null,
  body text not null,
  sent_at timestamp with time zone default now(),
  read_at timestamp with time zone
);

create index if not exists idx_email_notifications_user_email on email_notifications(user_email);
create index if not exists idx_email_notifications_sent_at on email_notifications(sent_at);

-- Add notification preferences table
create table if not exists notification_preferences (
  id serial primary key,
  user_email varchar(255) unique not null,
  kit_shared boolean default true,
  kit_updated boolean default true,
  weekly_summary boolean default true,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now()
);
[V0_FILE]typescript:file="app/api/kit/[id]/versions/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getKitVersions } from "@/lib/db"

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const kitId = Number.parseInt(params.id)
    if (isNaN(kitId)) {
      return NextResponse.json({ error: "Invalid kit ID" }, { status: 400 })
    }

const versions = await getKitVersions(kitId)
    return NextResponse.json({ versions })
  } catch (error) {
    console.error("[v0] Error fetching kit versions:", error)
    return NextResponse.json({ error: "Failed to fetch versions" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/restore/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { restoreKitVersion } from "@/lib/db"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const kitId = Number.parseInt(params.id)
    if (isNaN(kitId)) {
      return NextResponse.json({ error: "Invalid kit ID" }, { status: 400 })
    }

const body = await request.json()
    const { versionId } = body

if (!versionId) {
      return NextResponse.json({ error: "Version ID required" }, { status: 400 })
    }

const success = await restoreKitVersion(kitId, versionId)

if (success) {
      return NextResponse.json({ success: true })
    } else {
      return NextResponse.json({ error: "Failed to restore version" }, { status: 500 })
    }
  } catch (error) {
    console.error("[v0] Error restoring kit version:", error)
    return NextResponse.json({ error: "Failed to restore version" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/version-history-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Clock, RotateCcw } from "lucide-react"
import { toast } from "sonner"

interface Version {
  id: number
  version_number: number
  snapshot: any
  changed_by: string | null
  change_description: string
  created_at: string
}

interface VersionHistoryModalProps {
  kitId: string
  isOpen: boolean
  onClose: () => void
  onRestore: () => void
}

export function VersionHistoryModal({ kitId, isOpen, onClose, onRestore }: VersionHistoryModalProps) {
  const [versions, setVersions] = useState<Version[]>([])
  const [loading, setLoading] = useState(false)
  const [restoring, setRestoring] = useState(false)

useEffect(() => {
    if (isOpen) {
      fetchVersions()
    }
  }, [isOpen, kitId])

async function fetchVersions() {
    setLoading(true)
    try {
      const response = await fetch(`/api/kit/${kitId}/versions`)
      if (response.ok) {
        const data = await response.json()
        setVersions(data.versions || [])
      }
    } catch (error) {
      console.error("Failed to fetch versions:", error)
      toast.error("Failed to load version history")
    } finally {
      setLoading(false)
    }
  }

async function handleRestore(versionId: number) {
    if (!confirm("Are you sure you want to restore this version? Current changes will be saved as a new version.")) {
      return
    }

setRestoring(true)
    try {
      const response = await fetch(`/api/kit/${kitId}/restore`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ versionId }),
      })

if (response.ok) {
        toast.success("Version restored successfully")
        onRestore()
        onClose()
      } else {
        toast.error("Failed to restore version")
      }
    } catch (error) {
      console.error("Failed to restore version:", error)
      toast.error("Failed to restore version")
    } finally {
      setRestoring(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Clock className="w-5 h-5" />
            Version History
          </DialogTitle>
        </DialogHeader>

{loading ? (
          <div className="py-8 text-center text-muted-foreground">Loading versions...</div>
        ) : versions.length === 0 ? (
          <div className="py-8 text-center text-muted-foreground">
            No version history available yet. Changes will be tracked automatically.
          </div>
        ) : (
          <div className="space-y-3">
            {versions.map((version) => (
              <div key={version.id} className="p-4 border rounded-lg hover:bg-accent/50 transition-colors">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="font-semibold">Version {version.version_number}</span>
                      <span className="text-xs text-muted-foreground">
                        {new Date(version.created_at).toLocaleString()}
                      </span>
                    </div>
                    <p className="text-sm text-muted-foreground mb-2">{version.change_description}</p>
                    {version.changed_by && <p className="text-xs text-muted-foreground">By: {version.changed_by}</p>}
                  </div>
                  <Button size="sm" variant="outline" onClick={() => handleRestore(version.id)} disabled={restoring}>
                    <RotateCcw className="w-4 h-4 mr-1" />
                    Restore
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="lib/email.tsx" isMerged="true"
// Email notification service
// In production, integrate with Resend, SendGrid, or similar

export async function sendKitSharedEmail(
  recipientEmail: string,
  kitName: string,
  sharedByName: string,
  kitUrl: string,
) {
  const subject = `${sharedByName} shared "${kitName}" with you`
  const body = `
    <h2>Brand Kit Shared</h2>
    <p>${sharedByName} has shared a brand kit with you:</p>
    <p><strong>${kitName}</strong></p>
    <p><a href="${kitUrl}">View Brand Kit</a></p>
    <p>Cannabrand Studio - AI-Powered Cannabis Brand Kits</p>
  `

// TODO: Integrate with email service (Resend, SendGrid, etc.)
  console.log("[v0] Email would be sent:", { recipientEmail, subject, body })

// For now, just log to database
  const { logEmailNotification } = await import("./db")
  await logEmailNotification(recipientEmail, "kit_shared", null, subject, body)
}

export async function sendKitUpdatedEmail(
  userEmail: string,
  kitName: string,
  updatedBy: string,
  changes: string,
  kitUrl: string,
) {
  const subject = `"${kitName}" has been updated`
  const body = `
    <h2>Brand Kit Updated</h2>
    <p>Your brand kit <strong>${kitName}</strong> has been updated by ${updatedBy}.</p>
    <p><strong>Changes:</strong> ${changes}</p>
    <p><a href="${kitUrl}">View Brand Kit</a></p>
    <p>Cannabrand Studio - AI-Powered Cannabis Brand Kits</p>
  `

console.log("[v0] Email would be sent:", { userEmail, subject, body })

const { logEmailNotification } = await import("./db")
  await logEmailNotification(userEmail, "kit_updated", null, subject, body)
}

export async function sendWeeklySummaryEmail(userEmail: string, stats: any) {
  const subject = "Your weekly Cannabrand Studio summary"
  const body = `
    <h2>Weekly Summary</h2>
    <p>Here's what happened this week:</p>
    <ul>
      <li>Kits created: ${stats.kitsCreated}</li>
      <li>Kits viewed: ${stats.kitsViewed}</li>
      <li>Downloads: ${stats.downloads}</li>
    </ul>
    <p>Keep creating amazing brand kits!</p>
    <p>Cannabrand Studio - AI-Powered Cannabis Brand Kits</p>
  `

console.log("[v0] Email would be sent:", { userEmail, subject, body })

const { logEmailNotification } = await import("./db")
  await logEmailNotification(userEmail, "weekly_summary", null, subject, body)
}
[V0_FILE]typescriptreact:file="app/kit/[id]/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { PromptToolbar } from "@/components/brand-kit/prompt-toolbar"
import { RegenerateControls } from "@/components/brand-kit/regenerate-controls"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import { KitViewerSkeleton } from "@/components/loading-skeleton"
import { ErrorMessage } from "@/components/ui/error-message"
import { EditableBrandName } from "@/components/brand-kit/editable-brand-name"
import { MoodboardSection } from "@/components/brand-kit/moodboard-section"
import { KitImageLab } from "@/components/brand-kit/kit-image-lab"
import { VersionHistoryModal } from "@/components/version-history-modal"
import { useParams } from "next/navigation"

// Declare the prettyKey function
function prettyKey(key: string) {
  return key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())
}

type KitPageProps = {
  params: {
    id: string
  }
}

function NavLink({ href, label }: { href: string; label: string }) {
  return (
    <a
      href={href}
      className="block rounded-lg px-2 py-1 text-slate-300 hover:bg-slate-800 hover:text-emerald-300 transition-colors"
    >
      {label}
    </a>
  )
}

export default function KitPage() {
  const params = useParams()
  const id = params.id as string

const [kit, setKit] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showVersionHistory, setShowVersionHistory] = useState(false)

const isDemo = id === "demo"

useEffect(() => {
    if (isDemo) {
      setLoading(false)
      return
    }

async function fetchKit() {
      try {
        console.log("[v0] Fetching kit from API:", id)
        const response = await fetch(`/api/kit/${id}`)

if (!response.ok) {
          if (response.status === 404) {
            setError("Kit not found")
          } else {
            setError("Failed to load kit")
          }
          setLoading(false)
          return
        }

const data = await response.json()
        console.log("[v0] Kit loaded successfully:", data.brand_name)
        setKit(data)
        setLoading(false)
      } catch (err) {
        console.error("[v0] Error fetching kit:", err)
        setError("Failed to load kit")
        setLoading(false)
      }
    }

fetchKit()
  }, [id, isDemo])

const handleNameUpdate = (newName: string) => {
    setKit((prev: any) => ({
      ...prev,
      brand_name: newName, // Directly update brand_name if it exists at the top level
      snapshot: { ...prev.snapshot, brand_name: newName }, // Also update in snapshot for backward compatibility
    }))
  }

const handleColorsUpdate = (newColors: any) => {
    setKit((prev: any) => ({
      ...prev,
      colors: newColors,
    }))
  }

const handleVersionRestore = () => {
    // Refresh the kit data after version restore
    window.location.reload()
  }

if (isDemo) {
    return renderDemoKit(isDemo)
  }

if (loading) {
    return (
      <div className="min-h-screen bg-slate-950">
        <div className="container relative mx-auto max-w-[1400px] px-4 py-8">
          <KitViewerSkeleton />
        </div>
      </div>
    )
  }

if (error || !kit) {
    return (
      <div className="min-h-screen bg-slate-950">
        <div className="container relative mx-auto max-w-[1400px] px-4 py-8">
          <ErrorMessage message={error || "Kit not found"} onRetry={() => window.location.reload()} />
        </div>
      </div>
    )
  }

const {
    snapshot,
    colors,
    typography,
    logo_directions,
    packaging_concepts,
    copy_voice,
    prompts,
    moodboard,
    public_slug,
    created_at,
    photography_direction,
  } = kit as any

const primaryHex = (Array.isArray(colors) && colors[0]?.hex) || "#22c55e"
  const accentForCss = `${primaryHex}33` // 20% opacity

const createdDate = created_at
    ? new Date(created_at).toLocaleString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
        hour: "numeric",
        minute: "2-digit",
      })
    : null

return (
    <div
      className="min-h-screen bg-slate-950 text-slate-50"
      style={{
        backgroundImage: `radial-gradient(circle at top, ${accentForCss} 0, transparent 55%), radial-gradient(circle at bottom, #020617 0, #020617 55%)`,
      }}
    >
      <div className="container relative mx-auto max-w-[1400px] px-4 py-8">
        <div className="mb-6">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Home
          </Link>
        </div>

<div className="space-y-10">
          {/* Header */}
          <header className="mb-8 flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h1 className="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-100">
                <EditableBrandName
                  kitId={id}
                  initialName={kit.brand_name || kit?.snapshot?.brand_name || "Cannabis Brand Kit"}
                  isDemo={isDemo}
                  onUpdate={(newName) =>
                    setKit((prev) =>
                      prev
                        ? {
                            ...prev,
                            brand_name: newName,
                            snapshot: { ...prev.snapshot, brand_name: newName },
                          }
                        : prev,
                    )
                  }
                />
              </h1>
              <p className="mt-1 text-xs sm:text-sm text-slate-300">
                Generated by Cannabrand Studio. Use this as the foundation for your logo, packaging, and marketing.
              </p>
              <div className="mt-2 inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-2 sm:px-3 py-1 text-[10px] sm:text-xs text-primary-foreground">
                <span className="h-1.5 w-1.5 rounded-full bg-primary"></span>
                Kit ID: <span className="font-mono font-semibold">{id}</span>
              </div>
            </div>
            <div className="text-left sm:text-right text-xs text-slate-300">
              <div className="font-semibold text-slate-100">
                Created: <span className="text-slate-300">{createdDate}</span>
              </div>
            </div>
          </header>

{/* Prompt toolbar */}
          <div className="mb-6 space-y-3">
            <PromptToolbar
              kitId={id}
              pdfEnabled={!isDemo}
              logoPrompt={prompts?.logo_prompt || logo_directions?.ai_prompt}
              packagingPrompts={prompts?.packaging_prompts}
              taglines={copy_voice?.taglines}
              aboutParagraph={copy_voice?.about_paragraph}
              strainTemplate={copy_voice?.strain_description_template}
            />

{id !== "demo" && <RegenerateControls kitId={id} />}
          </div>

<div className="mt-6 grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
            {/* Left sticky nav - hidden on mobile, shown as sticky on desktop */}
            <aside className="hidden lg:block lg:sticky lg:top-6 self-start rounded-2xl border border-slate-800 bg-slate-950/80 p-3 text-[11px]">
              <div className="mb-3 text-[10px] font-semibold uppercase tracking-wide text-slate-500">Sections</div>
              <nav className="space-y-1">
                <NavLink href="#overview" label="Overview" />
                <NavLink href="#colors" label="Colors" />
                <NavLink href="#typography" label="Typography" />
                <NavLink href="#logo" label="Logo directions" />
                <NavLink href="#packaging" label="Packaging concepts" />
                <NavLink href="#copy" label="Voice & copy" />
                <NavLink href="#moodboard" label="Moodboard" />
                <NavLink href="#image-lab" label="Image Lab" />
                <NavLink href="#social-kit" label="Social Media Kit" />
                <NavLink href="#photo-direction" label="Photography direction" />
              </nav>
            </aside>

{/* Right: actual sections with IDs for anchor scrolling */}
            <main className="space-y-8">
              {/* Brand Snapshot */}
              <section
                id="overview"
                className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-4 sm:p-5 shadow-lg"
              >
                <h2 className="text-base sm:text-lg font-semibold text-slate-100">Brand Snapshot</h2>
                <div className="mt-3 grid gap-4 sm:gap-6 sm:grid-cols-2">
                  <div>
                    <div className="text-xs font-medium uppercase tracking-wide text-slate-400">One-liner</div>
                    <p className="mt-1 text-sm text-slate-200">{snapshot?.one_liner || "—"}</p>

<div className="mt-4 text-xs font-medium uppercase tracking-wide text-slate-400">Brand Story</div>
                    <p className="mt-1 whitespace-pre-line text-sm text-slate-200">{snapshot?.brand_story || "—"}</p>
                  </div>

<div>
                    <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Positioning</div>
                    <p className="mt-1 text-sm text-slate-200">{snapshot?.positioning || "—"}</p>

<div className="mt-4 rounded-xl border border-emerald-500/40 bg-emerald-950/30 px-4 py-3 text-xs text-emerald-100">
                      <p className="font-semibold">How to use this:</p>
                      <p className="mt-1 text-[11px] text-emerald-200/80">
                        This snapshot becomes your "About" section on your website, your intro paragraph on pitch decks,
                        and the foundation for sales one-sheets.
                      </p>
                    </div>
                  </div>
                </div>
              </section>

{/* Colors & Typography */}
              <section id="colors" className="scroll-mt-20 grid gap-6 md:grid-cols-3">
                {/* Colors */}
                <div className="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/50 p-5">
                  <h2 className="text-lg font-semibold text-slate-100">Color System</h2>
                  <p className="mt-1 text-xs text-slate-400">
                    Use these colors consistently across packaging, website, and marketing. Keep primary/background
                    stable; use accents sparingly.
                  </p>

<div className="mt-4 grid gap-3 md:grid-cols-2">
                    {(colors || []).map((color: any) => {
                      const hex: string = color.hex || "#000000"
                      const safeHex = hex.startsWith("#") ? hex : `#${hex}`
                      return (
                        <div
                          key={`${color.name}-${safeHex}`}
                          className="overflow-hidden rounded-xl border border-border bg-background"
                        >
                          <div className="h-16 w-full border-b border-border" style={{ backgroundColor: safeHex }} />
                          <div className="p-3 text-xs">
                            <div className="font-medium text-foreground">{color.name || "Color"}</div>
                            <div className="mt-1 font-mono text-[11px] text-muted-foreground">{safeHex}</div>
                            <div className="mt-1 text-[11px] text-muted-foreground">
                              Usage: <span className="text-foreground">{color.usage || "—"}</span>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                    {!colors?.length && (
                      <p className="col-span-full text-xs text-muted-foreground">No colors found in this kit.</p>
                    )}
                  </div>
                </div>

{/* Typography */}
                <div className="rounded-2xl border border-slate-800 bg-slate-900/50 p-5">
                  <h2 className="text-lg font-semibold text-slate-100">Typography</h2>
                  <p className="mt-1 text-xs text-slate-400">
                    Keep font choices minimal (1–2 fonts). Headers can be bold/expressive; body text must be legible.
                  </p>

<div className="mt-4 space-y-4 text-xs">
                    <div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Heading Style</div>
                      <p className="mt-1 text-sm text-card-foreground">{typography?.headline_style || "—"}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Body Style</div>
                      <p className="mt-1 text-sm text-card-foreground">{typography?.body_style || "—"}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Usage Notes</div>
                      <p className="mt-1 text-[11px] text-muted-foreground whitespace-pre-line">
                        {typography?.usage_notes || "—"}
                      </p>
                    </div>
                  </div>
                </div>
              </section>

{/* Logo Directions */}
              <section id="logo" className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-5">
                <h2 className="text-lg font-semibold text-slate-100">Logo Directions & Motifs</h2>
                <p className="mt-1 text-xs text-slate-400">
                  These are conceptual starting points for your logo design. Incorporate motifs and emotional cues into
                  your final logo. Pair with the AI prompt below to generate visual mockups.
                </p>

<div className="mt-4 grid gap-6 md:grid-cols-2">
                  <div className="space-y-4 text-xs">
                    <div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Summary</div>
                      <p className="mt-1 text-sm text-card-foreground">{logo_directions?.summary || "—"}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Motifs & Symbols</div>
                      <p className="mt-1 text-[11px] text-muted-foreground">
                        {(logo_directions?.motifs || []).length ? (logo_directions.motifs as string[]).join(", ") : "—"}
                      </p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Treatment Notes</div>
                      <p className="mt-1 text-[11px] text-muted-foreground whitespace-pre-line">
                        {logo_directions?.treatment_notes || "—"}
                      </p>
                    </div>
                  </div>

<div className="text-xs">
                    <div className="text-[11px] uppercase tracking-wide text-primary">Logo AI Prompt</div>
                    <div className="mt-2 rounded-xl border border-primary/40 bg-slate-800/50 p-3 font-mono text-[11px] leading-relaxed text-slate-100">
                      {logo_directions?.ai_prompt || prompts?.logo_prompt || "—"}
                    </div>
                    <p className="mt-2 text-[11px] text-slate-400">
                      Paste this into your AI image generator. Adjust seed / style strength if your tool supports it.
                    </p>
                  </div>
                </div>
              </section>

{/* Packaging Concepts */}
              <section id="packaging" className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-5">
                <h2 className="text-lg font-semibold text-slate-100">Packaging Concepts & Prompts</h2>
                <p className="mt-1 text-xs text-slate-400">
                  Use these prompts in Midjourney, Stable Diffusion, or DALL·E to generate packaging mockups. Refine the
                  output with your brand colors, logo, and product copy.
                </p>

<div className="mt-4 grid gap-4 md:grid-cols-2">
                  {packaging_concepts &&
                  typeof packaging_concepts === "object" &&
                  Object.keys(packaging_concepts).length ? (
                    Object.entries(packaging_concepts).map(([key, concept]: [string, any]) => (
                      <div
                        key={key}
                        className="flex flex-col gap-2 rounded-xl border border-slate-700 bg-slate-800/30 p-3 text-xs"
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-100">
                            {prettyKey(key)}
                          </span>
                          <span className="rounded-full border border-slate-700 bg-slate-800/50 px-2 py-0.5 text-[10px] text-slate-400">
                            Concept
                          </span>
                        </div>

<div>
                          <div className="text-[11px] uppercase tracking-wide text-slate-500">Description</div>
                          <p className="mt-1 text-[11px] text-slate-200">{concept?.description || "—"}</p>
                        </div>

<div>
                          <div className="text-[11px] uppercase tracking-wide text-slate-500">Finishes & Materials</div>
                          <p className="mt-1 text-[11px] text-slate-300">{concept?.finishes || "—"}</p>
                        </div>

<div>
                          <div className="text-[11px] uppercase tracking-wide text-primary">Packaging AI Prompt</div>
                          <div className="mt-1 rounded-lg border border-primary/40 bg-slate-800/50 p-2 font-mono text-[11px] leading-relaxed text-slate-100">
                            {concept?.ai_prompt || prompts?.packaging_prompts?.[key] || "—"}
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <p className="text-xs text-slate-400">No packaging concepts found in this kit.</p>
                  )}
                </div>
              </section>

{/* Voice & Tone */}
              <section id="copy" className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-5">
                <h2 className="text-lg font-semibold text-slate-100">Voice & Tone</h2>
                <p className="mt-1 text-xs text-slate-400">
                  This copy becomes your website "About" page, strain descriptions, and brand story across all channels.
                </p>

<p className="mt-3 text-sm text-card-foreground">{copy_voice?.voice_description || "—"}</p>
              </section>

{/* Moodboard */}
              <section id="moodboard" className="scroll-mt-20">
                <MoodboardSection kitId={String(kit.id)} initialMoodboard={kit.moodboard} />
              </section>

{/* Image Lab */}
              <section id="image-lab" className="scroll-mt-20">
                <KitImageLab
                  kitId={String(kit.id)}
                  logoPrompt={kit.prompts?.logo_prompt}
                  packagingPrompts={kit.prompts.packaging_prompts}
                />
              </section>

{/* Social Kit */}
              <section id="social-kit" className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-8">
                <h2 className="mb-4 text-2xl font-bold text-slate-100">Social Media Kit</h2>
                <p className="mb-6 text-sm text-slate-300">
                  Platform-specific content templates, bio suggestions, and hashtag strategies for your brand.
                </p>

{/* Platform Templates */}
                <div className="mb-8 space-y-6">
                  <div>
                    <h3 className="mb-3 text-lg font-semibold text-emerald-400">Instagram</h3>
                    <div className="space-y-4">
                      <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Bio Template</h4>
                        <div className="rounded-lg bg-slate-800/50 p-3 font-mono text-xs text-slate-100">
                          {kit.tagline || (kit?.snapshot?.brand_name && `${kit.snapshot.brand_name}`) || "Brand"} ✨
                          <br />
                          {kit.snapshot?.positioning?.split(" ")[0] || "Premium"} | 21+ Only
                          <br />📍 {kit.location || "Your Location"}
                          <br />👇 Shop our collection
                        </div>
                      </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Post Caption Templates</h4>
                        <div className="space-y-2">
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Product Launch:</p>
                            <p className="mt-1">
                              Introducing [Product Name].{" "}
                              {kit.copy_voice?.taglines?.[0] || "Premium quality for discerning consumers."}
                              Available now. Link in bio. #Cannabis #21Plus #
                              {kit.snapshot?.brand_name?.replace(/\s+/g, "")}
                            </p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Educational:</p>
                            <p className="mt-1">
                              Did you know? [Share interesting fact about your products or cannabis culture] Follow for
                              more insights. #CannabisEducation #21Plus
                            </p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Behind the Scenes:</p>
                            <p className="mt-1">
                              A peek into how we craft {kit.snapshot?.brand_name || "Brand"} products. Quality in every
                              detail. #BehindTheScenes #{kit.snapshot?.positioning?.split(" ")[0] || "Premium"}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

<div>
                    <h3 className="mb-3 text-lg font-semibold text-emerald-400">Twitter / X</h3>
                    <div className="space-y-4">
                      <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Bio Template</h4>
                        <div className="rounded-lg bg-slate-800/50 p-3 font-mono text-xs text-slate-100">
                          {kit.copy_voice?.taglines?.[0] || kit.snapshot?.one_liner || "Brand"} |{" "}
                          {kit.snapshot?.positioning?.split(" ")[0] || "Premium"} | 21+ | {kit.location || "Location"}
                        </div>
                      </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Tweet Templates</h4>
                        <div className="space-y-2">
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p>
                              New drop alert: [Product Name] is here.{" "}
                              {kit.copy_voice?.taglines?.[1] || "Experience the difference."}
                            </p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p>
                              What makes great {kit.snapshot?.positioning?.split(" ")[0] || "Premium"} {kit.segment}?
                              [Your unique perspective in 1-2 sentences]
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

<div>
                    <h3 className="mb-3 text-lg font-semibold text-emerald-400">Facebook</h3>
                    <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                      <h4 className="mb-2 text-sm font-semibold text-slate-200">About Section</h4>
                      <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                        {kit.copy_voice?.about_paragraph ||
                          `${kit.snapshot?.brand_name || "Brand"} offers premium ${kit.snapshot?.positioning?.split(" ")[0] || "Premium"} ${kit.segment} for the discerning cannabis consumer. We're committed to quality, consistency, and innovation. Follow us for updates, product launches, and cannabis culture insights. 21+ only.`}
                      </div>
                    </div>
                  </div>
                </div>

{/* Hashtag Strategy */}
                <div className="mb-8">
                  <h3 className="mb-3 text-lg font-semibold text-slate-100">Hashtag Strategy</h3>
                  <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                    <div className="mb-3">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Brand Hashtags (Use Always)</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs text-emerald-300">
                          #{kit.snapshot?.brand_name?.replace(/\s+/g, "")}
                        </span>
                        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs text-emerald-300">
                          #{kit.snapshot?.brand_name?.replace(/\s+/g, "")}Cannabis
                        </span>
                      </div>
                    </div>

<div className="mb-3">
                      <h4 className="mb-2 text-sm font-semibold text-slate-200">Category Hashtags</h4>
                      <div className="flex flex-wrap gap-2">
                        {[
                          "Cannabis",
                          "21Plus",
                          kit.snapshot?.positioning?.split(" ")[0] || "Premium",
                          "CannabisLife",
                          "CannabisCommunity",
                          "LegalCannabis",
                        ].map((tag) => (
                          <span key={tag} className="rounded-full bg-slate-800 px-3 py-1 text-xs text-slate-300">
                            #{tag?.replace(/\s+/g, "")}
                          </span>
                        ))}
                      </div>
                    </div>

<div>
                      <h4 className="mb-2 text-sm font-semibold text-slate-200">
                        Niche Hashtags (Rotate Based on Content)
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {[
                          "CannabisEducation",
                          "CannabisCulture",
                          "WeedStagram",
                          "CannaDaily",
                          "CannabisPhotography",
                          "StonerLife",
                        ].map((tag) => (
                          <span key={tag} className="rounded-full bg-slate-800 px-3 py-1 text-xs text-slate-300">
                            #{tag}
                          </span>
                        ))}
                      </div>
                    </div>

<p className="mt-4 text-xs text-slate-400">
                      Tip: Use 5-10 hashtags per Instagram post, 2-3 for Twitter, and 1-2 for Facebook. Mix brand,
                      category, and niche tags for best reach.
                    </p>
                  </div>
                </div>

{/* Content Calendar Ideas */}
                <div>
                  <h3 className="mb-3 text-lg font-semibold text-slate-100">Content Calendar Ideas</h3>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Monday - Motivation</h4>
                      <p className="text-xs text-slate-300">
                        Share inspirational quotes, team behind-the-scenes, or product craftsmanship stories.
                      </p>
                    </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Wednesday - Product Spotlight</h4>
                      <p className="text-xs text-slate-300">
                        Feature a specific product with high-quality photos and detailed descriptions.
                      </p>
                    </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Friday - Community</h4>
                      <p className="text-xs text-slate-300">
                        Engage with your audience through polls, questions, or user-generated content features.
                      </p>
                    </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Sunday - Education</h4>
                      <p className="text-xs text-slate-300">
                        Share cannabis knowledge, terpene profiles, or responsible consumption tips.
                      </p>
                    </div>
                  </div>
                </div>
              </section>

{/* Photography Direction */}
              <section
                id="photo-direction"
                className="scroll-mt-20 rounded-2xl border border-slate-800 bg-slate-900/50 p-8"
              >
                <h2 className="mb-4 text-2xl font-semibold text-slate-100">Photography Direction</h2>
                <p className="mb-6 text-sm text-slate-300">
                  Photography guidelines and shot lists for creating cohesive visual content across your brand.
                </p>

{photography_direction && Array.isArray(photography_direction) && photography_direction.length > 0 ? (
                  <div className="space-y-6">
                    {photography_direction.map((category: any, idx: number) => (
                      <div key={idx} className="rounded-xl border border-slate-700/50 bg-slate-800/30 p-6">
                        <h3 className="mb-2 text-lg font-semibold text-slate-100">{category.category}</h3>
                        <p className="mb-4 text-sm text-slate-200">{category.description}</p>

{/* Shot List */}
                        <div className="mb-4">
                          <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">
                            Shot List
                          </h4>
                          <ul className="space-y-1">
                            {category.shot_list?.map((shot: string, shotIdx: number) => (
                              <li key={shotIdx} className="text-sm text-slate-300">
                                • {shot}
                              </li>
                            ))}
                          </ul>
                        </div>

{/* Lighting */}
                        <div className="mb-4">
                          <h4 className="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-400">
                            Lighting
                          </h4>
                          <p className="text-sm text-slate-300">{category.lighting}</p>
                        </div>

{/* Styling Notes */}
                        <div className="mb-4">
                          <h4 className="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-400">
                            Styling Notes
                          </h4>
                          <p className="text-sm text-slate-300">{category.styling_notes}</p>
                        </div>

{/* AI Prompt */}
                        <div>
                          <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-primary">
                            AI Photography Prompt
                          </h4>
                          <div className="rounded-lg bg-slate-800/50 p-4">
                            <p className="text-sm leading-relaxed text-slate-100">{category.ai_prompt}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="rounded-lg border border-slate-700/50 bg-slate-800/30 p-6">
                    <p className="mb-4 text-sm text-slate-300">
                      Photography direction has not been generated yet for this kit.
                    </p>
                    <button
                      onClick={async () => {
                        try {
                          const response = await fetch(`/api/brands/${kit.brand_id}/generate-photography`, {
                            method: "POST",
                          })
                          if (response.ok) {
                            window.location.reload()
                          }
                        } catch (error) {
                          console.error("Failed to generate photography:", error)
                        }
                      }}
                      className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
                    >
                      Generate Photography Direction
                    </button>
                  </div>
                )}
              </section>
            </main>
          </div>
        </div>
      </div>
      <VersionHistoryModal
        kitId={id}
        isOpen={showVersionHistory}
        onClose={() => setShowVersionHistory(false)}
        onRestore={handleVersionRestore}
      />
    </div>
  )
}

function renderDemoKit(isDemo: boolean) {
  const demoKit = {
    id: "demo",
    brand_name: "Blue Diamonds",
    snapshot: {
      one_liner: "Premium craft cannabis for the modern connoisseur",
      brand_story:
        "Blue Diamonds was born from a passion for quality and craftsmanship. We believe cannabis should be experienced, not just consumed. Every strain is hand-selected, expertly cured, and packaged with care.",
      positioning: "High-end recreational brand for discerning consumers who value quality over quantity",
    },
    colors: [
      { name: "Deep Sapphire", hex: "#1E3A8A", usage: "Primary brand color, logo, headers" },
      { name: "Ice Blue", hex: "#DBEAFE", usage: "Backgrounds, subtle accents" },
      { name: "Platinum", hex: "#E5E7EB", usage: "Text, secondary elements" },
      { name: "Midnight", hex: "#020617", usage: "Text, dark mode backgrounds" },
    ],
    typography: {
      headline_style: "Bold, modern sans-serif with strong presence (like Montserrat Bold or Poppins SemiBold)",
      body_style: "Clean, readable sans-serif (like Inter or Open Sans)",
      usage_notes: "Use headline font for brand name and section titles. Body font for descriptions and product info.",
    },
    logo_directions: {
      summary: "Geometric diamond icon with cannabis leaf integration, sophisticated and premium feel",
      motifs: ["Diamond shapes", "Cannabis leaves", "Crystalline patterns"],
      treatment_notes: "Use clean lines, avoid overly complex details. Should work in single color",
      ai_prompt:
        "Luxury cannabis brand logo, geometric diamond icon with subtle cannabis leaf, deep sapphire blue and platinum color scheme, minimalist modern design, premium feel, vector style --ar 1:1",
    },
    packaging_concepts: {
      flower_jars: {
        description: "Glass jars with frosted finish and embossed diamond pattern",
        finishes: "Matte frost glass, metallic embossing, magnetic closure",
        ai_prompt:
          "Premium cannabis glass jar packaging, frosted glass with geometric diamond pattern, deep blue and silver accents, luxury feel, product photography style --ar 2:3",
      },
      pre_rolls: {
        description: "Sleek metal tubes with diamond etching and premium feel",
        finishes: "Brushed aluminum, laser etching, cushioned interior",
        ai_prompt:
          "Luxury pre-roll tube packaging, brushed metal with diamond etching, sapphire blue cap, minimalist premium design, product photography --ar 2:3",
      },
    },
    copy_voice: {
      voice_description:
        "Confident, refined, and knowledgeable. Speaks to cannabis appreciation without pretension. Balances sophistication with approachability.",
      taglines: [
        "Clarity. Purity. Excellence.",
        "Crafted for Connoisseurs",
        "Where Quality Meets Craft",
        "Elevate Your Experience",
      ],
      about_paragraph:
        "Blue Diamonds represents a commitment to excellence in every aspect of the cannabis experience. From cultivation to curation, we ensure that only the finest products bear our name. Our mission is simple: deliver unparalleled quality to those who know the difference.",
      strain_description_template:
        "[Strain Name] delivers [primary effects] with notes of [terpene profile]. Cultivated with precision and cured to perfection, this [indica/sativa/hybrid] offers [key characteristics]. Perfect for [use case]. THC: [%] | CBD: [%]",
    },
    prompts: {
      logo_prompt:
        "Luxury cannabis brand logo, geometric diamond icon with subtle cannabis leaf, deep sapphire blue and platinum color scheme, minimalist modern design, premium feel, vector style --ar 1:1",
      packaging_prompts: {
        flower_jars:
          "Premium cannabis glass jar packaging, frosted glass with geometric diamond pattern, deep blue and silver accents, luxury feel, product photography style --ar 2:3",
        pre_rolls:
          "Luxury pre-roll tube packaging, brushed metal with diamond etching, sapphire blue cap, minimalist premium design, product photography --ar 2:3",
      },
    },
    moodboard: null,
    created_at: "2024-01-15T10:30:00Z",
    photography_direction: [
      {
        category: "Product Shots",
        description: "High-quality images of the cannabis products.",
        shot_list: ["Close-up of flower buds", "Packaging shots", "Strain-specific images"],
        lighting: "Natural daylight with soft shadows.",
        styling_notes: "Focus on clean, professional styling.",
        ai_prompt:
          "High-quality product images of cannabis, natural daylight, clean styling, detailed textures --ar 4:3",
      },
      {
        category: "Environmental Shots",
        description: "Images of the cannabis products in various environments.",
        shot_list: ["In a kitchen setting", "In a living room", "In a garden"],
        lighting: "Soft, ambient lighting.",
        styling_notes: "Use natural elements to enhance the product.",
        ai_prompt: "Cannabis product images in different environments, soft lighting, natural elements, --ar 4:3",
      },
    ],
    tagline: "Clarity. Purity. Excellence.",
    location: "Your Location",
    segment: "Premium",
  }

const createdDate = new Date(demoKit.created_at).toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "2-digit",
  })

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="container relative mx-auto max-w-[1400px] px-4 py-8">
        <div className="mb-6">
          <Link
            href="/"
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Back to Home
          </Link>
        </div>

<div className="space-y-10">
          {/* Header */}
          <header className="mb-8 flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h1 className="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-100">
                <EditableBrandName
                  kitId="demo"
                  initialName={demoKit.brand_name}
                  isDemo={isDemo}
                  onUpdate={() => {}} // No-op for demo
                />
              </h1>
              <p className="mt-1 text-xs sm:text-sm text-slate-300">
                Generated by Cannabrand Studio. Use this as the foundation for your logo, packaging, and marketing.
              </p>
              <div className="mt-2 inline-flex items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-2 sm:px-3 py-1 text-[10px] sm:text-xs text-primary-foreground">
                <span className="h-1.5 w-1.5 rounded-full bg-primary"></span>
                Kit ID: <span className="font-mono font-semibold">demo</span>
              </div>
            </div>
            <div className="text-left sm:text-right text-xs text-slate-300">
              <div className="font-semibold text-slate-100">
                Created: <span className="text-slate-300">{createdDate}</span>
              </div>
            </div>
          </header>

{/* Prompt toolbar */}
          <div className="mb-6 space-y-3">
            <PromptToolbar
              kitId="demo"
              pdfEnabled={false}
              logoPrompt={demoKit.prompts.logo_prompt}
              packagingPrompts={demoKit.prompts.packaging_prompts}
              taglines={demoKit.copy_voice.taglines}
              aboutParagraph={demoKit.copy_voice.about_paragraph}
              strainTemplate={demoKit.copy_voice.strain_description_template}
            />
          </div>

<div className="mt-4 text-xs font-medium uppercase tracking-wide text-slate-400">Brand Story</div>
                    <p className="mt-1 whitespace-pre-line text-sm text-slate-200">{demoKit.snapshot.brand_story}</p>
                  </div>

<div>
                    <div className="text-xs font-medium uppercase tracking-wide text-slate-400">Positioning</div>
                    <p className="mt-1 text-sm text-slate-200">{demoKit.snapshot.positioning}</p>

<div className="mt-4 grid gap-3 md:grid-cols-2">
                    {demoKit.colors.map((color) => (
                      <div key={color.name} className="overflow-hidden rounded-xl border border-border bg-background">
                        <div className="h-16 w-full border-b border-border" style={{ backgroundColor: color.hex }} />
                        <div className="p-3 text-xs">
                          <div className="font-medium text-foreground">{color.name}</div>
                          <div className="mt-1 font-mono text-[11px] text-muted-foreground">{color.hex}</div>
                          <div className="mt-1 text-[11px] text-muted-foreground">
                            Usage: <span className="text-foreground">{color.usage}</span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

<div className="mt-4 space-y-4 text-xs">
                    <div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Heading Style</div>
                      <p className="mt-1 text-sm text-card-foreground">{demoKit.typography.headline_style}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Body Style</div>
                      <p className="mt-1 text-sm text-card-foreground">{demoKit.typography.body_style}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Usage Notes</div>
                      <p className="mt-1 text-[11px] text-muted-foreground whitespace-pre-line">
                        {demoKit.typography.usage_notes}
                      </p>
                    </div>
                  </div>
                </div>
              </section>

<div className="mt-4 grid gap-6 md:grid-cols-2">
                  <div className="space-y-4 text-xs">
                    <div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Summary</div>
                      <p className="mt-1 text-sm text-card-foreground">{demoKit.logo_directions.summary}</p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Motifs & Symbols</div>
                      <p className="mt-1 text-[11px] text-muted-foreground">
                        {demoKit.logo_directions.motifs.join(", ")}
                      </p>
                    </div>

<div>
                      <div className="text-[11px] uppercase tracking-wide text-muted-foreground">Treatment Notes</div>
                      <p className="mt-1 text-[11px] text-muted-foreground whitespace-pre-line">
                        {demoKit.logo_directions.treatment_notes}
                      </p>
                    </div>
                  </div>

<div className="text-xs">
                    <div className="text-[11px] uppercase tracking-wide text-primary">Logo AI Prompt</div>
                    <div className="mt-2 rounded-xl border border-primary/40 bg-slate-800/50 p-3 font-mono text-[11px] leading-relaxed text-slate-100">
                      {demoKit.logo_directions.ai_prompt}
                    </div>
                    <p className="mt-2 text-[11px] text-slate-400">
                      Paste this into your AI image generator. Adjust seed / style strength if your tool supports it.
                    </p>
                  </div>
                </div>
              </section>

<div className="mt-4 grid gap-4 md:grid-cols-2">
                  {demoKit.packaging_concepts &&
                  typeof demoKit.packaging_concepts === "object" &&
                  Object.keys(demoKit.packaging_concepts).length ? (
                    Object.entries(demoKit.packaging_concepts).map(([key, concept]: [string, any]) => (
                      <div
                        key={key}
                        className="flex flex-col gap-2 rounded-xl border border-slate-700 bg-slate-800/30 p-3 text-xs"
                      >
                        <div className="flex items-center justify-between">
                          <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-100">
                            {prettyKey(key)}
                          </span>
                          <span className="rounded-full border border-slate-700 bg-slate-800/50 px-2 py-0.5 text-[10px] text-slate-400">
                            Concept
                          </span>
                        </div>

<div>
                          <div className="text-[11px] uppercase tracking-wide text-primary">Packaging AI Prompt</div>
                          <div className="mt-1 rounded-lg border border-primary/40 bg-slate-800/50 p-2 font-mono text-[11px] leading-relaxed text-slate-100">
                            {concept?.ai_prompt || "—"}
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <p className="text-xs text-slate-400">No packaging concepts found in this kit.</p>
                  )}
                </div>
              </section>

<p className="mt-3 text-sm text-card-foreground">{demoKit.copy_voice.voice_description}</p>
              </section>

{/* Moodboard */}
              <section id="moodboard" className="scroll-mt-20">
                <MoodboardSection kitId="demo" initialMoodboard={demoKit.moodboard} />
              </section>

{/* Image Lab */}
              <section id="image-lab" className="scroll-mt-20">
                <KitImageLab
                  kitId="demo"
                  logoPrompt={demoKit.prompts.logo_prompt}
                  packagingPrompts={demoKit.prompts.packaging_prompts}
                />
              </section>

{/* Platform Templates */}
                <div className="mb-8 space-y-6">
                  <div>
                    <h3 className="mb-3 text-lg font-semibold text-emerald-400">Instagram</h3>
                    <div className="space-y-4">
                      <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Bio Template</h4>
                        <div className="rounded-lg bg-slate-800/50 p-3 font-mono text-xs text-slate-100">
                          {demoKit.tagline} ✨<br />
                          {demoKit.segment} | 21+ Only
                          <br />📍 {demoKit.location}
                          <br />👇 Shop our collection
                        </div>
                      </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Post Caption Templates</h4>
                        <div className="space-y-2">
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Product Launch:</p>
                            <p className="mt-1">
                              Introducing [Product Name]. {demoKit.copy_voice.taglines[0]}
                              Available now. Link in bio. #Cannabis #21Plus #{demoKit.brand_name.replace(/\s+/g, "")}
                            </p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Educational:</p>
                            <p className="mt-1">
                              Did you know? [Share interesting fact about your products or cannabis culture] Follow for
                              more insights. #CannabisEducation #21Plus
                            </p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p className="font-medium text-emerald-300">Behind the Scenes:</p>
                            <p className="mt-1">
                              A peek into how we craft {demoKit.brand_name} products. Quality in every detail.
                              #BehindTheScenes #{demoKit.segment}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

<div>
                    <h3 className="mb-3 text-lg font-semibold text-emerald-400">Twitter / X</h3>
                    <div className="space-y-4">
                      <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Bio Template</h4>
                        <div className="rounded-lg bg-slate-800/50 p-3 font-mono text-xs text-slate-100">
                          {demoKit.copy_voice.taglines[0]} | {demoKit.segment} | 21+ | {demoKit.location}
                        </div>
                      </div>

<div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                        <h4 className="mb-2 text-sm font-semibold text-slate-200">Tweet Templates</h4>
                        <div className="space-y-2">
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p>New drop alert: [Product Name] is here. {demoKit.copy_voice.taglines[1]}</p>
                          </div>
                          <div className="rounded-lg bg-slate-800/50 p-3 text-xs text-slate-200">
                            <p>What makes great {demoKit.segment}? [Your unique perspective in 1-2 sentences]</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

{/* Hashtag Strategy */}
                <div className="mb-8">
                  <h3 className="mb-3 text-lg font-semibold text-slate-100">Hashtag Strategy</h3>
                  <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-4">
                    <div className="mb-3">
                      <h4 className="mb-2 text-sm font-semibold text-emerald-300">Brand Hashtags (Use Always)</h4>
                      <div className="flex flex-wrap gap-2">
                        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs text-emerald-300">
                          #{demoKit.brand_name.replace(/\s+/g, "")}
                        </span>
                        <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs text-emerald-300">
                          #{demoKit.brand_name.replace(/\s+/g, "")}Cannabis
                        </span>
                      </div>
                    </div>

<div className="mb-3">
                      <h4 className="mb-2 text-sm font-semibold text-slate-200">Category Hashtags</h4>
                      <div className="flex flex-wrap gap-2">
                        {[
                          "Cannabis",
                          "21Plus",
                          demoKit.segment,
                          "CannabisLife",
                          "CannabisCommunity",
                          "LegalCannabis",
                        ].map((tag) => (
                          <span key={tag} className="rounded-full bg-slate-800 px-3 py-1 text-xs text-slate-300">
                            #{tag?.replace(/\s+/g, "")}
                          </span>
                        ))}
                      </div>
                    </div>

{demoKit.photography_direction &&
                Array.isArray(demoKit.photography_direction) &&
                demoKit.photography_direction.length > 0 ? (
                  <div className="space-y-6">
                    {demoKit.photography_direction.map((category: any, idx: number) => (
                      <div key={idx} className="rounded-xl border border-slate-700/50 bg-slate-800/30 p-6">
                        <h3 className="mb-2 text-lg font-semibold text-slate-100">{category.category}</h3>
                        <p className="mb-4 text-sm text-slate-200">{category.description}</p>

{/* AI Prompt */}
                        <div>
                          <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-primary">
                            AI Photography Prompt
                          </h4>
                          <div className="rounded-lg bg-slate-800/50 p-4">
                            <p className="text-sm leading-relaxed text-slate-100">{category.ai_prompt}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="rounded-lg border border-slate-700/50 bg-slate-800/30 p-6">
                    <p className="mb-4 text-sm text-slate-300">
                      Photography direction has not been generated yet for this kit.
                    </p>
                    <button
                      onClick={() => {}}
                      className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
                    >
                      Generate Photography Direction
                    </button>
                  </div>
                )}
              </section>
            </main>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/kit/[id]/update-colors/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { updateBrandKitColors, createKitVersion, getBrandKitById } from "@/lib/db"

export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { colors } = await req.json()

if (!Array.isArray(colors)) {
      return NextResponse.json({ error: "Invalid colors data" }, { status: 400 })
    }

const currentKit = await getBrandKitById(params.id)
    if (currentKit) {
      await createKitVersion(
        Number.parseInt(params.id),
        {
          colors: currentKit.colors,
          typography: currentKit.typography,
          logo_directions: currentKit.logo_directions,
          packaging_concepts: currentKit.packaging_concepts,
          copy_voice: currentKit.copy_voice,
          moodboard: currentKit.moodboard,
          photography_direction: currentKit.photography_direction,
        },
        null,
        "Updated color palette",
      )
    }

await updateBrandKitColors(params.id, colors)

return NextResponse.json({ success: true, colors })
  } catch (error) {
    console.error("Error updating colors:", error)
    return NextResponse.json({ error: "Failed to update colors" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/kit/[id]/update-name/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getSql, createKitVersion, getBrandKitById } from "@/lib/db"

export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { name } = await req.json()

if (!name || typeof name !== "string") {
      return NextResponse.json({ error: "Invalid name" }, { status: 400 })
    }

const sql = getSql()

const currentKit = await getBrandKitById(params.id)
    if (currentKit) {
      await createKitVersion(
        Number.parseInt(params.id),
        {
          brand_name: currentKit.snapshot?.brand_name,
          colors: currentKit.colors,
          typography: currentKit.typography,
          logo_directions: currentKit.logo_directions,
          packaging_concepts: currentKit.packaging_concepts,
          copy_voice: currentKit.copy_voice,
          moodboard: currentKit.moodboard,
          photography_direction: currentKit.photography_direction,
        },
        null,
        "Updated brand name",
      )
    }

await sql`
      UPDATE brands
      SET name = ${name}
      WHERE id = (
        SELECT brand_id FROM brand_kits WHERE id = ${params.id}
      )
    `

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error updating brand name:", error)
    return NextResponse.json({ error: "Failed to update name" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/008-add-subscriptions.sql" isMerged="true"
CREATE TABLE IF NOT EXISTS user_subscriptions (
  id SERIAL PRIMARY KEY,
  user_email VARCHAR(255) NOT NULL,
  stripe_customer_id VARCHAR(255),
  stripe_subscription_id VARCHAR(255),
  plan_type VARCHAR(50) NOT NULL CHECK (plan_type IN ('free', 'pro', 'enterprise')),
  status VARCHAR(50) DEFAULT 'active',
  current_period_start TIMESTAMP WITH TIME ZONE,
  current_period_end TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE INDEX IF NOT EXISTS idx_user_subscriptions_email ON user_subscriptions(user_email);
CREATE INDEX IF NOT EXISTS idx_user_subscriptions_stripe_customer ON user_subscriptions(stripe_customer_id);
CREATE INDEX IF NOT EXISTS idx_user_subscriptions_stripe_subscription ON user_subscriptions(stripe_subscription_id);

-- Usage tracking for enforcing limits
CREATE TABLE IF NOT EXISTS usage_tracking (
  id SERIAL PRIMARY KEY,
  user_email VARCHAR(255) NOT NULL,
  resource_type VARCHAR(50) NOT NULL CHECK (resource_type IN ('kits_generated', 'regenerations', 'exports')),
  count INTEGER DEFAULT 0,
  period_start TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  period_end TIMESTAMP WITH TIME ZONE,
  UNIQUE(user_email, resource_type, period_start)
);

CREATE INDEX IF NOT EXISTS idx_usage_tracking_user_email ON usage_tracking(user_email);
CREATE INDEX IF NOT EXISTS idx_usage_tracking_period ON usage_tracking(period_start, period_end);
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
import "server-only"
import Stripe from "stripe"

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
[V0_FILE]typescriptreact:file="components/checkout-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useCallback } from "react"
import { EmbeddedCheckout, EmbeddedCheckoutProvider } from "@stripe/react-stripe-js"
import { loadStripe } from "@stripe/stripe-js"
import { startCheckoutSession } from "@/app/actions/stripe"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

interface CheckoutModalProps {
  isOpen: boolean
  onClose: () => void
  planId: string
  userEmail?: string
}

export function CheckoutModal({ isOpen, onClose, planId, userEmail }: CheckoutModalProps) {
  const fetchClientSecret = useCallback(() => {
    console.log("[v0] Creating checkout with email:", userEmail) // Debug log
    return startCheckoutSession(planId, userEmail)
  }, [planId, userEmail])

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Complete Your Subscription</DialogTitle>
        </DialogHeader>
        <div id="checkout">
          <EmbeddedCheckoutProvider stripe={stripePromise} options={{ fetchClientSecret }}>
            <EmbeddedCheckout />
          </EmbeddedCheckoutProvider>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/pricing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { CheckoutModal } from "@/components/checkout-modal"
import { SUBSCRIPTION_PLANS } from "@/lib/products"
import { createClient } from "@/lib/supabase/client"

export default function PricingPage() {
  const [checkoutOpen, setCheckoutOpen] = useState(false)
  const [selectedPlan, setSelectedPlan] = useState<string>("")
  const [userEmail, setUserEmail] = useState<string | null>(null) // Track user email

useState(() => {
    async function loadUser() {
      const supabase = createClient()
      const {
        data: { user },
      } = await supabase.auth.getUser()
      setUserEmail(user?.email || null)
    }
    loadUser()
  }, [])

const handleSelectPlan = (planId: string) => {
    if (planId === "free") {
      window.location.href = "/wizard"
      return
    }
    setSelectedPlan(planId)
    setCheckoutOpen(true)
  }

return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Choose Your Plan</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Start building professional cannabis brand kits with AI-powered design tools
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {SUBSCRIPTION_PLANS.map((plan) => (
            <Card key={plan.id} className={`p-6 ${plan.id === "pro" ? "border-primary shadow-lg scale-105" : ""}`}>
              {plan.id === "pro" && (
                <div className="bg-primary text-primary-foreground text-sm font-medium px-3 py-1 rounded-full inline-block mb-4">
                  Most Popular
                </div>
              )}

<h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
              <p className="text-muted-foreground mb-4">{plan.description}</p>

<div className="mb-6">
                <span className="text-4xl font-bold">${(plan.priceInCents / 100).toFixed(0)}</span>
                {plan.priceInCents > 0 && <span className="text-muted-foreground">/month</span>}
              </div>

<Button
                onClick={() => handleSelectPlan(plan.id)}
                className="w-full mb-6"
                variant={plan.id === "pro" ? "default" : "outline"}
              >
                {plan.priceInCents === 0 ? "Get Started" : "Subscribe Now"}
              </Button>

<ul className="space-y-3">
                {plan.features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-2">
                    <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-sm">{feature}</span>
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>

<div className="text-center mt-12">
          <p className="text-muted-foreground">
            All plans include email support.{" "}
            <Link href="/help" className="text-primary hover:underline">
              View Help Center
            </Link>
          </p>
        </div>
      </div>

<CheckoutModal
        isOpen={checkoutOpen}
        onClose={() => setCheckoutOpen(false)}
        planId={selectedPlan}
        userEmail={userEmail || undefined} // Pass user email to checkout
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/help/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Search, BookOpen, MessageCircle, Mail, ChevronRight } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

const HELP_CATEGORIES = [
  {
    title: "Getting Started",
    icon: BookOpen,
    articles: [
      { title: "How to create your first brand kit", slug: "create-first-kit" },
      { title: "Understanding the Brand Wizard", slug: "brand-wizard-guide" },
      { title: "Navigating the Studio dashboard", slug: "studio-dashboard" },
      { title: "Setting up your account", slug: "account-setup" },
    ],
  },
  {
    title: "Brand Kit Features",
    icon: BookOpen,
    articles: [
      { title: "Using the Moodboard feature", slug: "moodboard-guide" },
      { title: "Generating product names with AI", slug: "strain-lab-guide" },
      { title: "Creating social media content", slug: "social-media-kit" },
      { title: "Editing colors and typography", slug: "editing-kit" },
      { title: "Regenerating sections", slug: "regenerate-sections" },
    ],
  },
  {
    title: "Exporting & Sharing",
    icon: BookOpen,
    articles: [
      { title: "Downloading brand kits as PDF", slug: "export-pdf" },
      { title: "Exporting to JSON format", slug: "export-json" },
      { title: "Sharing kits with clients", slug: "sharing-kits" },
      { title: "Using version history", slug: "version-history" },
    ],
  },
  {
    title: "Subscription & Billing",
    icon: BookOpen,
    articles: [
      { title: "Choosing the right plan", slug: "choosing-plan" },
      { title: "Upgrading your subscription", slug: "upgrade-subscription" },
      { title: "Managing billing information", slug: "billing-info" },
      { title: "Understanding usage limits", slug: "usage-limits" },
    ],
  },
  {
    title: "Advanced Features",
    icon: BookOpen,
    articles: [
      { title: "Using kit templates", slug: "kit-templates" },
      { title: "Understanding analytics", slug: "analytics-guide" },
      { title: "Custom branding settings", slug: "custom-branding" },
      { title: "Email notifications", slug: "notifications" },
    ],
  },
  {
    title: "Troubleshooting",
    icon: BookOpen,
    articles: [
      { title: "Kit generation is slow or fails", slug: "generation-issues" },
      { title: "PDF download not working", slug: "pdf-issues" },
      { title: "Authentication problems", slug: "auth-issues" },
      { title: "Dark mode issues", slug: "dark-mode-issues" },
    ],
  },
]

const FAQ_ITEMS = [
  {
    question: "How many brand kits can I create?",
    answer: "Free users can create 3 kits per month. Pro and Enterprise plans offer unlimited kit generation.",
  },
  {
    question: "Can I edit my brand kits after generation?",
    answer: "Yes! You can edit brand names, colors inline, and regenerate individual sections at any time.",
  },
  {
    question: "What file formats can I export?",
    answer: "You can export your brand kits as PDF for presentations or JSON for integration with other tools.",
  },
  {
    question: "Is my data secure?",
    answer: "Yes, all data is encrypted in transit and at rest. We use industry-standard security practices.",
  },
  {
    question: "Can I cancel my subscription anytime?",
    answer: "Yes, you can cancel your subscription at any time from the Settings page. No questions asked.",
  },
]

export default function HelpPage() {
  const [searchQuery, setSearchQuery] = useState("")

const filteredCategories = HELP_CATEGORIES.map((category) => ({
    ...category,
    articles: category.articles.filter((article) => article.title.toLowerCase().includes(searchQuery.toLowerCase())),
  })).filter((category) => category.articles.length > 0)

return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Help Center</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
            Find answers, learn best practices, and get support
          </p>

{/* Search */}
          <div className="max-w-xl mx-auto relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search help articles..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

{/* Quick Actions */}
        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-16">
          <Card className="p-6 hover:border-primary transition-colors cursor-pointer">
            <Link href="/contact" className="flex items-start gap-4">
              <MessageCircle className="h-8 w-8 text-primary flex-shrink-0" />
              <div>
                <h3 className="font-semibold mb-2">Contact Support</h3>
                <p className="text-sm text-muted-foreground">Get help from our support team</p>
              </div>
            </Link>
          </Card>

<Card className="p-6 hover:border-primary transition-colors cursor-pointer">
            <Link href="mailto:support@cannabrand.studio" className="flex items-start gap-4">
              <Mail className="h-8 w-8 text-primary flex-shrink-0" />
              <div>
                <h3 className="font-semibold mb-2">Email Us</h3>
                <p className="text-sm text-muted-foreground">support@cannabrand.studio</p>
              </div>
            </Link>
          </Card>
        </div>

{/* Help Categories */}
        <div className="max-w-6xl mx-auto mb-16">
          <h2 className="text-2xl font-bold mb-6">Browse by Category</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredCategories.map((category) => (
              <Card key={category.title} className="p-6">
                <div className="flex items-center gap-3 mb-4">
                  <category.icon className="h-6 w-6 text-primary" />
                  <h3 className="font-semibold">{category.title}</h3>
                </div>
                <ul className="space-y-2">
                  {category.articles.map((article) => (
                    <li key={article.slug}>
                      <Link
                        href={`/help/${article.slug}`}
                        className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1 group"
                      >
                        <ChevronRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                        {article.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              </Card>
            ))}
          </div>
        </div>

{/* FAQ */}
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-bold mb-6">Frequently Asked Questions</h2>
          <div className="space-y-4">
            {FAQ_ITEMS.map((item, index) => (
              <Card key={index} className="p-6">
                <h3 className="font-semibold mb-2">{item.question}</h3>
                <p className="text-muted-foreground">{item.answer}</p>
              </Card>
            ))}
          </div>
        </div>

{/* Still Need Help */}
        <div className="text-center mt-16">
          <Card className="p-8 max-w-2xl mx-auto">
            <h2 className="text-2xl font-bold mb-4">Still need help?</h2>
            <p className="text-muted-foreground mb-6">Our support team is here to assist you with any questions</p>
            <Button asChild>
              <Link href="/contact">Contact Support</Link>
            </Button>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/help/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/ui/navigation.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { Menu, X, Sparkles, Grid3x3, Flag as Flask, Package, LogOut, User, BarChart3, Settings } from "lucide-react"
import { useState, useEffect } from "react"
import { createClient } from "@/lib/supabase/client"
import { ThemeToggle } from "@/components/theme-toggle"

export function Navigation() {
  const pathname = usePathname()
  const router = useRouter()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [user, setUser] = useState<{ email: string } | null>(null)
  const [loading, setLoading] = useState(true)
  const [customBranding, setCustomBranding] = useState<{ name: string; logo?: string } | null>(null)

useEffect(() => {
    const supabase = createClient()

supabase.auth.getUser().then(({ data: { user } }) => {
      setUser(user ? { email: user.email || "" } : null)
      setLoading(false)
    })

const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ? { email: session.user.email || "" } : null)
    })

const savedBranding = localStorage.getItem("cannabrand-custom-branding")
    if (savedBranding) {
      setCustomBranding(JSON.parse(savedBranding))
    }

return () => subscription.unsubscribe()
  }, [])

const handleSignOut = async () => {
    const supabase = createClient()
    await supabase.auth.signOut()
    router.push("/")
    router.refresh()
  }

const navItems = [
    { href: "/studio", label: "Studio", icon: Grid3x3, dataTour: "studio" },
    { href: "/kits", label: "All Kits", icon: Package },
    { href: "/analytics", label: "Analytics", icon: BarChart3, dataTour: "analytics" },
    { href: "/strain-lab", label: "Strain Lab", icon: Flask, dataTour: "strain-lab" },
    { href: "/kit/demo", label: "View Example", icon: Sparkles },
    { href: "/pricing", label: "Pricing", icon: Package },
    { href: "/help", label: "Help", icon: Settings },
  ]

return (
    <header className="fixed top-0 left-0 right-0 z-50 border-b border-slate-800 bg-slate-950/95 backdrop-blur-lg dark:border-slate-700 dark:bg-slate-900/95">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-14 sm:h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
            <div className="flex h-7 w-7 sm:h-8 sm:w-8 items-center justify-center rounded-lg sm:rounded-xl bg-emerald-500/10 ring-1 ring-emerald-400/50">
              <span className="text-[10px] sm:text-xs font-semibold text-emerald-300">
                {customBranding?.name
                  ? customBranding.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")
                      .toUpperCase()
                      .slice(0, 2)
                  : "CB"}
              </span>
            </div>
            <div className="hidden sm:block">
              <div className="text-xs sm:text-sm font-semibold tracking-tight text-slate-50">
                {customBranding?.name || "Cannabrand Studio"}
              </div>
              <div className="text-[9px] sm:text-[10px] uppercase tracking-wide text-slate-400">
                Cannabis Brand Kit Generator
              </div>
            </div>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-1">
            {navItems.map((item) => {
              const Icon = item.icon
              const isActive = pathname === item.href || pathname.startsWith(item.href)
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                    isActive
                      ? "bg-emerald-500/10 text-emerald-300"
                      : "text-slate-300 hover:bg-slate-800 hover:text-slate-50"
                  }`}
                  data-tour={item.dataTour}
                >
                  <Icon className="h-4 w-4" />
                  {item.label}
                </Link>
              )
            })}
          </nav>

<div className="hidden lg:flex items-center gap-2">
            <div data-tour="theme-toggle">
              <ThemeToggle />
            </div>
            <Link
              href="/settings"
              data-tour="settings"
              className="rounded-lg p-2 text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
              aria-label="Settings"
            >
              <Settings className="h-4 w-4" />
            </Link>
            {loading ? null : user ? (
              <>
                <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700">
                  <User className="h-3.5 w-3.5 text-slate-400" />
                  <span className="text-xs text-slate-300">{user.email}</span>
                </div>
                <button
                  onClick={handleSignOut}
                  className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
                >
                  <LogOut className="h-4 w-4" />
                  Sign Out
                </button>
              </>
            ) : (
              <>
                <Link
                  href="/auth/login"
                  className="rounded-lg px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 transition-colors"
                >
                  Login
                </Link>
                <Link
                  href="/auth/sign-up"
                  className="rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/40 hover:bg-emerald-400 transition-colors"
                >
                  Sign Up
                </Link>
              </>
            )}
          </div>

{/* Mobile menu button */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="lg:hidden rounded-lg p-2.5 text-slate-300 hover:bg-slate-800 hover:text-slate-50 active:bg-slate-700"
            aria-label="Toggle menu"
          >
            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>

{/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="lg:hidden border-t border-slate-800 py-4 pb-safe">
            <nav className="flex flex-col gap-1">
              {navItems.map((item) => {
                const Icon = item.icon
                const isActive = pathname === item.href || pathname.startsWith(item.href)
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileMenuOpen(false)}
                    className={`flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-colors active:scale-[0.98] ${
                      isActive
                        ? "bg-emerald-500/10 text-emerald-300"
                        : "text-slate-300 hover:bg-slate-800 hover:text-slate-50 active:bg-slate-700"
                    }`}
                  >
                    <Icon className="h-5 w-5" />
                    {item.label}
                  </Link>
                )
              })}

<div className="mt-3 px-4 py-2 border-t border-slate-800">
                <div className="flex items-center justify-between">
                  <span className="text-xs font-medium text-slate-400">Theme</span>
                  <ThemeToggle />
                </div>
              </div>

{!loading &&
                (user ? (
                  <>
                    <div className="mt-3 px-4 py-2 border-t border-slate-800">
                      <div className="flex items-center gap-2 text-xs text-slate-400">
                        <User className="h-4 w-4" />
                        <span>{user.email}</span>
                      </div>
                    </div>
                    <button
                      onClick={() => {
                        handleSignOut()
                        setMobileMenuOpen(false)
                      }}
                      className="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 active:bg-slate-700 active:scale-[0.98]"
                    >
                      <LogOut className="h-5 w-5" />
                      Sign Out
                    </button>
                  </>
                ) : (
                  <div className="mt-3 flex flex-col gap-2 border-t border-slate-800 pt-3">
                    <Link
                      href="/auth/login"
                      onClick={() => setMobileMenuOpen(false)}
                      className="rounded-lg border border-slate-700 px-4 py-3 text-center text-sm font-medium text-slate-300 hover:bg-slate-800 hover:text-slate-50 active:bg-slate-700 active:scale-[0.98]"
                    >
                      Login
                    </Link>
                    <Link
                      href="/auth/sign-up"
                      onClick={() => setMobileMenuOpen(false)}
                      className="rounded-lg bg-emerald-500 px-4 py-3 text-center text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/40 hover:bg-emerald-400 active:bg-emerald-600 active:scale-[0.98]"
                    >
                      Sign Up
                    </Link>
                  </div>
                ))}
            </nav>
          </div>
        )}
      </div>
    </header>
  )
}

export default Navigation
[V0_FILE]typescript:file="lib/db.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { neon } from "@neondatabase/serverless"

let _sql: ReturnType<typeof neon> | null = null

function getSql() {
  if (!_sql) {
    const databaseUrl =
      process.env.DATABASE_URL ||
      process.env.POSTGRES_URL ||
      process.env.DATABASE_URL_UNPOOLED ||
      process.env.POSTGRES_URL_NON_POOLING

if (!databaseUrl) {
      throw new Error(
        "Database URL environment variable is not set. Checked: DATABASE_URL, POSTGRES_URL, DATABASE_URL_UNPOOLED, POSTGRES_URL_NON_POOLING",
      )
    }

console.log("[v0] Initializing Neon connection")
    _sql = neon(databaseUrl)
  }
  return _sql
}

export { getSql }

export const sql = new Proxy((...args: any[]) => getSql()(...args), {
  get(target, prop) {
    const sqlInstance = getSql()
    const value = (sqlInstance as any)[prop]
    return typeof value === "function" ? value.bind(sqlInstance) : value
  },
}) as ReturnType<typeof neon>

async function checkAnalyticsTablesExist(): Promise<boolean> {
  try {
    const sqlClient = getSql()
    const result = (await sqlClient(
      "SELECT COUNT(*) as count FROM information_schema.tables WHERE table_schema = 'public' AND table_name = 'kit_views'",
    )) as Array<{ count: number }>

return (result[0]?.count ?? 0) > 0
  } catch (error) {
    return false
  }
}

export async function getBrandKitById(id: string) {
  const result = await sql.query<{
    id: string
    brand_id: string
    snapshot: any
    colors: any
    typography: any
    logo_directions: any
    packaging_concepts: any
    copy_voice: any
    prompts: any
    moodboard: any
    photography_direction: any
    public_slug: string | null
    is_public: boolean | null
    created_at: string
  }>(
    `
    select
      id,
      brand_id,
      snapshot,
      colors,
      typography,
      logo_directions,
      packaging_concepts,
      copy_voice,
      prompts,
      moodboard,
      photography_direction,
      public_slug,
      is_public,
      created_at
    from brand_kits
    where id = $1
    limit 1;
  `,
    [id],
  )

return result.rows[0] ?? null
}

export async function listBrandKits(userId?: string, limit = 20) {
  // Return all kits for backwards compatibility
  const result = await sql.query<{
    id: string
    brand_name: string
    segment: string | null
    created_at: string
  }>(
    `
    select
      k.id,
      b.name as brand_name,
      k.snapshot->>'segment' as segment,
      k.created_at
    from brand_kits k
    join brands b on k.brand_id = b.id
    order by k.created_at desc
    limit $1;
  `,
    [limit],
  )

return result.rows
}

export async function getBrandAndKitByKitId(kitId: string) {
  const result = await sql.query<{
    kit_id: string
    brand_id: string
    brand_name: string
    brand_description: string
    target_audience: string
    snapshot: any
    colors: any
    typography: any
    logo_directions: any
    packaging_concepts: any
    copy_voice: any
    prompts: any
    moodboard: any
  }>(
    `
    select
      k.id as kit_id,
      b.id as brand_id,
      b.name as brand_name,
      b.description as brand_description,
      b.target_audience,
      k.snapshot,
      k.colors,
      k.typography,
      k.logo_directions,
      k.packaging_concepts,
      k.copy_voice,
      k.prompts,
      k.moodboard
    from brand_kits k
    join brands b on k.brand_id = b.id
    where k.id = $1
    limit 1;
  `,
    [kitId],
  )

return result.rows[0] ?? null
}

export async function updateBrandKitColors(kitId: string, colors: any): Promise<void> {
  await sql.query(
    `
    update brand_kits
    set colors = $1
    where id = $2;
  `,
    [JSON.stringify(colors), kitId],
  )
}

export async function updateBrandKitPackagingConcepts(
  kitId: string,
  packagingConcepts: any,
  packagingPrompts?: Record<string, string>,
): Promise<void> {
  if (packagingPrompts) {
    // Update packaging_concepts + prompts.packaging_prompts
    await sql.query(
      `
      update brand_kits
      set
        packaging_concepts = $1,
        prompts = jsonb_set(
          prompts::jsonb,
          '{packaging_prompts}',
          $2::jsonb,
          true
        )
      where id = $3;
    `,
      [JSON.stringify(packagingConcepts), JSON.stringify(packagingPrompts), kitId],
    )
  } else {
    await sql.query(
      `
      update brand_kits
      set packaging_concepts = $1
      where id = $2;
    `,
      [JSON.stringify(packagingConcepts), kitId],
    )
  }
}

export async function updateBrandKitCopyVoice(kitId: string, copyVoice: any): Promise<void> {
  await sql.query(
    `
    update brand_kits
    set copy_voice = $1
    where id = $2;
  `,
    [JSON.stringify(copyVoice), kitId],
  )
}

export async function updateBrandKitMoodboard(kitId: string, moodboard: any): Promise<void> {
  await sql.query(
    `
    update brand_kits
    set moodboard = $1
    where id = $2;
  `,
    [JSON.stringify(moodboard), kitId],
  )
}

export async function duplicateBrandKit(kitId: string) {
  const result = await sql.query<{ id: string }>(
    `
    insert into brand_kits (
      brand_id,
      snapshot,
      colors,
      typography,
      voice_tone,
      visual_direction,
      logo_directions,
      packaging_concepts,
      copy_voice,
      prompts,
      moodboard,
      photography_direction
    )
    select
      brand_id,
      snapshot,
      colors,
      typography,
      COALESCE(voice_tone, '{}'::jsonb),
      COALESCE(visual_direction, '{}'::jsonb),
      logo_directions,
      packaging_concepts,
      copy_voice,
      prompts,
      moodboard,
      photography_direction
    from brand_kits
    where id = $1
    returning id;
  `,
    [kitId],
  )

return result.rows[0]?.id ?? null
}

export async function deleteBrandKit(kitId: string): Promise<void> {
  await sql.query(
    `
    delete from brand_kits
    where id = $1;
  `,
    [kitId],
  )
}

export async function getBrandKitByPublicSlug(slug: string) {
  const result = await sql.query<{
    id: string
    brand_id: string
    snapshot: any
    colors: any
    typography: any
    logo_directions: any
    packaging_concepts: any
    copy_voice: any
    prompts: any
    moodboard: any
    photography_direction: any
    public_slug: string | null
    is_public: boolean | null
    created_at: string
    brand_name: string | null
    segment: string | null
  }>(
    `
    select
      bk.id,
      bk.brand_id,
      bk.snapshot,
      bk.colors,
      bk.typography,
      bk.logo_directions,
      bk.packaging_concepts,
      bk.copy_voice,
      bk.prompts,
      bk.moodboard,
      bk.photography_direction,
      bk.public_slug,
      bk.is_public,
      bk.created_at,
      b.name as brand_name,
      bk.snapshot->>'segment' as segment
    from brand_kits bk
    join brands b on b.id = bk.brand_id
    where bk.public_slug = $1
      and bk.is_public = true
    limit 1;
  `,
    [slug],
  )

return result.rows[0] ?? null
}

export async function setBrandKitPublic(kitId: string, slug: string) {
  await sql.query(
    `
    update brand_kits
    set public_slug = $1,
        is_public = true
    where id = $2;
  `,
    [slug, kitId],
  )
}

export async function clearBrandKitPublic(kitId: string) {
  await sql.query(
    `
    update brand_kits
    set public_slug = null,
        is_public = false
    where id = $1;
  `,
    [kitId],
  )
}

export async function listKitTemplates() {
  const result = await sql.query<{
    id: number
    name: string
    description: string | null
    config: any
    created_at: string
  }>(`
    select id, name, description, config, created_at
    from kit_templates
    order by created_at desc;
  `)
  return result.rows
}

export async function createKitTemplate(name: string, description: string | null, config: any) {
  const result = await sql.query<{ id: number }>(
    `
    insert into kit_templates (name, description, config)
    values ($1, $2, $3)
    returning id;
  `,
    [name, description, JSON.stringify(config)],
  )
  return result.rows[0]?.id ?? null
}

export async function deleteKitTemplate(id: number) {
  await sql.query(
    `
    delete from kit_templates
    where id = $1;
  `,
    [id],
  )
}

export async function trackKitView(kitId: number) {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return

try {
    await sql.query(
      `
      insert into kit_views (kit_id)
      values ($1);
    `,
      [kitId],
    )
  } catch (error) {
    // Silently ignore
  }
}

export async function trackKitDownload(kitId: number, downloadType: "pdf" | "json") {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return

try {
    await sql.query(
      `
      insert into kit_downloads (kit_id, download_type)
      values ($1, $2);
    `,
      [kitId, downloadType],
    )
  } catch (error) {
    // Silently ignore
  }
}

export async function trackKitRegeneration(kitId: number, section: string) {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return

try {
    await sql.query(
      `
      insert into kit_regenerations (kit_id, section)
      values ($1, $2);
    `,
      [kitId, section],
    )
  } catch (error) {
    // Silently ignore
  }
}

export async function getAnalyticsOverview() {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) {
    return {
      totalKits: 0,
      totalViews: 0,
      totalDownloads: 0,
      recentKits: 0,
      tablesExist: false,
    }
  }

try {
    const totalKits = await sql.query<{ count: number }>(`
      select count(*)::int as count
      from brand_kits;
    `)

const totalViews = await sql.query<{ count: number }>(`
      select count(*)::int as count
      from kit_views;
    `)

const totalDownloads = await sql.query<{ count: number }>(`
      select count(*)::int as count
      from kit_downloads;
    `)

const recentKits = await sql.query<{ count: number }>(`
      select count(*)::int as count
      from brand_kits
      where created_at > now() - interval '7 days';
    `)

return {
      totalKits: totalKits.rows[0]?.count || 0,
      totalViews: totalViews.rows[0]?.count || 0,
      totalDownloads: totalDownloads.rows[0]?.count || 0,
      recentKits: recentKits.rows[0]?.count || 0,
    }
  } catch (error) {
    return {
      totalKits: 0,
      totalViews: 0,
      totalDownloads: 0,
      recentKits: 0,
      tablesExist: false,
    }
  }
}

export async function getTopViewedKits(limit = 10) {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return []

try {
    const result = await sql.query<{
      kit_id: number
      brand_name: string
      segment: string | null
      view_count: number
    }>(
      `
      select
        k.id as kit_id,
        b.name as brand_name,
        k.snapshot->>'segment' as segment,
        count(v.id)::int as view_count
      from brand_kits k
      join brands b on k.brand_id = b.id
      left join kit_views v on v.kit_id = k.id
      group by k.id, b.name, k.snapshot
      order by view_count desc
      limit $1;
    `,
      [limit],
    )

return result.rows
  } catch (error) {
    return []
  }
}

export async function getActivityTimeline(days = 30) {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return []

try {
    const result = await sql.query<{
      date: string
      kits_created: number
      views: number
      downloads: number
    }>(`
      with date_series as (
        select generate_series(
          current_date - interval '${days} days',
          current_date,
          interval '1 day'
        )::date as date
      )
      select
        ds.date::text,
        coalesce(count(distinct k.id), 0)::int as kits_created,
        coalesce(count(distinct v.id), 0)::int as views,
        coalesce(count(distinct d.id), 0)::int as downloads
      from date_series ds
      left join brand_kits k on k.created_at::date = ds.date
      left join kit_views v on v.viewed_at::date = ds.date
      left join kit_downloads d on d.downloaded_at::date = ds.date
      group by ds.date
      order by ds.date;
    `)

return result.rows
  } catch (error) {
    return []
  }
}

export async function getSegmentDistribution() {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return []

try {
    const result = await sql.query<{
      segment: string
      count: number
    }>(`
      select
        coalesce(snapshot->>'segment', 'Unknown') as segment,
        count(*)::int as count
      from brand_kits
      group by segment
      order by count desc;
    `)

return result.rows
  } catch (error) {
    return []
  }
}

export async function getRegenerationStats() {
  const tablesExist = await checkAnalyticsTablesExist()
  if (!tablesExist) return []

try {
    const result = await sql.query<{
      section: string
      count: number
    }>(`
      select
        section,
        count(*)::int as count
      from kit_regenerations
      group by section
      order by count desc;
    `)

return result.rows
  } catch (error) {
    return []
  }
}

export async function createKitVersion(
  kitId: number,
  snapshot: any,
  changedBy: string | null,
  changeDescription: string,
): Promise<number | null> {
  try {
    // Get the next version number
    const versionResult = await sql.query<{ max_version: number }>(
      `
      select coalesce(max(version_number), 0) + 1 as max_version
      from kit_versions
      where kit_id = $1;
    `,
      [kitId],
    )

const versionNumber = versionResult.rows[0]?.max_version || 1

// Insert the version
    const result = await sql.query<{ id: number }>(
      `
      insert into kit_versions (kit_id, version_number, snapshot, changed_by, change_description)
      values ($1, $2, $3, $4, $5)
      returning id;
    `,
      [kitId, versionNumber, JSON.stringify(snapshot), changedBy, changeDescription],
    )

return result.rows[0]?.id ?? null
  } catch (error) {
    console.error("[v0] Error creating kit version:", error)
    return null
  }
}

export async function getKitVersions(kitId: number) {
  try {
    const result = await sql.query<{
      id: number
      version_number: number
      snapshot: any
      changed_by: string | null
      change_description: string
      created_at: string
    }>(
      `
      select id, version_number, snapshot, changed_by, change_description, created_at
      from kit_versions
      where kit_id = $1
      order by version_number desc;
    `,
      [kitId],
    )

return result.rows
  } catch (error) {
    console.error("[v0] Error fetching kit versions:", error)
    return []
  }
}

export async function restoreKitVersion(kitId: number, versionId: number) {
  try {
    // Get the version snapshot
    const versionResult = await sql.query<{ snapshot: any }>(
      `
      select snapshot
      from kit_versions
      where id = $1 and kit_id = $2;
    `,
      [versionId, kitId],
    )

if (!versionResult.rows[0]) {
      return false
    }

const snapshot = versionResult.rows[0].snapshot

// Update the kit with the version snapshot
    await sql.query(
      `
      update brand_kits
      set
        colors = $1,
        typography = $2,
        logo_directions = $3,
        packaging_concepts = $4,
        copy_voice = $5,
        moodboard = $6,
        photography_direction = $7
      where id = $8;
    `,
      [
        JSON.stringify(snapshot.colors),
        JSON.stringify(snapshot.typography),
        JSON.stringify(snapshot.logo_directions),
        JSON.stringify(snapshot.packaging_concepts),
        JSON.stringify(snapshot.copy_voice),
        JSON.stringify(snapshot.moodboard),
        JSON.stringify(snapshot.photography_direction),
        kitId,
      ],
    )

return true
  } catch (error) {
    console.error("[v0] Error restoring kit version:", error)
    return false
  }
}

export async function getNotificationPreferences(userEmail: string) {
  try {
    const result = await sql.query<{
      kit_shared: boolean
      kit_updated: boolean
      weekly_summary: boolean
    }>(
      `
      select kit_shared, kit_updated, weekly_summary
      from notification_preferences
      where user_email = $1;
    `,
      [userEmail],
    )

return (
      result.rows[0] || {
        kit_shared: true,
        kit_updated: true,
        weekly_summary: true,
      }
    )
  } catch (error) {
    return {
      kit_shared: true,
      kit_updated: true,
      weekly_summary: true,
    }
  }
}

export async function updateNotificationPreferences(
  userEmail: string,
  preferences: {
    kit_shared?: boolean
    kit_updated?: boolean
    weekly_summary?: boolean
  },
) {
  try {
    await sql.query(
      `
      insert into notification_preferences (user_email, kit_shared, kit_updated, weekly_summary)
      values ($1, $2, $3, $4)
      on conflict (user_email)
      do update set
        kit_shared = coalesce($2, notification_preferences.kit_shared),
        kit_updated = coalesce($3, notification_preferences.kit_updated),
        weekly_summary = coalesce($4, notification_preferences.weekly_summary),
        updated_at = now();
    `,
      [userEmail, preferences.kit_shared, preferences.kit_updated, preferences.weekly_summary],
    )
  } catch (error) {
    console.error("[v0] Error updating notification preferences:", error)
  }
}

export async function logEmailNotification(
  userEmail: string,
  notificationType: string,
  kitId: number | null,
  subject: string,
  body: string,
) {
  try {
    await sql.query(
      `
      insert into email_notifications (user_email, notification_type, kit_id, subject, body)
      values ($1, $2, $3, $4, $5);
    `,
      [userEmail, notificationType, kitId, subject, body],
    )
  } catch (error) {
    console.error("[v0] Error logging email notification:", error)
  }
}

export async function getUserSubscription(userEmail: string) {
  try {
    const result = await sql.query<{
      id: number
      stripe_customer_id: string | null
      stripe_subscription_id: string | null
      plan_type: string
      status: string
      current_period_end: string | null
    }>(
      `
      select id, stripe_customer_id, stripe_subscription_id, plan_type, status, current_period_end
      from user_subscriptions
      where user_email = $1
      order by created_at desc
      limit 1;
    `,
      [userEmail],
    )

return result.rows[0] || null
  } catch (error) {
    return null
  }
}

export async function createOrUpdateSubscription(
  userEmail: string,
  planType: string,
  stripeCustomerId?: string,
  stripeSubscriptionId?: string,
  currentPeriodStart?: Date,
  currentPeriodEnd?: Date,
) {
  try {
    await sql.query(
      `
      insert into user_subscriptions (user_email, stripe_customer_id, stripe_subscription_id, plan_type, current_period_start, current_period_end)
      values ($1, $2, $3, $4, $5, $6)
      on conflict (user_email)
      do update set
        stripe_customer_id = coalesce($2, user_subscriptions.stripe_customer_id),
        stripe_subscription_id = coalesce($3, user_subscriptions.stripe_subscription_id),
        plan_type = $4,
        current_period_start = coalesce($5, user_subscriptions.current_period_start),
        current_period_end = coalesce($6, user_subscriptions.current_period_end),
        updated_at = now();
    `,
      [userEmail, stripeCustomerId, stripeSubscriptionId, planType, currentPeriodStart, currentPeriodEnd],
    )
  } catch (error) {
    console.error("[v0] Error creating/updating subscription:", error)
  }
}

export async function cancelSubscription(userEmail: string) {
  try {
    await sql.query(
      `
      update user_subscriptions
      set status = 'canceled', updated_at = now()
      where user_email = $1;
    `,
      [userEmail],
    )
  } catch (error) {
    console.error("[v0] Error canceling subscription:", error)
  }
}

export async function trackUsage(userEmail: string, resourceType: "kits_generated" | "regenerations" | "exports") {
  try {
    const periodStart = new Date()
    periodStart.setDate(1) // First day of current month
    periodStart.setHours(0, 0, 0, 0)

await sql.query(
      `
      insert into usage_tracking (user_email, resource_type, count, period_start)
      values ($1, $2, 1, $3)
      on conflict (user_email, resource_type, period_start)
      do update set count = usage_tracking.count + 1;
    `,
      [userEmail, resourceType, periodStart],
    )
  } catch (error) {
    console.error("[v0] Error tracking usage:", error)
  }
}

export async function getUsage(userEmail: string) {
  try {
    const periodStart = new Date()
    periodStart.setDate(1)
    periodStart.setHours(0, 0, 0, 0)

const result = await sql.query<{
      resource_type: string
      count: number
    }>(
      `
      select resource_type, count
      from usage_tracking
      where user_email = $1 and period_start = $2;
    `,
      [userEmail, periodStart],
    )

const usage = {
      kits_generated: 0,
      regenerations: 0,
      exports: 0,
    }

result.rows.forEach((row) => {
      usage[row.resource_type as keyof typeof usage] = row.count
    })

return usage
  } catch (error) {
    return {
      kits_generated: 0,
      regenerations: 0,
      exports: 0,
    }
  }
}
[V0_FILE]typescript:file="app/api/subscription/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getUserSubscription } from "@/lib/db"

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const email = searchParams.get("email")

if (!email) {
      return NextResponse.json({ error: "Email required" }, { status: 400 })
    }

const subscription = await getUserSubscription(email)

return NextResponse.json({ subscription })
  } catch (error) {
    console.error("Error fetching subscription:", error)
    return NextResponse.json({ error: "Failed to fetch subscription" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/usage/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { getUsage } from "@/lib/db"

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const email = searchParams.get("email")

if (!email) {
      return NextResponse.json({ error: "Email required" }, { status: 400 })
    }

const usage = await getUsage(email)

return NextResponse.json({ usage })
  } catch (error) {
    console.error("Error fetching usage:", error)
    return NextResponse.json({ error: "Failed to fetch usage" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/create-portal-session/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createCustomerPortalSession } from "@/app/actions/stripe"

export async function POST(request: Request) {
  try {
    const { customerId } = await request.json()

if (!customerId) {
      return NextResponse.json({ error: "Customer ID required" }, { status: 400 })
    }

const url = await createCustomerPortalSession(customerId)

return NextResponse.json({ url })
  } catch (error) {
    console.error("Error creating portal session:", error)
    return NextResponse.json({ error: "Failed to create portal session" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/webhooks/stripe/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { stripe } from "@/lib/stripe"
import { createOrUpdateSubscription, cancelSubscription } from "@/lib/db"
import type Stripe from "stripe"

export async function POST(request: Request) {
  const body = await request.text()
  const sig = request.headers.get("stripe-signature")

if (!sig) {
    return NextResponse.json({ error: "No signature" }, { status: 400 })
  }

let event: Stripe.Event

try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!)
  } catch (err: any) {
    console.error("Webhook signature verification failed:", err.message)
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
  }

try {
    switch (event.type) {
      case "checkout.session.completed": {
        const session = event.data.object as Stripe.Checkout.Session
        const customerEmail = session.customer_email || session.metadata?.userEmail
        const planId = session.metadata?.planId

if (customerEmail && planId) {
          await createOrUpdateSubscription(
            customerEmail,
            planId,
            session.customer as string,
            session.subscription as string,
          )
        }
        break
      }

case "customer.subscription.updated":
      case "customer.subscription.created": {
        const subscription = event.data.object as Stripe.Subscription
        const customer = (await stripe.customers.retrieve(subscription.customer as string)) as Stripe.Customer

if (customer.email) {
          await createOrUpdateSubscription(
            customer.email,
            "pro", // Determine from metadata if needed
            customer.id,
            subscription.id,
            new Date(subscription.current_period_start * 1000),
            new Date(subscription.current_period_end * 1000),
          )
        }
        break
      }

case "customer.subscription.deleted": {
        const subscription = event.data.object as Stripe.Subscription
        const customer = (await stripe.customers.retrieve(subscription.customer as string)) as Stripe.Customer

if (customer.email) {
          await cancelSubscription(customer.email)
        }
        break
      }
    }

return NextResponse.json({ received: true })
  } catch (error) {
    console.error("Webhook handler error:", error)
    return NextResponse.json({ error: "Webhook handler failed" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/subscription-check.ts" isMerged="true"
import { createServerClient } from "@/lib/supabase/server"
import { sql } from "@/lib/db"
import { SUBSCRIPTION_PLANS } from "@/lib/products"

export interface UsageStats {
  kitsThisMonth: number
  regenerationsThisMonth: number
  exportsThisMonth: number
}

export interface SubscriptionStatus {
  isAuthenticated: boolean
  userEmail: string | null
  plan: string
  limits: {
    kitsPerMonth: number
    regenerationsPerMonth: number
    exportsPerMonth: number
  }
  usage: UsageStats
  canCreateKit: boolean
  canRegenerate: boolean
  canExport: boolean
}

export async function checkSubscriptionStatus(): Promise<SubscriptionStatus> {
  const supabase = await createServerClient()
  const {
    data: { user },
  } = await supabase.auth.getUser()

if (!user) {
    return {
      isAuthenticated: false,
      userEmail: null,
      plan: "none",
      limits: { kitsPerMonth: 0, regenerationsPerMonth: 0, exportsPerMonth: 0 },
      usage: { kitsThisMonth: 0, regenerationsThisMonth: 0, exportsThisMonth: 0 },
      canCreateKit: false,
      canRegenerate: false,
      canExport: false,
    }
  }

// Get user's subscription
  const subscriptionResult = await sql(
    `SELECT plan FROM user_subscriptions WHERE user_email = $1 AND status = 'active' ORDER BY created_at DESC LIMIT 1`,
    [user.email],
  )

const userPlan = subscriptionResult[0]?.plan || "free"
  const planLimits = SUBSCRIPTION_PLANS.find((p) => p.id === userPlan)?.limits || SUBSCRIPTION_PLANS[0].limits

// Get current month's usage
  const startOfMonth = new Date()
  startOfMonth.setDate(1)
  startOfMonth.setHours(0, 0, 0, 0)

const usageResult = await sql(
    `SELECT 
      kits_created, 
      regenerations_count, 
      exports_count 
    FROM user_usage 
    WHERE user_email = $1 
    AND month = $2`,
    [user.email, startOfMonth.toISOString()],
  )

const usage: UsageStats = {
    kitsThisMonth: usageResult[0]?.kits_created || 0,
    regenerationsThisMonth: usageResult[0]?.regenerations_count || 0,
    exportsThisMonth: usageResult[0]?.exports_count || 0,
  }

return {
    isAuthenticated: true,
    userEmail: user.email!,
    plan: userPlan,
    limits: planLimits,
    usage,
    canCreateKit: planLimits.kitsPerMonth === -1 || usage.kitsThisMonth < planLimits.kitsPerMonth,
    canRegenerate:
      planLimits.regenerationsPerMonth === -1 || usage.regenerationsThisMonth < planLimits.regenerationsPerMonth,
    canExport: planLimits.exportsPerMonth === -1 || usage.exportsThisMonth < planLimits.exportsPerMonth,
  }
}

export async function incrementUsage(userEmail: string, type: "kit" | "regeneration" | "export") {
  const startOfMonth = new Date()
  startOfMonth.setDate(1)
  startOfMonth.setHours(0, 0, 0, 0)

const field = type === "kit" ? "kits_created" : type === "regeneration" ? "regenerations_count" : "exports_count"

await sql(
    `INSERT INTO user_usage (user_email, month, ${field})
    VALUES ($1, $2, 1)
    ON CONFLICT (user_email, month)
    DO UPDATE SET ${field} = user_usage.${field} + 1`,
    [userEmail, startOfMonth.toISOString()],
  )
}
[V0_FILE]typescriptreact:file="components/paywall-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { CheckIcon } from "lucide-react"
import { SUBSCRIPTION_PLANS } from "@/lib/products"
import { createCheckoutSession } from "@/app/actions/stripe"
import { useRouter } from "next/navigation"

interface PaywallModalProps {
  isOpen: boolean
  onClose: () => void
  reason: "kit" | "regeneration" | "export"
  currentUsage: number
  limit: number
}

export function PaywallModal({ isOpen, onClose, reason, currentUsage, limit }: PaywallModalProps) {
  const [isLoading, setIsLoading] = useState(false)
  const router = useRouter()

const messages = {
    kit: `You've created ${currentUsage} of ${limit} brand kits this month.`,
    regeneration: `You've used ${currentUsage} of ${limit} regenerations this month.`,
    export: `You've exported ${currentUsage} of ${limit} times this month.`,
  }

const handleUpgrade = async (planId: string) => {
    setIsLoading(true)
    try {
      const result = await createCheckoutSession(planId)
      if (result.url) {
        window.location.href = result.url
      }
    } catch (error) {
      console.error("Failed to create checkout session:", error)
    } finally {
      setIsLoading(false)
    }
  }

const proPlan = SUBSCRIPTION_PLANS[1]

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Upgrade to Continue</DialogTitle>
          <DialogDescription>{messages[reason]} Upgrade to Pro for unlimited access.</DialogDescription>
        </DialogHeader>

<Card className="p-6 border-2 border-primary">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-2xl font-bold">{proPlan.name}</h3>
                <p className="text-muted-foreground">{proPlan.description}</p>
              </div>
              <div className="text-right">
                <div className="text-3xl font-bold">${(proPlan.priceInCents / 100).toFixed(0)}</div>
                <div className="text-sm text-muted-foreground">per month</div>
              </div>
            </div>

<ul className="space-y-2">
              {proPlan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2">
                  <CheckIcon className="h-5 w-5 text-primary" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>

<Button size="lg" className="w-full" onClick={() => handleUpgrade(proPlan.id)} disabled={isLoading}>
              {isLoading ? "Processing..." : `Upgrade to ${proPlan.name}`}
            </Button>
          </div>
        </Card>

<div className="text-center text-sm text-muted-foreground">Your free tier resets on the 1st of each month</div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Navigation from "@/components/ui/navigation"
import { createClient } from "@/lib/supabase/client"
import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"

export default function HomePage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [isChecking, setIsChecking] = useState(true)
  const router = useRouter()
  const supabase = createClient()

useEffect(() => {
    const checkUser = async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (user) {
        router.push("/studio")
        return // Don't update state, just redirect
      }

setIsLoggedIn(false)
      setIsChecking(false)
    }

checkUser()
  }, [supabase.auth, router])

if (isChecking) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <div className="h-8 w-8 animate-spin rounded-full border-2 border-slate-700 border-t-emerald-500" />
          <p className="text-sm text-slate-400">Loading...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      {/* Top gradient glow */}
      <div className="pointer-events-none fixed inset-x-0 top-0 z-0 h-64 bg-gradient-to-b from-emerald-500/20 via-slate-950 to-slate-950 blur-3xl" />

<main className="relative z-10 mx-auto flex min-h-screen max-w-6xl flex-col px-4 pb-16 pt-6">
        {/* Header / Nav */}
        <Navigation />

{/* Hero */}
        <section className="grid flex-1 gap-10 md:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] md:items-center">
          {/* Left: copy */}
          <div>
            <p className="inline-flex items-center gap-2 rounded-full border border-emerald-400/40 bg-slate-950/60 px-3 py-1 text-[11px] font-medium text-emerald-200">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
              From idea to cannabis brand kit in minutes
            </p>

<h1 className="mt-4 text-balance text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">
              Turn your <span className="text-emerald-300">cannabis brand idea</span> into a ready-to-use design brief.
            </h1>

<p className="mt-3 max-w-xl text-balance text-sm text-slate-300 sm:text-base">
              Cannabrand Studio asks a few smart questions about your vibe, audience, and products—then generates a full
              brand kit: colors, typography, logo directions, packaging concepts, and AI-ready prompts for your design
              tools.
            </p>

<div className="mt-6 flex flex-wrap items-center gap-3">
              {isLoggedIn ? (
                <>
                  <Link
                    href="/studio"
                    className="inline-flex items-center rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
                  >
                    Go to My Studio
                    <span className="ml-1 text-base leading-none">→</span>
                  </Link>
                  <Link
                    href="/wizard"
                    className="inline-flex items-center rounded-lg border border-emerald-400/60 bg-emerald-500/10 px-4 py-2 text-sm font-semibold text-emerald-200 hover:bg-emerald-500/20"
                  >
                    Create New Kit
                  </Link>
                </>
              ) : (
                <>
                  <Link
                    href="/wizard"
                    className="inline-flex items-center rounded-lg bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
                  >
                    Start a brand kit
                    <span className="ml-1 text-base leading-none">→</span>
                  </Link>
                  <Link href="/kit/demo" className="text-xs font-medium text-slate-300 hover:text-emerald-300">
                    View example kit
                  </Link>
                </>
              )}
            </div>

<div className="mt-6 flex flex-wrap gap-4 text-[11px] text-slate-400">
              <div>✓ Designed for licensed cannabis & CBD brands</div>
              <div>✓ Works with Midjourney, Dzine, Pacdora & more</div>
              <div className="hidden sm:block">✓ Perfect for pitch decks, packaging briefs, and sites</div>
            </div>
          </div>

{/* Right: mock preview cards */}
          <div className="relative hidden md:block">
            <div className="absolute -inset-8 -z-10 rounded-3xl bg-emerald-500/10 blur-3xl" />
            <Link
              href="/kit/demo"
              className="block space-y-4 rounded-3xl border border-slate-800 bg-slate-900/80 p-4 shadow-2xl shadow-black/60 transition-colors hover:border-emerald-500/40"
            >
              {/* Brand snapshot card */}
              <div className="rounded-2xl border border-slate-800 bg-slate-950/80 p-4 text-xs">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-[11px] uppercase tracking-wide text-slate-500">Brand snapshot</div>
                    <div className="mt-1 text-sm font-semibold text-slate-50">"Blue Diamonds"</div>
                    <div className="mt-0.5 text-[11px] text-slate-300">Refined flower for after-hours minds.</div>
                  </div>
                  <div className="rounded-full border border-emerald-500/40 bg-emerald-500/10 px-2 py-0.5 text-[10px] text-emerald-200">
                    Example kit
                  </div>
                </div>
                <p className="mt-3 text-[11px] text-slate-300">
                  Positioning: Luxury, nightlife-friendly flower line for professionals who want connoisseur quality
                  without loud, cliché weed branding.
                </p>
              </div>

{/* Colors & typography mini row */}
              <div className="grid gap-3 md:grid-cols-2">
                <div className="rounded-2xl border border-slate-800 bg-slate-950/80 p-3 text-[11px]">
                  <div className="flex items-center justify-between">
                    <span className="uppercase tracking-wide text-slate-500">Color system</span>
                    <span className="text-slate-400">4–6 swatches</span>
                  </div>
                  <div className="mt-2 flex gap-2">
                    <ColorDot name="Midnight Resin" hex="#020617" />
                    <ColorDot name="Glass Ash" hex="#1e293b" />
                    <ColorDot name="Highlight Ember" hex="#f97316" />
                    <ColorDot name="Accent Mint" hex="#22c55e" />
                  </div>
                </div>

<div className="rounded-2xl border border-slate-800 bg-slate-950/80 p-3 text-[11px]">
                  <div className="uppercase tracking-wide text-slate-500">Typography</div>
                  <div className="mt-2 text-slate-100">Headings: modern serif with sharp details</div>
                  <div className="mt-1 text-slate-300">Body: clean grotesque for menus, jars, and web.</div>
                </div>
              </div>

{/* Prompts preview */}
              <div className="rounded-2xl border border-emerald-500/40 bg-slate-950/90 p-3 text-[11px]">
                <div className="flex items-center justify-between">
                  <span className="uppercase tracking-wide text-emerald-300">AI prompt preview</span>
                  <span className="rounded-full border border-emerald-500/30 px-2 py-0.5 text-[10px] text-emerald-200">
                    Ready for Midjourney / Dzine
                  </span>
                </div>
                <p className="mt-2 font-mono leading-relaxed text-emerald-100">
                  Minimalist cannabis brand logo for "Blue Diamonds", luxury adult-use flower line, monogram BD with
                  subtle diamond facets, no cliché leaf, midnight blue and soft platinum, flat embossed style,
                  ultra-clean vector, high-end packaging aesthetics.
                </p>
              </div>
            </Link>
          </div>
        </section>

{/* How it works */}
        <section id="how-it-works" className="mt-16 border-t border-slate-800 pt-10">
          <h2 className="text-balance text-lg font-semibold text-slate-50">How Cannabrand Studio works</h2>
          <p className="mt-1 text-balance text-xs text-slate-400">
            Built for cannabis founders, designers, and marketers who need to move fast without sacrificing taste.
          </p>

{/* Features / What you get */}
        <section id="features" className="mt-16 border-t border-slate-800 pt-10">
          <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
            <div>
              <h2 className="text-balance text-lg font-semibold text-slate-50">What's inside each brand kit</h2>
              <p className="mt-1 text-balance text-xs text-slate-400">
                Everything you need to brief a designer, feed an AI model, or build a cohesive cannabis brand from day
                one.
              </p>
            </div>
            <Link
              href="/wizard"
              className="inline-flex items-center rounded-lg border border-emerald-400/60 bg-emerald-500/10 px-3 py-1.5 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
            >
              Generate my first kit
              <span className="ml-1 text-base leading-none">↗</span>
            </Link>
          </div>

{/* CTA footer */}
        <section className="mt-16 rounded-3xl border border-emerald-500/40 bg-gradient-to-r from-emerald-500/10 via-slate-950 to-slate-950 px-5 py-6 shadow-lg shadow-emerald-500/30">
          <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
            <div>
              <h3 className="text-balance text-base font-semibold text-slate-50">
                Ready to see your cannabis brand in studio lighting?
              </h3>
              <p className="mt-1 text-balance text-xs text-slate-200">
                Start a kit, tweak the results, and plug them straight into your packaging and marketing workflow.
              </p>
            </div>

<div className="flex flex-wrap items-center gap-3">
              {isLoggedIn ? (
                <>
                  <Link
                    href="/studio"
                    className="inline-flex items-center rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
                  >
                    Go to Studio
                    <span className="ml-1 text-base leading-none">→</span>
                  </Link>
                  <Link
                    href="/wizard"
                    className="text-[11px] text-emerald-200 hover:text-emerald-100 underline underline-offset-2"
                  >
                    Or create a new kit
                  </Link>
                </>
              ) : (
                <>
                  <Link
                    href="/wizard"
                    className="inline-flex items-center rounded-lg bg-emerald-500 px-4 py-2 text-sm font-semibold text-slate-950 shadow-sm shadow-emerald-500/50 hover:bg-emerald-400"
                  >
                    Start a brand kit
                    <span className="ml-1 text-base leading-none">→</span>
                  </Link>
                  <span className="text-[11px] text-emerald-200">
                    No login required for now. Just ideas in, brand kit out.
                  </span>
                </>
              )}
            </div>
          </div>
        </section>
      </main>
    </div>
  )
}

/* ---------- Small subcomponents ---------- */

function ColorDot({ name, hex }: { name: string; hex: string }) {
  const safeHex = hex.startsWith("#") ? hex : `#${hex}`
  return (
    <div className="flex flex-col items-center gap-1">
      <div className="h-7 w-7 rounded-full border border-slate-900" style={{ backgroundColor: safeHex }} />
      <span className="text-[9px] text-slate-400">{name}</span>
    </div>
  )
}

function StepCard({
  step,
  title,
  body,
}: {
  step: string
  title: string
  body: string
}) {
  return (
    <div className="flex h-full flex-col rounded-2xl border border-slate-800 bg-slate-900/70 p-4 text-xs">
      <div className="flex items-center gap-2">
        <div className="flex h-6 w-6 items-center justify-center rounded-full border border-emerald-400/60 bg-emerald-500/10 text-[11px] font-semibold text-emerald-200">
          {step}
        </div>
        <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-300">{title}</div>
      </div>
      <p className="mt-2 text-[11px] text-slate-300">{body}</p>
    </div>
  )
}

function FeatureCard({
  title,
  bullets,
}: {
  title: string
  bullets: string[]
}) {
  return (
    <div className="flex h-full flex-col rounded-2xl border border-slate-800 bg-slate-900/70 p-4 text-xs">
      <div className="text-sm font-semibold text-slate-50">{title}</div>
      <ul className="mt-3 space-y-1.5">
        {bullets.map((b) => (
          <li key={b} className="flex items-start gap-2 text-[11px] text-slate-300">
            <span className="mt-[3px] h-1.5 w-1.5 rounded-full bg-emerald-400" />
            <span>{b}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescript:file="lib/products.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export interface SubscriptionPlan {
  id: string
  name: string
  description: string
  priceInCents: number
  stripePriceId?: string // Added Stripe price ID field
  features: string[]
  limits: {
    kitsPerMonth: number
    regenerationsPerMonth: number
    exportsPerMonth: number
    analytics: boolean
    versionHistory: boolean
    priority: boolean
  }
}

export const SUBSCRIPTION_PLANS: SubscriptionPlan[] = [
  {
    id: "free",
    name: "Free",
    description: "Perfect for trying out Cannabrand Studio",
    priceInCents: 0,
    features: [
      "3 brand kits per month",
      "10 section regenerations per month",
      "5 exports per month",
      "Basic analytics",
      "Community support",
    ],
    limits: {
      kitsPerMonth: 3,
      regenerationsPerMonth: 10,
      exportsPerMonth: 5,
      analytics: true,
      versionHistory: false,
      priority: false,
    },
  },
  {
    id: "pro",
    name: "Pro",
    description: "For professionals and growing brands",
    priceInCents: 2900,
    stripePriceId: "price_1SZ0olPTMni6AiTOXak6oVK9",
    features: [
      "Unlimited brand kits",
      "Unlimited regenerations",
      "Unlimited exports",
      "Full analytics dashboard",
      "Version history",
      "Priority email support",
      "Custom branding",
      "Kit templates",
    ],
    limits: {
      kitsPerMonth: -1,
      regenerationsPerMonth: -1,
      exportsPerMonth: -1,
      analytics: true,
      versionHistory: true,
      priority: true,
    },
  },
  {
    id: "enterprise",
    name: "Enterprise",
    description: "For agencies and large teams",
    priceInCents: 9900,
    stripePriceId: "price_1SZ0pIPTMni6AiTO3HIWtW5S",
    features: [
      "Everything in Pro",
      "Multi-user collaboration",
      "Custom AI model training",
      "API access",
      "Dedicated account manager",
      "Custom integration support",
      "SLA guarantee",
    ],
    limits: {
      kitsPerMonth: -1,
      regenerationsPerMonth: -1,
      exportsPerMonth: -1,
      analytics: true,
      versionHistory: true,
      priority: true,
    },
  },
]
[V0_FILE]sql:file="scripts/009-fix-subscriptions.sql" isMerged="true"
-- Add unique constraint for user_email in subscriptions
alter table user_subscriptions add constraint user_subscriptions_user_email_key unique (user_email);

-- Create function to initialize free subscriptions for new users
create or replace function ensure_user_subscription() returns trigger as $$
begin
  insert into user_subscriptions (user_email, plan_type, status)
  values (new.email, 'free', 'active')
  on conflict (user_email) do nothing;
  return new;
end;
$$ language plpgsql;
[V0_FILE]typescript:file="app/api/subscription/manual-update/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createOrUpdateSubscription } from "@/lib/db"
import { createClient } from "@/lib/supabase/server"

export async function POST(request: Request) {
  try {
    const supabase = await createClient()
    const {
      data: { user },
    } = await supabase.auth.getUser()

if (!user?.email) {
      return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
    }

const { planType } = await request.json()

// Update subscription directly (for testing without webhooks)
    const periodEnd = new Date()
    periodEnd.setMonth(periodEnd.getMonth() + 1)

await createOrUpdateSubscription(user.email, planType, undefined, undefined, new Date(), periodEnd)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("[v0] Manual subscription update error:", error)
    return NextResponse.json({ error: "Failed to update subscription" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/reset-password/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import Link from "next/link"

export default function ResetPasswordPage() {
  const [email, setEmail] = useState("")
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const supabase = createClient()

const handleResetPassword = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setMessage(null)

const { error } = await supabase.auth.resetPasswordForEmail(email, {
      redirectTo: `${window.location.origin}/update-password`,
    })

if (error) {
      setMessage({ type: "error", text: error.message })
    } else {
      setMessage({
        type: "success",
        text: "Password reset link sent! Check your email.",
      })
    }

setLoading(false)
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-2">
          <CardTitle className="text-2xl">Reset Password</CardTitle>
          <CardDescription>Enter your email address and we'll send you a link to reset your password</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleResetPassword} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="donald.robertson@modulo-studio.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>

{message && (
              <div
                className={`p-3 rounded-md text-sm ${
                  message.type === "success"
                    ? "bg-green-50 text-green-800 border border-green-200"
                    : "bg-red-50 text-red-800 border border-red-200"
                }`}
              >
                {message.text}
              </div>
            )}

<Button type="submit" className="w-full" disabled={loading}>
              {loading ? "Sending..." : "Send Reset Link"}
            </Button>

<div className="text-center text-sm">
              <Link href="/" className="text-primary hover:underline">
                Back to login
              </Link>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/update-password/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { createClient } from "@/lib/supabase/client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"

export default function UpdatePasswordPage() {
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [loading, setLoading] = useState(false)
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
  const router = useRouter()
  const supabase = createClient()

useEffect(() => {
    // Check if user is authenticated
    supabase.auth.getSession().then(({ data: { session } }) => {
      if (!session) {
        router.push("/")
      }
    })
  }, [router, supabase.auth])

const handleUpdatePassword = async (e: React.FormEvent) => {
    e.preventDefault()

if (password !== confirmPassword) {
      setMessage({ type: "error", text: "Passwords do not match" })
      return
    }

if (password.length < 6) {
      setMessage({ type: "error", text: "Password must be at least 6 characters" })
      return
    }

setLoading(true)
    setMessage(null)

const { error } = await supabase.auth.updateUser({ password })

if (error) {
      setMessage({ type: "error", text: error.message })
      setLoading(false)
    } else {
      setMessage({ type: "success", text: "Password updated successfully! Redirecting..." })
      setTimeout(() => {
        router.push("/studio")
      }, 2000)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-2">
          <CardTitle className="text-2xl">Update Password</CardTitle>
          <CardDescription>Enter your new password below</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleUpdatePassword} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password">New Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="Enter new password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm Password</Label>
              <Input
                id="confirmPassword"
                type="password"
                placeholder="Confirm new password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
              />
            </div>

<Button type="submit" className="w-full" disabled={loading}>
              {loading ? "Updating..." : "Update Password"}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Save, Bell, Mail, CreditCard, TrendingUp } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { showToast } from "@/components/ui/toast"
import { createClient } from "@/lib/supabase/client"
import Link from "next/link"

export default function SettingsPage() {
  const [companyName, setCompanyName] = useState("")
  const [loading, setLoading] = useState(false)
  const [user, setUser] = useState<{ email: string } | null>(null)
  const [subscription, setSubscription] = useState<any>(null)
  const [usage, setUsage] = useState<any>(null)
  const [syncing, setSyncing] = useState(false)

const [notifications, setNotifications] = useState({
    kitShared: true,
    kitUpdated: true,
    weeklySummary: true,
  })

useEffect(() => {
    const saved = localStorage.getItem("cannabrand-custom-branding")
    if (saved) {
      const branding = JSON.parse(saved)
      setCompanyName(branding.name || "")
    }

const savedNotifications = localStorage.getItem("cannabrand-notifications")
    if (savedNotifications) {
      setNotifications(JSON.parse(savedNotifications))
    }

const supabase = createClient()
    supabase.auth.getUser().then(({ data: { user } }) => {
      if (user) {
        setUser({ email: user.email || "" })
        fetchSubscriptionInfo(user.email || "")
      }
    })

const params = new URLSearchParams(window.location.search)
    if (params.get("success") === "true") {
      showToast("Syncing your subscription...", "default")
      handleSyncSubscription()
      window.history.replaceState({}, "", "/settings")
    }
  }, [])

const fetchSubscriptionInfo = async (email: string) => {
    try {
      const [subResponse, usageResponse] = await Promise.all([
        fetch(`/api/subscription?email=${encodeURIComponent(email)}`),
        fetch(`/api/usage?email=${encodeURIComponent(email)}`),
      ])

if (subResponse.ok) {
        const subData = await subResponse.json()
        console.log("[v0] Subscription data:", subData) // Debug log
        setSubscription(subData.subscription)
      }

if (usageResponse.ok) {
        const usageData = await usageResponse.json()
        setUsage(usageData.usage)
      }
    } catch (error) {
      console.error("[v0] Error fetching subscription info:", error)
    }
  }

const handleSyncSubscription = async () => {
    if (!user?.email) return

setSyncing(true)
    try {
      const response = await fetch("/api/subscription/sync", {
        method: "POST",
      })

const data = await response.json()

if (data.success) {
        showToast(`Subscription synced! You're on the ${data.planType} plan`, "success")
        await fetchSubscriptionInfo(user.email)
      } else {
        showToast(data.error || "No active subscription found in Stripe", "error")
      }
    } catch (error) {
      console.error("[v0] Sync error:", error)
      showToast("Failed to sync subscription", "error")
    } finally {
      setSyncing(false)
    }
  }

const handleTestUpgrade = async (planType: string) => {
    if (!user?.email) return

try {
      const response = await fetch("/api/subscription/manual-update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ planType }),
      })

if (response.ok) {
        showToast(`Upgraded to ${planType} plan`, "success")
        await fetchSubscriptionInfo(user.email)
      }
    } catch (error) {
      showToast("Failed to update subscription", "error")
    }
  }

const handleSave = () => {
    setLoading(true)
    const branding = { name: companyName }
    localStorage.setItem("cannabrand-custom-branding", JSON.stringify(branding))

localStorage.setItem("cannabrand-notifications", JSON.stringify(notifications))

showToast("Settings saved successfully", "success")
    setTimeout(() => {
      setLoading(false)
      window.location.reload()
    }, 500)
  }

const handleManageBilling = async () => {
    if (!subscription?.stripe_customer_id) return

try {
      const response = await fetch("/api/create-portal-session", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ customerId: subscription.stripe_customer_id }),
      })

const { url } = await response.json()
      window.location.href = url
    } catch (error) {
      showToast("Failed to open billing portal", "error")
    }
  }

return (
    <div className="min-h-screen bg-slate-950 text-slate-50">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 py-8 sm:py-10">
        <div className="mb-6 border-b border-slate-800 pb-4">
          <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
          <p className="mt-1 text-sm text-slate-300">Customize your Cannabrand Studio experience</p>
        </div>

<div className="space-y-6">
          {/* Subscription Section */}
          {user && (
            <Card className="p-6 border-emerald-500/20 bg-emerald-500/5">
              <div className="flex items-center gap-2 mb-4">
                <CreditCard className="w-5 h-5 text-emerald-400" />
                <h2 className="text-lg font-semibold">Subscription</h2>
              </div>

{subscription && subscription.plan_type !== "free" ? (
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <div className="font-medium capitalize">{subscription.plan_type} Plan</div>
                      <div className="text-sm text-slate-400">
                        Status: <span className="capitalize">{subscription.status}</span>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <Button onClick={handleSyncSubscription} variant="outline" size="sm" disabled={syncing}>
                        {syncing ? "Syncing..." : "Sync"}
                      </Button>
                      <Button onClick={handleManageBilling} variant="outline" size="sm">
                        Manage Billing
                      </Button>
                    </div>
                  </div>

{usage && (
                    <div className="pt-4 border-t border-slate-700">
                      <div className="flex items-center gap-2 mb-3">
                        <TrendingUp className="w-4 h-4 text-slate-400" />
                        <div className="text-sm font-medium text-slate-300">This Month's Usage</div>
                      </div>
                      <div className="grid grid-cols-3 gap-3">
                        <div className="bg-slate-900/50 rounded-lg p-3">
                          <div className="text-2xl font-bold text-emerald-400">{usage.kits_generated || 0}</div>
                          <div className="text-xs text-slate-400">Kits Generated</div>
                        </div>
                        <div className="bg-slate-900/50 rounded-lg p-3">
                          <div className="text-2xl font-bold text-emerald-400">{usage.regenerations || 0}</div>
                          <div className="text-xs text-slate-400">Regenerations</div>
                        </div>
                        <div className="bg-slate-900/50 rounded-lg p-3">
                          <div className="text-2xl font-bold text-emerald-400">{usage.exports || 0}</div>
                          <div className="text-xs text-slate-400">Exports</div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="text-center py-6">
                    <p className="text-slate-300 mb-4">You're currently on the free plan (3 kits/month)</p>
                    <div className="flex gap-2 justify-center">
                      <Link href="/pricing">
                        <Button>Upgrade to Pro</Button>
                      </Link>
                      <Button onClick={handleSyncSubscription} variant="outline" disabled={syncing}>
                        {syncing ? "Syncing..." : "Sync from Stripe"}
                      </Button>
                    </div>
                    <p className="text-xs text-slate-400 mt-3">
                      Just upgraded? Click "Sync from Stripe" to refresh your subscription status
                    </p>
                  </div>
                </div>
              )}
            </Card>
          )}

{/* Custom Branding Section */}
          <div className="rounded-xl border border-slate-800 bg-slate-900/70 p-6">
            <h2 className="text-lg font-semibold mb-4">Custom Branding</h2>

<div className="space-y-4">
              <div>
                <label htmlFor="company-name" className="block text-sm font-medium text-slate-300 mb-2">
                  Company Name
                </label>
                <input
                  id="company-name"
                  type="text"
                  value={companyName}
                  onChange={(e) => setCompanyName(e.target.value)}
                  placeholder="Your Company Name"
                  className="w-full rounded-lg border border-slate-700 bg-slate-950 px-4 py-2 text-sm text-slate-50 placeholder:text-slate-500 focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/20"
                />
                <p className="mt-1 text-xs text-slate-400">
                  This will replace "Cannabrand Studio" in the navigation and appear in exported PDFs
                </p>
              </div>
            </div>
          </div>

{/* Email Notifications */}
          <div className="rounded-xl border border-slate-800 bg-slate-900/70 p-6">
            <div className="flex items-center gap-2 mb-4">
              <Bell className="w-5 h-5 text-emerald-400" />
              <h2 className="text-lg font-semibold">Email Notifications</h2>
            </div>

<div className="space-y-4">
              <div className="flex items-start gap-3">
                <input
                  type="checkbox"
                  id="kit-shared"
                  checked={notifications.kitShared}
                  onChange={(e) => setNotifications({ ...notifications, kitShared: e.target.checked })}
                  className="mt-1 h-4 w-4 rounded border-slate-700 bg-slate-950 text-emerald-400 focus:ring-2 focus:ring-emerald-400/20"
                />
                <div>
                  <label htmlFor="kit-shared" className="block text-sm font-medium text-slate-300 cursor-pointer">
                    Kit Shared
                  </label>
                  <p className="text-xs text-slate-400 mt-1">
                    Receive notifications when someone shares a brand kit with you
                  </p>
                </div>
              </div>

<div className="flex items-start gap-3">
                <input
                  type="checkbox"
                  id="kit-updated"
                  checked={notifications.kitUpdated}
                  onChange={(e) => setNotifications({ ...notifications, kitUpdated: e.target.checked })}
                  className="mt-1 h-4 w-4 rounded border-slate-700 bg-slate-950 text-emerald-400 focus:ring-2 focus:ring-emerald-400/20"
                />
                <div>
                  <label htmlFor="kit-updated" className="block text-sm font-medium text-slate-300 cursor-pointer">
                    Kit Updated
                  </label>
                  <p className="text-xs text-slate-400 mt-1">
                    Get notified when a brand kit you own or collaborate on is updated
                  </p>
                </div>
              </div>

<div className="flex items-start gap-3">
                <input
                  type="checkbox"
                  id="weekly-summary"
                  checked={notifications.weeklySummary}
                  onChange={(e) => setNotifications({ ...notifications, weeklySummary: e.target.checked })}
                  className="mt-1 h-4 w-4 rounded border-slate-700 bg-slate-950 text-emerald-400 focus:ring-2 focus:ring-emerald-400/20"
                />
                <div>
                  <label htmlFor="weekly-summary" className="block text-sm font-medium text-slate-300 cursor-pointer">
                    Weekly Summary
                  </label>
                  <p className="text-xs text-slate-400 mt-1">
                    Receive a weekly summary of your brand kit activity and statistics
                  </p>
                </div>
              </div>

<div className="mt-4 p-3 rounded-lg bg-slate-950/50 border border-slate-800">
                <div className="flex items-start gap-2">
                  <Mail className="w-4 h-4 text-slate-400 mt-0.5 flex-shrink-0" />
                  <p className="text-xs text-slate-400">
                    Email notifications are logged and can be integrated with services like Resend or SendGrid in
                    production. For now, preferences are saved locally.
                  </p>
                </div>
              </div>
            </div>
          </div>

<Button onClick={handleSave} disabled={loading} className="gap-2">
            <Save className="h-4 w-4" />
            {loading ? "Saving..." : "Save Settings"}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/subscription/sync/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { syncSubscriptionFromStripe } from "@/app/actions/stripe"
import { createClient } from "@/lib/supabase/server"

export async function POST(request: Request) {
  try {
    console.log("[v0] Sync route called")

// Get the current user
    const supabase = await createClient()
    const {
      data: { user },
      error: authError,
    } = await supabase.auth.getUser()

console.log("[v0] User authenticated:", user?.email)

if (authError || !user?.email) {
      console.log("[v0] Auth error:", authError)
      return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
    }

// Sync subscription from Stripe
    console.log("[v0] Calling syncSubscriptionFromStripe for:", user.email)
    const result = await syncSubscriptionFromStripe(user.email)
    console.log("[v0] Sync result:", result)

if (!result.success) {
      console.log("[v0] Sync failed:", result.error)
      return NextResponse.json({ error: result.error }, { status: 400 })
    }

console.log("[v0] Sync succeeded, plan type:", result.planType)
    return NextResponse.json({
      success: true,
      planType: result.planType,
    })
  } catch (error: any) {
    console.error("[v0] Subscription sync error:", error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/actions/stripe.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { stripe } from "@/lib/stripe"
import { SUBSCRIPTION_PLANS } from "@/lib/products"

export async function startCheckoutSession(planId: string, userEmail?: string) {
  const plan = SUBSCRIPTION_PLANS.find((p) => p.id === planId)
  if (!plan) {
    throw new Error(`Plan with id "${planId}" not found`)
  }

if (plan.priceInCents === 0) {
    throw new Error("Cannot create checkout session for free plan")
  }

const session = await stripe.checkout.sessions.create({
    ui_mode: "embedded",
    redirect_on_completion: "never",
    customer_email: userEmail,
    line_items: [
      {
        price: plan.stripePriceId, // Use the real price ID
        quantity: 1,
      },
    ],
    mode: "subscription",
    metadata: {
      planId: plan.id,
      userEmail: userEmail || "guest",
    },
  })

return session.client_secret
}

export async function createCheckoutSession(planId: string, userEmail?: string) {
  const plan = SUBSCRIPTION_PLANS.find((p) => p.id === planId)
  if (!plan) {
    throw new Error(`Plan with id "${planId}" not found`)
  }

if (plan.priceInCents === 0) {
    throw new Error("Cannot create checkout session for free plan")
  }

const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    customer_email: userEmail, // Pass email so we know who subscribed
    line_items: [
      {
        price: plan.stripePriceId,
        quantity: 1,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/settings?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/pricing`,
    metadata: {
      planId: plan.id,
      userEmail: userEmail || "",
    },
  })

return { url: session.url }
}

export async function createCustomerPortalSession(customerId: string) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: `${process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"}/settings`,
  })

return session.url
}

export async function syncSubscriptionFromStripe(userEmail: string) {
  "use server"

try {
    console.log("[v0] Syncing subscription for:", userEmail)

// Find the customer by email
    const customers = await stripe.customers.list({
      email: userEmail,
      limit: 1,
    })

console.log("[v0] Found customers:", customers.data.length)

if (customers.data.length === 0) {
      return { success: false, error: "No Stripe customer found" }
    }

const customer = customers.data[0]
    console.log("[v0] Customer ID:", customer.id)

// Get their active subscriptions
    const subscriptions = await stripe.subscriptions.list({
      customer: customer.id,
      status: "active",
      limit: 1,
    })

console.log("[v0] Found subscriptions:", subscriptions.data.length)

if (subscriptions.data.length === 0) {
      return { success: false, error: "No active subscription found" }
    }

const subscription = subscriptions.data[0]
    console.log("[v0] Subscription ID:", subscription.id)

// Determine plan type from the price ID
    const priceId = subscription.items.data[0].price.id
    console.log("[v0] Price ID:", priceId)

let planType = "free"

if (priceId === "price_1SZ0olPTMni6AiTOXak6oVK9") {
      planType = "pro"
    } else if (priceId === "price_1SZ0pIPTMni6AiTO3HIWtW5S") {
      planType = "enterprise"
    }

console.log("[v0] Determined plan type:", planType)

// Update the database
    const { createOrUpdateSubscription } = await import("@/lib/db")
    await createOrUpdateSubscription(
      userEmail,
      planType,
      customer.id,
      subscription.id,
      new Date(subscription.current_period_start * 1000),
      new Date(subscription.current_period_end * 1000),
    )

console.log("[v0] Database updated successfully")

return { success: true, planType }
  } catch (error: any) {
    console.error("[v0] Error syncing subscription:", error)
    return { success: false, error: error.message }
  }
}
[V0_FILE]sql:file="scripts/009-fix-subscription-unique.sql"
-- Add unique constraint to user_email in user_subscriptions table
-- This is required for the ON CONFLICT clause to work properly

ALTER TABLE user_subscriptions 
ADD CONSTRAINT user_subscriptions_user_email_unique UNIQUE (user_email);110:T741d7,[V0_FILE]sql:file="scripts/001-create-tables.sql" isMerged="true"
-- Create brands table
CREATE TABLE IF NOT EXISTS brands (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  description TEXT NOT NULL,
  target_audience TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create brand_kits table
CREATE TABLE IF NOT EXISTS brand_kits (
  id SERIAL PRIMARY KEY,
  brand_id INTEGER NOT NULL REFERENCES brands(id) ON DELETE CASCADE,
  colors JSONB NOT NULL,
  typography JSONB NOT NULL,
  voice_tone JSONB NOT NULL,
  visual_direction JSONB NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for better query performance
CREATE INDEX IF NOT EXISTS idx_brand_kits_brand_id ON brand_kits(brand_id);
CREATE INDEX IF NOT EXISTS idx_brands_created_at ON brands(created_at DESC);
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76",
    "@neondatabase/serverless": "1.0.2",
    "ai": "5.0.98",
    "@react-pdf/renderer": "4.3.1",
    "@ai-sdk/groq": "2.0.31",
    "crypto": "1.0.1",
    "jspdf": "3.0.4",
    "@supabase/ssr": "0.8.0",
    "server-only": "0.0.1",
    "stripe": "20.0.0",
    "@stripe/react-stripe-js": "5.4.1",
    "@stripe/stripe-js": "8.5.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescript:file="app/api/brands/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { sql } from "@/lib/db"
import { BrandInputSchema } from "@/lib/types"
// import { createServerClient } from "@/lib/supabase/server"

export async function POST(request: NextRequest) {
  try {
    // const supabase = await createServerClient()
    // const {
    //   data: { user },
    // } = await supabase.auth.getUser()

const body = await request.json()
    const validatedData = BrandInputSchema.parse(body)

const result = await sql`
      INSERT INTO brands (name, description, target_audience)
      VALUES (
        ${validatedData.name}, 
        ${validatedData.description}, 
        ${validatedData.targetAudience}
      )
      RETURNING id, name, description, target_audience, created_at, updated_at
    `

const brand = result[0]

return NextResponse.json({ brand }, { status: 201 })
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({ error: error.message }, { status: 400 })
    }
    return NextResponse.json({ error: "An unexpected error occurred" }, { status: 500 })
  }
}

export async function GET() {
  try {
    // const supabase = await createServerClient()
    // const {
    //   data: { user },
    // } = await supabase.auth.getUser()

const brands = await sql`
      SELECT id, name, description, target_audience, created_at, updated_at
      FROM brands
      ORDER BY created_at DESC
      LIMIT 100
    `

return NextResponse.json({ brands })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch brands" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/brands/[id]/kits/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { sql } from "@/lib/db"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    const brandId = Number.parseInt(id)

if (isNaN(brandId)) {
      return NextResponse.json({ error: "Invalid brand ID" }, { status: 400 })
    }

const kits = await sql`
      SELECT id, brand_id, colors, typography, voice_tone, visual_direction, created_at, updated_at
      FROM brand_kits
      WHERE brand_id = ${brandId}
      ORDER BY created_at DESC
    `

return NextResponse.json({ kits })
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch brand kits" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/brand-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Spinner } from "@/components/ui/spinner"
import type { BrandInput } from "@/lib/types"

interface BrandFormProps {
  onSuccess: (brandId: number) => void
}

export function BrandForm({ onSuccess }: BrandFormProps) {
  const [formData, setFormData] = useState<BrandInput>({
    name: "",
    description: "",
    targetAudience: "",
  })
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    setError(null)

try {
      // Create brand
      const brandResponse = await fetch("/api/brands", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })

if (!brandResponse.ok) {
        const errorData = await brandResponse.json()
        throw new Error(errorData.error || "Failed to create brand")
      }

const { brand } = await brandResponse.json()

// Generate brand kit
      const kitResponse = await fetch(`/api/brands/${brand.id}/generate-kit`, {
        method: "POST",
      })

if (!kitResponse.ok) {
        const errorData = await kitResponse.json()
        throw new Error(errorData.error || "Failed to generate brand kit")
      }

onSuccess(brand.id)
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle className="text-2xl">Create Your Cannabis Brand</CardTitle>
        <CardDescription>Tell us about your brand and we'll generate a comprehensive brand kit</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="name">Brand Name</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              placeholder="Enter your brand name"
              required
              disabled={isLoading}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">Brand Description</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              placeholder="Describe what makes your brand unique, your mission, and core values"
              rows={4}
              required
              disabled={isLoading}
              minLength={10}
            />
          </div>